https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

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

{cursor:カーソルの種類;}でページ内の 文字やリンク文字にマウスを乗せた時のカーソルの形を変えることができます。

■ カーソルの種類

マウスカーソルの種類には以下のようなものがあります。 表の右側のテキストにマウスをポイントするとマウスカーソルの形が変わります。

【ブラウザ表示】

カーソルの種類意味/ブラウザ表示
auto
自動選択
default
標準のカーソル
pointer
リンク
crosshair
十字
move
移動
text
テキスト
wait
処理中
help
ヘルプ
n-resize
リサイズ(上)
s-resize
リサイズ(下)
e-resize
リサイズ(右)
w-resize
リサイズ(左)
ne-resize
リサイズ(右上)
se-resize
リサイズ(右下)
nw-resize
リサイズ(左上)
sw-resize
リサイズ(左下)

ソース

<div class="mouse1">リンク</div>
<div class="mouse2">十字</div>
<div class="mouse3">移動</div>
<div class="mouse4">テキスト</div>
<div class="mouse5">処理中</div>
<div class="mouse6">ヘルプ</div>
<div class="mouse7">リサイズ(上)</div>
<div class="mouse8">リサイズ(下)</div>
<div class="mouse9">リサイズ(右)</div>
<div class="mouse10">リサイズ(左)</div>
<div class="mouse11">リサイズ(右上)</div>
<div class="mouse12">リサイズ(右下)</div>
<div class="mouse13">リサイズ(左上)</div>
<div class="mouse14">リサイズ(左下)</div>

外部ファイル

div.mouse1{cursor:pointer;}
div.mouse2{cursor:crosshair;}
div.mouse3{cursor:move;}
div.mouse4{cursor:text;}
div.mouse5{cursor:wait;}
div.mouse6{cursor:help;}
div.mouse7{cursor:n-resize;}
div.mouse8{cursor:s-resize;}
div.mouse9{cursor:e-resize;}
div.mouse10{cursor:w-resize;}
div.mouse11{cursor:ne-resize;}
div.mouse12{cursor:se-resize;}
div.mouse13{cursor:nw-resize;}
div.mouse14{cursor:sw-resize;}


<body>~</body>に直接記入する場合

<div style="cursor:pointer;">リンク</div>
<div style="cursor:crosshair;">十字</div>
<div style="cursor:move;">移動</div>
<div style="cursor:text;">テキスト</div>
<div style="cursor:wait;">処理中</div>
<div style="cursor:help;">ヘルプ</div>
<div style="cursor:n-resize;">リサイズ(上)</div>
<div style="cursor:s-resize;">リサイズ(下)</div>
<div style="cursor:e-resize;">リサイズ(右)</div>
<div style="cursor:w-resize;">リサイズ(左)</div>
<div style="cursor:ne-resize;">リサイズ(右上)</div>
<div style="cursor:se-resize;">リサイズ(右下)</div>
<div style="cursor:nw-resize;">リサイズ(左上)</div>
<div style="cursor:sw-resize;">リサイズ(左下)</div>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

ページに背景色や壁紙を指定する
背景画像を固定する
背景画像の表示方法を指定する
背景画像の表示位置を指定する
ページ内の余白を指定する
スクロールバーの色を指定する

スタイルシート一覧のページに戻る