CSS 参考マニュアル

CSS @ルール(RULES)

CSS 属性全書

CSS cursor 属性の使用方法と例

cursor CSS属性は、指が要素に配置されたときに表示されるカーソルの種類を指定します。

以下の表は、この属性の使用方法とバージョン履歴、およびjavascriptスクリプトでの属性の使用文法を示しています。

デフォルト値：	auto
適用：	すべての要素
継承：	はい
アニメーション可能：	いいえ。参照してください。アニメーション属性。
バージョン：	CSS 2、3
JavaScript 文法：	object.style.cursor="context-menu"

cursorの使用法

この属性の構文は以下の通りです：

cursor: [url(cursorファイルのアドレス),] 0回以上 | auto | default | none |
　　　　　　　　context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text |
　　　　　　　　alias | copy | move | no-drop | not-allowed | grab | grabbing |　
　　　　　　　　e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize |
　　　　　　　　ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize |
　　　　　　　　all-scroll | zoom-in | zoom-out | initial | inherit

以下の例では、cursor属性の使用方法を示しています。

例

　　h1　{
　　　cursor: copy;
　　}
　　p {
　　　cursor: help;
　　}
　　a {
　　　cursor: url("custom.gif"), url("custom.cur"), default;
　　}

試してみてください‹/›

cursor属性は、カンマで区切られたユーザー定義の光標値のリストを指定し、その後に「一般的な光標」を追加して使用されます。つまり、最初の光標が指定が不正確かまたは見つからない場合、カンマで区切られたリストの次の光標を使用し、これを繰り返して、利用可能な光標が見つかるまで続けます。

ユーザー定義の光標が有効でないか、ブラウザによってサポートされていない場合、リストの最後に表示される一般的な光標を使用します。もっと学びましょう。

属性値

以下のテーブルは、この属性の値を説明しています。

値	見てください	説明
一般的な
auto		ブラウザが現在のコンテキストに基づいて表示する光標を決定します。例えば、テキスト上にテキストをhoverします。これはデフォルトの値です。
default		プラットフォームのデフォルトの光標で、コンテキストに関係なく、通常矢印です。
none		光標が表示されません。
initial		この属性をデフォルト値に設定します。
inherit		指定された場合、関連要素は親要素のcursor属性値を使用します。
指定された場合、関連要素は親要素のcursor属性値を使用します。
context-menu		コンテキストメニューが利用可能であることを示します。
help		役に立てることを示します。
pointer		リンクを示すカーソル、通常は指を突き出した手です。
progress		進捗指示器。プログラムが処理を行っているが、ユーザーはインターフェースと対話できる（waitとは異なる）。
wait		プログラムが忙しいことを示し、ユーザーは待つべきです。
選択カーソル
cell		セル（またはセルグループ）を選択できることを示します。
crosshair		シンプルな十字線。通常、ビットマップ内の選択に使用されます。
text		選択可能なテキスト、通常は工字梁を示します。
vertical-text		水平のテキスト、つまり水平の工字梁を選択できることを示します。
ドラッグ＆ドロップカーソル
alias		別名やショートカットを作成するために使用されることを示します。
copy		何かをコピーできることを示します。
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		何かを縮小できることを示します。
grab		何かを引っ張って移動できることを示します。
grabbing		何かを握っていることを示します。

ブラウザの互換性

cursor属性のブラウザの互換性について、以下の表の数字はこの属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1.2+ Opera 7+

さらに詳しくはこちらで読む

以下のチュートリアルを参照してください：CSSカーソル。

CSS direction 属性 CSS counter-reset 属性