カスタム CSS カーソル

カーソルは、ユーザーがクリックまたはテキストを入力できる画面上の位置を示します。 Web サイトコンポーネントごとに異なるカーソルを使用できます。開発者は、アプリケーションで使用されるカーソルが魅力的であることを確認する必要があります。たとえば、マウスホバーのボタンに指差しカーソルを使用できます。テキスト (点滅線) インジケータは、テキストが入力されるテキストボックスで使用されます。

CSS には、cursor プロパティの値を指定するだけで利用できるカーソルスタイルがいくつかあります。ただし、開発者は CSS を使用してカスタマイズしたカーソルを作成できます。

このスタディガイドでは、次の内容について説明します。

- CSS カーソル
- カスタムカーソル CSS

本題に入る前に、いくつかの CSS カーソル形状を実際の例で見てみましょう。

CSS カーソル

CSS「 カーソル 」プロパティには、ポインター、なし、進行状況など、さまざまな値があります。マウスホバー時にさまざまなカーソルが表示される行を含むテーブルを作成しましょう。

例: HTML でさまざまな CSS カーソルを表すテーブルを作成する

まず、HTML に

要素を追加します。この要素の内部:

タグを使用して行を作成します。

最初の行には見出しが含まれています。

これらの見出しは、

タグには、列にデータを入力するための 2 つの

タグを使用して指定されます。他の
タグが含まれています。 2 番目の	タグは、CSS で適用されるボタン要素を表します。カーソル」異なる値を持つプロパティ。上記のシナリオの HTML コードを以下に示します。 < テーブル > < トレ > < 番目スタイル = '幅: 200px;' > cssカーソルセレクター番目 > < 番目スタイル = '幅: 200px;' > カーソルのスタイル番目 > トレ > < トレ > < td > カーソル: ポインター td > < td >< ボタンスタイル = 'カーソル: ポインター;' > ポインタボタン > td > トレ > < トレ > < td > カーソル: 進行状況 td > < td >< ボタンスタイル = 「カーソル: 進行中;」 > 進捗ボタン > td > トレ > < トレ > < td > カーソル: 許可されていません td > < td >< ボタンスタイル = 'カーソル: 許可されていません;' > 禁じられているボタン > td > トレ > < トレ > < td > カーソル: なし td > < td >< ボタンスタイル = 'カーソル: なし;' > なしボタン > td > トレ > < トレ > < td > カーソル: 移動 td > < td >< ボタンスタイル = 「カーソル: 移動;」 > 動くボタン > td > トレ > < トレ > < td > カーソル：グラブ td > < td >< ボタンスタイル = 「カーソル: グラブ;」 > 掴むボタン > td > トレ > < トレ > < td > カーソル: コピー td > < td >< ボタンスタイル = 「カーソル: コピー;」 > コピーボタン > td > トレ > < トレ > < td > カーソル: col-resize td > < td >< ボタンスタイル = 'カーソル: col-resize;' > col-resize ボタン > td > トレ > < トレ > < td > カーソル: 行のサイズ変更 td > < td >< ボタンスタイル = 「カーソル: 行のサイズ変更;」 > 行のサイズ変更ボタン > td > トレ > < トレ > < td > カーソル: テキスト td > < td >< ボタンスタイル = 'カーソル: テキスト;' > 文章ボタン > td > トレ > テーブル > 上記のコードは、次の結果を生成します。次のセクションでは、さまざまなスタイルを HTML 要素に適用します。スタイル「すべて」の要素 * { パディング: 0 ; マージン： 0 ; font-family: Arial、Helvetica、sans-serif; } すべての HTML 要素には、以下で説明する CSS スタイルが適用されます。「パディング ” のプロパティ 0 」値には、要素のコンテンツの前後にスペースは含まれません。「マージン ” のプロパティ 0 」値は、各要素の外側にスペースを追加しません。「フォントファミリー「プロパティに値が割り当てられます」 Arial、Helvetica、サンセリフ」。フォントスタイルのリストは、最初のスタイルがブラウザーでサポートされていない場合に、他のスタイルを適用する必要があることを確認するために提供されます。スタイル「テーブル」要素テーブル { マージン: 0px 自動; ボーダー: 1px ソリッドゲインズボロ; } HTML テーブル要素は、次に説明する CSS プロパティで適用されます。「国境 ” プロパティは値で設定されます “ 1px ソリッドゲインズボロ」は、それぞれ境界線の幅、境界線のスタイル、および境界線の色を表します。「マージン」プロパティは上記のように動作します。スタイル「td」要素 td { テキスト整列: 中央; }	要素は、プロパティ「テキスト揃え」値で「中心」。列のテキストを中央に揃えます。スタイル「ボタン」要素ボタン { 背景色: カデットブルー; パディング: 10px 10px; 色： #ffffff; 幅: 150px; } 上記の HTML コードで使用されているボタン要素は、以下で説明する新しい CSS プロパティでスタイル設定されています。「背景色」は、要素の背景の色を指定します。「パディング」として割り当てられた値を「 10px 10px 」は、要素の項目の上下に 10 ピクセル、左右に 10 ピクセルのスペースを追加します。「色」要素のフォントの色を調整します。「幅」は要素の幅を調整するプロパティです。上記のコードは、次の結果を生成します。これまで、CSS によって提供されるカーソルについて説明してきました。次のセクションの例では、CSS を使用してカスタムカーソルを作成する方法について説明します。カスタムカーソル CSS 開発者は、アプリケーションに適したカーソルを使用する必要があります。ユーザーの注意を引くには、カーソルを魅力的にする必要があります。さらに、この目的のためにカスタムカーソルを作成することもできます。以下の例を見てください！例: CSS でカスタムカーソルを作成する方法 HTML では、2 つの div 要素を追加します。クラスのあるものサークル」とクラスを持つ他の「点」。 HTML < 分周クラス = 'サークル' > 分周 > < 分周クラス = '点' > 分周 > CSSセクションに進みましょう。スタイル「body」要素体 { 高さ: 100vh; } HTML ファイルの body 要素は、スタイル「身長要素の高さを設定するプロパティ。スタイル「円」div 。サークル { 幅: 20px; 高さ: 20px; 境界線: 2 ピクセルの白一色。境界半径: 50 % ; } 以下は、クラス「サークル」：「幅 ” プロパティは要素の幅を調整します。「国境」と指定された値を持つプロパティ 2px ベタ白」は、境界線の幅、境界線のスタイル、および色を表します。「境界半径 ” プロパティは、要素の境界線を丸く変更します。スタイル「ポイント」div 。点 { 幅: 5px; 高さ: 5px; 背景色: 白; 境界半径: 50 % ; } クラスポイントを持つ div 要素には、以下で説明するさまざまなプロパティが用意されています。「背景色」プロパティは、要素の背景色を指定します。「境界半径」は、要素のエッジを丸く設定します。他のプロパティは、説明したとおりに機能します。指定されたコードは、Web ページに次のカーソルを表示します。 HTML と CSS を使用してカーソルを作成しました。次のセクションでは、必要な機能をカーソルに追加する JavaScript コードを記述します。 JavaScript < 脚本 > const cursorCircle = document.querySelector ( '。サークル' ) ; const cursorPoint = document.querySelector ( '。点' ) ; const moveCursor = ( と ) = > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` 翻訳 ( ${マウスX} ピクセル、 ${マウスY} ピクセル ) ` ; cursorPoint.style.transform = ` 翻訳 ( ${マウスX} ピクセル、 ${マウスY} ピクセル ) ` ; } window.addEventListener ( 「マウスムーブ」、移動カーソル ) 脚本 > 上記の JavaScript コードの説明を以下に示します。「 <スクリプト> ” タグは、JavaScript コードを記述するために使用されるタグとペアになっています。「定数 ” キーワードは、変数が後に続く const キーワードを再割り当てできないことを示します。「 document.querySelector('.circle') 」は、ドキュメント内の指定されたセレクターに一致する circle div 要素を返します。「 document.querySelector('.point') 」は、ドキュメント内の指定されたセレクターに一致するポイント div 要素を返します。「 const moveCursor = (e) => 」この関数は、カーソル機能を指定します。「 e.clientY 」は、マウスイベントがトリガーされたときの垂直座標を返します。「 e.clientX 」は、マウスイベントがトリガーされたときの水平座標を返します。「 cursorCircle.style.transform 」サークル div は、スタイルトランスフォームで適用されます。「カーソルポイント.スタイル.変換」ポイント div はスタイル変換で適用されます。「 translate(${mouseX}px, ${mouseY}px) transform プロパティの値は、水平座標と垂直座標を設定します。「 window.addEventListener('mouse', moveCursor) 」イベントリスナーメソッドは、マウスの動きをリッスンします。これは、グローバルウィンドウオブジェクトの一部です。上記のコードブロックを指定すると、次のようにカーソルが画面上で自動的に移動します。カッコいい！さまざまな CSS プロパティを持つカスタムカーソルを作成しました。結論 CSS「カーソル」プロパティには、さまざまなカーソルスタイルを示す多数の値があります。ただし、HTML 要素と CSS プロパティを利用することで、カスタマイズされたカーソルを作成できます。次に、JavaScript コードを実装してその機能を有効にします。この調査では、実際の例を使用してカスタム CSS カーソルを作成する方法を示しました。他のカテゴリラズベリーパイイーサネット他のナノズームシナモンレビュー Zorinos 無線マインクラフト Ssh Openvas 圧縮 Laravel Aircrack オフィス生産性ソフトウェアブートシステムコール Sysctl ネットワーキング Gpu Gimp プレックス Uefi Docker ファイアウォール Wireshark Synology Pdf イーサリアムオウムOs 荘厳な Selinux Hyper-V 電話コード Gnome 珍味ねずみ Nmap Metasploit トレントタブレット Pycharm カールどこ Gcc フォント Ssl Nvidia 画像 Usb イカメイト Vlcメディアプレーヤー Dns ビットコインキーボード Inkscape 暗号化 Fedora Owncloud スキャナー原子 Red Hat Teamviewer スカイプ Vpn Xfce Jupyter Notebook Nfs ブログ Lvm Suse メディアプレーヤー Posix 蒸気ジェンキンスパワー Oracle Linux Netstat 平方メートルブルートゥース Ssd グリップ Gentoo オデッセイオーディオ Cpu Tensorflow オートデスク Lubuntu Llvm ウィンドウズ Microsoft Edge（レガシー）インターネットエクスプローラオフィス他のスカイプラズベリーパイウェブカメラメディアプレーヤー cPanel ハプロキシノームブート荘厳な取り外しガイド Ubuntu 24.04 ネクストクラウド美徳エヌビディア USBパススルーフェドーラ帽＃セキュアブートデバイスパススルー SDN ドライバーのインストールウェイクオンラン dsm7 人気の投稿キー管理サービスを使用して Windows 10 をアクティブ化する方法他の iPhoneでアプリを非表示にする方法他の Microsoft Edge でキャッシュと Cookie を管理およびクリアする方法他の AWS CLI で「delete-stack」コマンドを使用するにはどうすればよいですか? 他の Minecraft で泣く黒曜石は何をしますか? 他の forEach は TypeScript の for ループとどう違うのですか? 他の PostgreSQL は、スキーマに対するすべての権限をユーザーに付与します他の HTML と CSS を使用してヘッダーを作成するプロセスとは? 他の Elasticsearch アグリゲーションとは何ですか? 他の Amazon EC2 で Linux AMI を見つける方法は? 他の「git add –interactive」コマンドを使用して素晴らしいコミットを行う方法他の iPhone を Mac ウェブカメラとして使用する方法他の Node.js で Buffer.isBuffer() メソッドを使用する方法他の C# の動的型とは何ですか他のアニメ戦士コード 2022 Roblox 他の Ubuntu 用 Java クイックインストールガイド他の LangChain のエージェントとそのツールの両方にメモリを追加するにはどうすればよいですか? 他の Elasticsearch Show Watch 情報他の Git コミットハッシュとは何ですか?その使用方法は何ですか? 他の Emacs で現在のファイルをリロードする他の

タグを使用して指定されます。他の

タグが含まれています。

2 番目の

タグは、CSS で適用されるボタン要素を表します。 カーソル 」異なる値を持つプロパティ。

上記のシナリオの HTML コードを以下に示します。

< テーブル >
< トレ >
< 番目スタイル = '幅: 200px;' > cssカーソルセレクター番目 >
< 番目スタイル = '幅: 200px;' > カーソルのスタイル番目 >
トレ >
< トレ >
< td > カーソル: ポインター td >
< td >< ボタンスタイル = 'カーソル: ポインター;' > ポインタボタン > td >
トレ >
< トレ >
< td > カーソル: 進行状況 td >
< td >< ボタンスタイル = 「カーソル: 進行中;」 > 進捗ボタン > td >
トレ >
< トレ >
< td > カーソル: 許可されていません td >
< td >< ボタンスタイル = 'カーソル: 許可されていません;' > 禁じられているボタン > td >
トレ >
< トレ >
< td > カーソル: なし td >
< td >< ボタンスタイル = 'カーソル: なし;' > なしボタン > td >
トレ >
< トレ >
< td > カーソル: 移動 td >
< td >< ボタンスタイル = 「カーソル: 移動;」 > 動くボタン > td >
トレ >
< トレ >
< td > カーソル：グラブ td >
< td >< ボタンスタイル = 「カーソル: グラブ;」 > 掴むボタン > td >
トレ >
< トレ >
< td > カーソル: コピー td >
< td >< ボタンスタイル = 「カーソル: コピー;」 > コピーボタン > td >
トレ >
< トレ >
< td > カーソル: col-resize td >
< td >< ボタンスタイル = 'カーソル: col-resize;' > col-resize ボタン > td >
トレ >
< トレ >
< td > カーソル: 行のサイズ変更 td >
< td >< ボタンスタイル = 「カーソル: 行のサイズ変更;」 > 行のサイズ変更ボタン > td >
トレ >
< トレ >
< td > カーソル: テキスト td >
< td >< ボタンスタイル = 'カーソル: テキスト;' > 文章ボタン > td >
トレ >
テーブル >

上記のコードは、次の結果を生成します。

次のセクションでは、さまざまなスタイルを HTML 要素に適用します。

スタイル「すべて」の要素

* {
パディング: 0 ;
マージン： 0 ;
font-family: Arial、Helvetica、sans-serif;
}

すべての HTML 要素には、以下で説明する CSS スタイルが適用されます。

- 「 パディング ” のプロパティ 0 」値には、要素のコンテンツの前後にスペースは含まれません。
- 「 マージン ” のプロパティ 0 」値は、各要素の外側にスペースを追加しません。
- 「 フォントファミリー 「プロパティに値が割り当てられます」 Arial、Helvetica、サンセリフ 」。フォントスタイルのリストは、最初のスタイルがブラウザーでサポートされていない場合に、他のスタイルを適用する必要があることを確認するために提供されます。

スタイル「テーブル」要素

テーブル {
マージン: 0px 自動;
ボーダー: 1px ソリッドゲインズボロ;
}

HTML テーブル要素は、次に説明する CSS プロパティで適用されます。

- 「国境 ” プロパティは値で設定されます “ 1px ソリッドゲインズボロ 」は、それぞれ境界線の幅、境界線のスタイル、および境界線の色を表します。

「 マージン 」プロパティは上記のように動作します。

スタイル「td」要素

td {
テキスト整列: 中央;
}

要素は、プロパティ「 テキスト揃え 」値で「中心」。列のテキストを中央に揃えます。

スタイル「ボタン」要素

ボタン {
背景色: カデットブルー;
パディング: 10px 10px;
色： #ffffff;
幅: 150px;
}

上記の HTML コードで使用されているボタン要素は、以下で説明する新しい CSS プロパティでスタイル設定されています。

- 「 背景色 」は、要素の背景の色を指定します。
- 「 パディング 」として割り当てられた値を「 10px 10px 」は、要素の項目の上下に 10 ピクセル、左右に 10 ピクセルのスペースを追加します。
- 「色」要素のフォントの色を調整します。
- 「幅」は要素の幅を調整するプロパティです。

上記のコードは、次の結果を生成します。

これまで、CSS によって提供されるカーソルについて説明してきました。次のセクションの例では、CSS を使用してカスタムカーソルを作成する方法について説明します。

カスタムカーソル CSS

開発者は、アプリケーションに適したカーソルを使用する必要があります。ユーザーの注意を引くには、カーソルを魅力的にする必要があります。さらに、この目的のためにカスタムカーソルを作成することもできます。

以下の例を見てください！

例: CSS でカスタムカーソルを作成する方法

HTML では、2 つの div 要素を追加します。クラスのあるもの サークル 」とクラスを持つ他の「点」。

HTML

< 分周クラス = 'サークル' > 分周 >
< 分周クラス = '点' > 分周 >

CSSセクションに進みましょう。

スタイル「body」要素

体 {
高さ: 100vh;
}

HTML ファイルの body 要素は、スタイル「身長要素の高さを設定するプロパティ。

スタイル「円」div

。サークル {
幅: 20px;
高さ: 20px;
境界線: 2 ピクセルの白一色。
境界半径: 50 % ;
}

以下は、クラス「 サークル 」：

- 「幅 ” プロパティは要素の幅を調整します。
- 「国境」と指定された値を持つプロパティ 2px ベタ白 」は、境界線の幅、境界線のスタイル、および色を表します。
- 「 境界半径 ” プロパティは、要素の境界線を丸く変更します。

スタイル「ポイント」div

。点 {
幅: 5px;
高さ: 5px;
背景色: 白;
境界半径: 50 % ;
}

クラスポイントを持つ div 要素には、以下で説明するさまざまなプロパティが用意されています。

- 「 背景色 」プロパティは、要素の背景色を指定します。
- 「 境界半径 」は、要素のエッジを丸く設定します。
- 他のプロパティは、説明したとおりに機能します。

指定されたコードは、Web ページに次のカーソルを表示します。

HTML と CSS を使用してカーソルを作成しました。次のセクションでは、必要な機能をカーソルに追加する JavaScript コードを記述します。

JavaScript

< 脚本 >
const cursorCircle = document.querySelector ( '。サークル' ) ;
const cursorPoint = document.querySelector ( '。点' ) ;
const moveCursor = ( と ) = > {
const mouseY = e.clientY;
const mouseX = e.clientX;

cursorCircle.style.transform = ` 翻訳 ( ${マウスX} ピクセル、 ${マウスY} ピクセル ) ` ;
cursorPoint.style.transform = ` 翻訳 ( ${マウスX} ピクセル、 ${マウスY} ピクセル ) ` ;
}
window.addEventListener ( 「マウスムーブ」、移動カーソル )
脚本 >

上記の JavaScript コードの説明を以下に示します。

- 「 <スクリプト> ” タグは、JavaScript コードを記述するために使用されるタグとペアになっています。
- 「定数 ” キーワードは、変数が後に続く const キーワードを再割り当てできないことを示します。
- 「 document.querySelector('.circle') 」は、ドキュメント内の指定されたセレクターに一致する circle div 要素を返します。
- 「 document.querySelector('.point') 」は、ドキュメント内の指定されたセレクターに一致するポイント div 要素を返します。
- 「 const moveCursor = (e) => 」この関数は、カーソル機能を指定します。
- 「 e.clientY 」は、マウスイベントがトリガーされたときの垂直座標を返します。
- 「 e.clientX 」は、マウスイベントがトリガーされたときの水平座標を返します。
- 「 cursorCircle.style.transform 」サークル div は、スタイルトランスフォームで適用されます。
- 「 カーソルポイント.スタイル.変換 」ポイント div はスタイル変換で適用されます。
- 「 translate(${mouseX}px, ${mouseY}px) transform プロパティの値は、水平座標と垂直座標を設定します。
- 「 window.addEventListener('mouse', moveCursor) 」イベントリスナーメソッドは、マウスの動きをリッスンします。これは、グローバルウィンドウオブジェクトの一部です。

上記のコードブロックを指定すると、次のようにカーソルが画面上で自動的に移動します。

カッコいい！さまざまな CSS プロパティを持つカスタムカーソルを作成しました。

結論

CSS「 カーソル 」プロパティには、さまざまなカーソルスタイルを示す多数の値があります。ただし、HTML 要素と CSS プロパティを利用することで、カスタマイズされたカーソルを作成できます。次に、JavaScript コードを実装してその機能を有効にします。この調査では、実際の例を使用してカスタム CSS カーソルを作成する方法を示しました。

カスタム CSS カーソル

CSS カーソル

カスタム カーソル CSS

結論

カテゴリ

人気の投稿

カスタムカーソル CSS