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

CSSのcursorプロパティとは？使い方とカーソルの種類をサンプルコード付きで解説

CSSのcursorプロパティを使うと、要素の上にマウスオーバーした際に表示されるカーソルの形状を自由に変更できます。十字カーソルやプラス記号、リンク用のポインターなど、さまざまなカーソルを指定できるため、Webページのユーザビリティ向上に役立ちます。

実装例

以下のコードを実行すると、各div要素にマウスを合わせたときに、それぞれ異なるカーソルが表示されます。実際にブラウザで動かして、cursorプロパティの挙動を確認してみましょう。

<html>
   <head>
   </head>
   <body>
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>

cursorプロパティで指定できる主な値

上記のサンプルコードで使用した各値の意味は、以下の表のとおりです。用途に応じて適切な値を選択しましょう。

値説明
autoカーソルの形状は、その要素の種類（コンテキスト）に応じて自動的に決まります。例えば、テキストの上では「I」ビーム、リンクの上では「手」の形になります。
crosshair十字（クロスヘア）またはプラス記号のカーソルを表示します。
default標準の矢印カーソルを表示します。
pointerリンクを示す指差しの手の形のカーソルです（IE 4では「hand」という値を使用します）。
move要素が移動可能であることを示すカーソルです。
e-resizeボックスの端を右（東）方向へ移動できることを示すカーソルです。
ne-resizeボックスの端を右上（北東）方向へ移動できることを示すカーソルです。
nw-resizeボックスの端を左上（北西）方向へ移動できることを示すカーソルです。
n-resizeボックスの端を上（北）方向へ移動できることを示すカーソルです。
se-resizeボックスの端を右下（南東）方向へ移動できることを示すカーソルです。
sw-resizeボックスの端を左下（南西）方向へ移動できることを示すカーソルです。
s-resizeボックスの端を下（南）方向へ移動できることを示すカーソルです。
w-resizeボックスの端を左（西）方向へ移動できることを示すカーソルです。
textテキスト選択用の「I」ビーム（縦棒）カーソルです。
wait処理中であることを示す砂時計（または読み込み中）のカーソルです。
help疑問符やバルーン型のカーソルです。ヘルプボタンの上での使用に最適です。
<url>カーソル画像ファイルのURLを指定できます。独自の画像をカーソルとして表示したい場合に使用します。

このように、cursorプロパティを活用することで、要素の役割や操作内容に合わせた直感的なカーソル表示が可能になります。特にリンクやボタンには「pointer」を、テキスト入力欄には「text」を指定するなど、ユーザーが迷わないインターフェース設計を心がけましょう。

  1. CSSのisolationプロパティとは？使い方とスタッキングコンテキストの分離方法

    CSSのisolationプロパティは、要素が新しいスタッキングコンテキスト（stacking context）を作成する必要があるかどうかを定義するためのプロパティです。特にmix-blend-modeなどを使ったブレンドモードの適用範囲を制御したい場合に活用できます。構文isolation: auto | isolate | initial | inherit;各値の意味auto：デフォルト値です。通常、新しいスタッキングコンテキストは作成されません。isolate：要素に対して強制的に新しいスタッキングコンテキストを作成します。ブレンドモードの影響範囲をこの要素内に限定できます。init

  2. CSSのfont-variantプロパティとは？基本構文と実装例をわかりやすく解説

    CSSのfont-variantプロパティは、テキストの字形（グリフ）の表示方法を制御するためのショートハンド（一括指定）プロパティです。このプロパティを使うことで、スモールキャップス（小型大文字）などの特殊な文字スタイルを簡単に適用できます。font-variantがまとめて指定できる個別プロパティfont-variantは、以下の5つの個別プロパティの一括指定として機能します。font-variant-caps：大文字・小文字の字形を制御font-variant-numeric：数字の字形（タブular数値や分数など）を制御font-variant-alternates：代替グリフの使用を