HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


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

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 標準のカーソル default
crosshair 十字 crosshair
pointer ポインタ pointer
move 移動 move
text 入力中 text
wait 動作待ち wait
help ヘルプ help
n-resize 上方向にサイズ変更 n-resize
s-resize 下方向にサイズ変更 s-resize
w-resize 左方向にサイズ変更 w-resize
e-resize 右方向にサイズ変更 e-resize
nw-resize 左上方向にサイズ変更 nw-resize
ne-resize 右上方向にサイズ変更 ne-resize
sw-resize 左下方向にサイズ変更 sw-resize
se-resize 右下方向にサイズ変更 se-resize

IE独自のカーソル

また、以下の表はInternetExplorer6.0限定のカーソルです。IEの6.0以外のバージョン、または他のブラウザには対応していません。

カーソル形状 ポインタ例
hand 手の形 hand
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; }

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