CSS ・ その他
cursor
カーソルの形
要素の上にマウスポインタが乗ったときの、カーソルの形を指定します。クリックできることや操作できないことを示せます。
01
サンプルコード
HTML
1<div class="row">
2 <div class="box pointer">pointer</div>
3 <div class="box help">help</div>
4 <div class="box not-allowed">not-allowed</div>
5 <div class="box grab">grab</div>
6</div>
CSS
1.row {
2 display: flex;
3 gap: 10px;
4}
5.box {
6 padding: 14px 16px;
7 border: 1px solid #b68235;
8 font-size: 13px;
9}
10.pointer {
11 cursor: pointer;
12}
13.help {
14 cursor: help;
15}
16.not-allowed {
17 cursor: not-allowed;
18}
19.grab {
20 cursor: grab;
21}
02
実行結果
ブラウザでの表示それぞれの箱にマウスを乗せると、カーソルの形が変わります
03
解説
cursor は、マウスポインタの形を変えるプロパティです。操作の種類が見た目で伝わるようになります。
リンクは自動で指の形（pointer）になりますが、button や summary などは既定では矢印のままです。クリックできることを示したいときに cursor: pointer を指定します。
押せない状態のボタンには not-allowed を指定すると、操作できないことが伝わります。
04
応用例・注意点
よく使う値
| 値 | 説明 |
|---|---|
auto | ブラウザが自動で決める（初期値） |
pointer | 指の形（クリックできる） |
text | 文字入力の形 |
not-allowed | 禁止マーク（操作できない） |
grab / grabbing | つかむ形（ドラッグできる） |
help | ヘルプ（補足情報がある） |
無効なボタンのカーソル
disabled 属性のボタンだけカーソルを変えます。
CSS
1button {
2 cursor: pointer;
3}
4button:disabled {
5 cursor: not-allowed;
6 opacity: .5;
7}
注意点
- 01クリックできない要素に pointer を指定すると、利用者を混乱させます。
- 02タッチ操作の端末ではカーソルが表示されないため、カーソルだけで情報を伝えないようにします。