cursor

CSSプロパティ「cursor」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

cursor

マウスカーソルの種類を指定するプロパティ。

cursorの値を指定することで、マウスカーソルを載せた際のカーソルの種類を選択することができる。

auto自動(ブラウザに依存する)
default標準カーソル
pointerリンク部と同様の「指マーク」
crosshair十字マーク
moveウインドウ移動時と同様の「十字矢印」
textテキスト選択字と同様の「Iマーク」
wait砂時計マーク
help矢印+?マーク
n-resize上下の矢印マーク
s-resize上下の矢印マーク
w-resize左右の矢印マーク
e-resize左右の矢印マーク
ne-resize右上/左下の矢印マーク
se-resize左上/右下の矢印マーク
nw-resize左上/右下の矢印マーク
sw-resize左上/右下の矢印マーク

使用例 - サンプル(A) / サンプル(B) / サンプル(C)

サンプル(A)

[CSSの記述]

.sampleA { cursor:pointer; }

[HTMLの記述]

<p class="sampleA">テキストテキストテキスト</p>

[ブラウザ上の表示]

マウスカーソルを乗せると「リンクマーク」に

サンプル(B)

[CSSの記述]

.sampleB { cursor:move; }

[HTMLの記述]

<p class="sampleB">テキストテキストテキスト</p>

[ブラウザ上の表示]

マウスカーソルを乗せると「移動マーク」に

サンプル(C)

[CSSの記述]

.sampleC { cursor:help; }

[HTMLの記述]

<p class="sampleC">テキストテキストテキスト</p>

[ブラウザ上の表示]

マウスカーソルを乗せると「ヘルプマーク」に