CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのcursorプロパティで指定できる値一覧｜カーソルの種類を解説

CSSのcursorプロパティとは

CSSのcursorプロパティを使うと、要素の上にマウスを重ねたときに表示されるカーソルの種類を指定できます。リンクの上では指差しカーソル、テキストの上ではIビームなど、状況に応じた適切なカーソルを表示することで、ユーザーにとって直感的で分かりやすいインターフェースを実現できます。

cursorプロパティに指定できる値の一覧

以下の表は、cursorプロパティで使用できる主な値と、それぞれのカーソルの形状・役割をまとめたものです。

値説明
autoブラウザが状況に応じて自動的にカーソルの形状を決定します。テキストの上では「I」ビーム、リンクの上では「手」など、コンテキストに合わせて変化します。
crosshair十字線（クロスヘア）またはプラス記号を表示します。
defaultプラットフォームのデフォルトカーソル（通常は矢印）を表示します。
pointer指差しハンド（リンクをクリックできることを示すカーソル）。古いInternet Explorer 4では代わりにhandという値を使用していました。
moveオブジェクトが移動可能であることを示すカーソル（四方矢印）を表示します。
e-resizeボックスの端を右（東/east）方向へ移動できることを示すカーソルです。
ne-resizeボックスの端を右上（北東/north-east）方向へ移動できることを示すカーソルです。
nw-resizeボックスの端を左上（北西/north-west）方向へ移動できることを示すカーソルです。
n-resizeボックスの端を上（北/north）方向へ移動できることを示すカーソルです。
se-resizeボックスの端を右下（南東/south-east）方向へ移動できることを示すカーソルです。
sw-resizeボックスの端を左下（南西/south-west）方向へ移動できることを示すカーソルです。
s-resizeボックスの端を下（南/south）方向へ移動できることを示すカーソルです。
w-resizeボックスの端を左（西/west）方向へ移動できることを示すカーソルです。
textテキスト選択用の「I」バー（Iビーム）を表示します。
wait砂時計（処理中であることを示すカーソル）を表示します。
help疑問符またはバルーン型のカーソルを表示します。ヘルプボタンの上などに使用するのに適しています。
<url>カスタムカーソル画像ファイルのURLを指定できます。独自の画像をカーソルとして表示したい場合に使用します。

cursorプロパティの基本的な使い方

cursorプロパティは、次のようにCSSで指定します。

a {
  cursor: pointer; /* リンクに指差しカーソルを表示 */
}

.loading-area {
  cursor: wait; /* 処理中エリアに砂時計を表示 */
}

特にbutton要素など、見た目上クリック可能に見えない要素に対してcursor: pointer;を設定することで、ユーザーに操作可能であることを視覚的に伝えられます。また、<url>を使えばオリジナルのカーソル画像も指定できるため、サイトのデザインに合わせた演出も可能です。

  1. CSSのoutline-widthプロパティとは？使い方を実例付きで解説

    outline-widthプロパティは、要素のボーダー（境界線）の外側に、指定した太さの輪郭線（アウトライン）を描くために使用します。borderプロパティと似ていますが、アウトラインは要素の寸法（幅・高さ）に含まれないという点が大きな違いです。そのため、レイアウトに影響を与えずに要素を強調したい場合に便利です。 構文（シンタックス） CSSのoutline-widthプロパティの基本構文は以下の通りです。 セレクタ {     outline-width: /*値*/ } ポイント： outline-widthを使用する前に、必ずoutline-sty

  2. CSSのborder-colorプロパティの使い方を徹底解説

    CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &