ywork2020.com

Title

マウスポインターを設定する

目次 (INDEX)

cursorとは

ここで説明する cursor とは次の語句からなる CSS のプロパティです。
cursor
読み: カーソル
意味: 計算尺、測量器、文字の入力位置を示すポインタ

目次に戻る

cursorプロパティの概要

このプロパティは、マウスポインターが要素の上に重なっているときに表示されるマウスカーソルを設定することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{cursor: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

<body>
	<div> div要素 </div>
</body>

サンプルに使用する要素は div のみです。 マウスポインターが この要素の上にあるとき、表示されるマウスカーソルが変更されます。

目次に戻る

初期値: auto

初期値の auto は現在のコンテキストに基づき表示するカーソルをブラウザの決定により自動で選択します。

例えば、要素そのものではなく、要素のテキストにマウスポインターが乗ると text キーワードと同じカーソルに切り替わります。

div要素

div{
	cursor: auto;
}

目次に戻る

cursor キーワード 一覧

cursor プロパティに設定できるキーワードは非常に多いです。 一覧に まとめた方が分かりやすいと感じましたので、ここでは一気にサンプルを掲載します。

div 要素内にテキストで記載しているものがプロパティのキーワード ( keyword )になります。

div{
	cursor: keyword;
}
一般
auto
default
none



リンクと状態
context-menu
help
pointer
progress
wait



選択
cell
crosshair
text
vertical-text



ドラッグ & ドロップ
alias
copy
grab
grabbing
move
no-drop
not-allowed



サイズ変更 & スクロール
all-scroll
col-resize
row-resize
n-resize
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
ns-resize
nesw-resize
nwse-resize



拡大 & 縮小
zoom-in
zoom-out

目次に戻る

カスタム: カーソルに画像を使用する

url() 関数の引数に画像の URL を与えることで マウスポインターに画像を使用することができます。

ただし、url() 関数の記述の後に 「 , 」 カンマで区切って代替キーワードを指定しておく必要があります。 これは、画像が利用できない状況に代替として使用されるキーワード値です。

div要素

div{
	cursor: url(cursor-arrow.png), auto;
}

目次に戻る

グローバル値

cursor プロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inherit は親要素の値の継承を促します。
  • initial は値を初期値の auto に戻します。
  • unset は継承の初期値に戻します。
    ※このプロパティは親要素の値を継承するのが基本なので、inherit と同じ働きをします。
セレクター{cursor: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能
  • 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

cursor: auto;

cursor: pointer;

cursor: text;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る