マウスカーソルの形状を変える

cursor

CSSの書き方

cursor:値 ;

CSSの詳細情報
プロパティ名 cursor 読み方 カーソル
初期値 auto 意味 マウスカーソルの形状を変える
auto/default/crroshair…etc(表を参照)
対象 すべての要素
CSSレベル CSSレベル2 対応ブラウザ Windows MAC
継承 する IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

「cursor」プロパティは、ページ上で表示されるマウスポインタ(カーソル)の種類を変えることができるスタイルシートです。

通常、マウスカーソルは矢印で表示されますが、リンクの上にきたときや入力中のはそれぞれ異なる種類のカーソルが表示されるはずです。

これらカーソルの種類を要素ごとに変えることができます。

「cursor」プロパティで指定できるカーソルの種類に割り当てられた値は、以下の表のようになっています。

以下はWindows系のOSのポインタの一例です。

OSやブラウザによって表示されるカーソルの形状は異なります。

カーソル形状 ポインタ例
auto WEBブラウザに依存 auto
default 標準のカーソル auto
crosshair 十字 crosshair
pointer ポインタ pointer
move 移動 move
text 入力中 text
wait 動作待ち wait
help ヘルプ help
n-resize 上方向にサイズ変更 n-resize
s-resize 下方向にサイズ変更 n-resize
w-resize 左方向にサイズ変更 w-resize
e-resize 右方向にサイズ変更 w-resize
nw-resize 左上方向にサイズ変更 nw-resize
ne-resize 右上方向にサイズ変更 ne-resize
sw-resize 左下方向にサイズ変更 ne-resize
se-resize 右下方向にサイズ変更 nw-resize

IE独自のカーソル

また、以下の表はInternetExplorer6.0限定のカーソルです。

IEの6.0以外のバージョン、または他のブラウザには対応していません。

カーソル形状 ポインタ例
hand 手の形 pointer
no-drop クリック禁止 no-drop
all-scroll 全方向でスクロール可能 all-scroll
col-resize 列幅のサイズ変更 col-resize
row-resize 行の高さのサイズ変更 row-resize
progress 動作中 progress
not-allowed 禁止 not-allowed
vertical-text 縦書きテキストの入力中 vertical-text

CSS/HTMLサンプル

p { cursor:crosshair; width:400px; background-color:#ffdff9; }

マウスポインタが段落要素の上にきたときカーソル形状を十字に サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!