《 10:57 公開/更新》
リンクのような「押せる場所」では、マウスポインタ（カーソル）の形状は「指さす手」の形に変化するのが一般的です。なので、押せる場所ならリンク以外でもマウスポインタを「指さす手」の形状に変えると分かりやすくなるでしょう。ボタンの上にマウスが載った際にも、リンクと同じように「指さす手」の形にマウスポインタを変えると、より分かりやすくなって望ましいかもしれません。そこで、マウスポインタの形状を自由に変更するCSSの書き方を紹介します。
ウェブページ上で、リンクになっていて押せる場所では、マウスポインタ（カーソル）の形状が「人差し指を上に伸ばした『指さす手』」の形になるのが一般的です（※下図左端の青矢印の先を参照）。なので、押せる場所ではマウスポインタを「指さす手」の形状に変えると分かりやすくなります。リンクと同様に押せるUIとして「ボタン」がありますが、ボタンの上にマウスを載せてもデフォルトの形状のままなのが一般的です（※下図中央の紫矢印の先を参照）。デフォルトでそのようになっているのですから、ウェブ上の慣習に合わせてそのままでも良いかもしれません。しかし、リンクと同様にマウスポインタが「指さす手」の形に変化すれば、確実に「押せる」ことが伝えられるため、分かりやすさは増すでしょう（※下図右端の赤矢印の先を参照）。
上図の中央や右端のように、UIが明らかなボタン形状ならマウスポインタはデフォルトのままでも問題はないかもしれません。しかし、ボタンを（一般的なボタンUIの見た目からは大きく離れて）独自に装飾している場合には、見ただけでは押せるのかどうかがハッキリとは分からない可能性があります。その際には、リンクと同じようにマウスポインタを「指さす手」に変えて、「ここは押せますよ」と明確に分かるようにしておく方が望ましいでしょう。
※もちろん、ユーザビリティ的には「いちいちマウスを載せなくても見ただけで押せそうだと分かる」方が望ましいですが。常にそういった確実なデザインができるとは限らないので、念には念を入れてマウスポインタの形状でも配慮しておくと、分かりやすさと使いやすさが増すでしょう。
上図左側は、ボタンに対するマウスポインタとしては一般的な形ですが、閲覧者がこれを「ボタンだ」と明確に認識できていない場合には押せるのかどうかがハッキリしません。上図右側のように、マウスポインタをリンクと同じように変化させておけば、押せることを明示できます。
下記に掲載した2つのボタンそれぞれの上にマウスポインタを載せてみて下さい。左側のボタンはデフォルトの形状（たいていは矢印）のままですが、右側のボタンではリンクの上に載せた場合と同じ「指さす手」の形状になります。
※上記のボタンはinput要素を使って作成しており、特別な装飾はしていません。そのため、ボタンの見た目はブラウザに依存します。
下記に掲載した2つのボタンそれぞれの上にもマウスポインタを載せてみて下さい。先程と同様に、左側のボタンはデフォルトの形状（たいていは矢印）のままですが、右側のボタンではリンクの上に載せた場合と同じ「指さす手」の形状になります。
ここまでボタンのデザインを変更している場合には、右側の例のように「押せる」と明確に分かるような形状に変化させる方が分かりやすさが増すでしょう。
マウスポインタの形状(カーソル)を変更するには、CSSのcursorプロパティを使います。具体的な活用ソースを紹介する前に、まずはcursorプロパティの書き方を簡単に紹介しておきます。
リンクの上にマウスが載った際のように、手の形（＝人差し指を伸ばした指さす手）に変化させるには、下記のようにcursorプロパティに値「pointer」を指定します。
cursor: pointer;
※上記の枠内にマウスを入れると、その形に変化します。しかし特にクリックできるわけではありません。このように、対象の要素がクリック可能かどうかに関係なく、マウスポインタの形状を自由に変化させられます。（もちろん、紛らわしいだけなので、普段はそのような装飾はしない方が良いでしょう。）
cursorプロパティの値には、標準値を示しそうな感じの値として「default」と「auto」の2つがあります。これらは役割が異なりますので注意して下さい。状況に応じて自動でマウスポインタの形状を変化させたい場合には、autoを指定する必要があります。defaultではなく。
cursor: default; /* 常にデフォルト形状になる */
cursor: auto; /* 状況に合わせた形状に変化 */
したがって、もしリンクに対してcursor: default;を指定してしまうと、リンクの上にマウスを載せても、まるで押せないかのようなイメージを与えてしまいます。（下記のサンプルにマウスを載せて試してみて下さい。）
a要素に対してCSSでcursor:auto;を指定すれば、リンクに対する「指さす手」の形状であるcursor:pointer;を指定したときのような表示になると期待できる（と私は思う）のですが、ChromeやFirefoxで確認すると（ノーマルなテキストの上にマウスを載せたときと同じ）cursor:text;と同じ形状になってしまいました。しかし、IE11やEdge(44)では（リンクの上にマウスを載せたときに通常そうなるように）cursor:pointer;と同じ形状になりました。
なぜブラウザによってこうなるのかは分かりませんが。「cursorプロパティを使って変化させていた形状を、後からcursor:auto;を指定することで元に戻そうとする」のは避け、最初から必要最小限の指定に留めておく方が良さそうです。
ちなみに、「押せない」ことを明示するためにマウスポインタの形状を禁止マークにすることもできます。無効に設定したボタンなどでこのように変化させると分かりやすいでしょう。
cursor: not-allowed;
下記は、disabled属性を使って無効に設定したボタンです（押しても押し下がりません）。左側はcursorプロパティを特に使っていない表示例で、右側はcursorプロパティに値「not-allowed」を指定した表示例です。
右側のボタンにマウスを載せたときの方が、「押せない」ことが明確に伝わるでしょう。
冒頭のサンプルのように、（初期のボタンUIとは大きく異なる感じに）全体を装飾したボタンを作って、マウスが載った際のポインタ形状を「指さす手」に変えるソース例をご紹介しておきます。
ボタンを作るだけなので、HTMLソースはとても短い1行で済みます。input要素のtype属性に値「button」を指定するだけです。（送信ボタンの場合は属性値を「submit」にしますが、装飾方法は同じです。）
HTMLソース
<input type="button" value="装飾ボタンの例" class="decoButton">
上記のHTMLソースでは、CSSで装飾するためにdecoButtonというclass名を付加しています。
次に、このclassに対してCSSで装飾を加えます。
CSSソース（基本）
.decoButton {
background-color: #0b0; /* ボタンの表面色 */
color: white; /* ボタンの文字色 */
font-size: 1em; /* ボタンの文字サイズ */
border: 1px solid green; /* ボタンの枠線 */
border-radius: 9px; /* 枠線の角丸半径 */
padding: 0.25em 0.75em; /* ボタン内側の余白量 */
cursor: pointer; /* マウスポインタの形状 */
}
2～7行目では、主に配色・文字サイズ・枠線・余白量を指定しています。
8行目が、マウスが載った際にマウスポインタ(カーソル)の形状を「指さす手」に変える記述です。
ボタンを独自に装飾すると、ユーザがマウスの右ボタンを押した際に本来なら見えるハズの「押し下げたとき」の状態が視覚的に分からなくなります。なので、以下のCSSも加えて「ボタンの上にマウスが載ったときの配色」を変化させておくと、分かりやすさを維持できるでしょう。
CSSソース（追加）
.decoButton:hover {
background-color: #5c5; /* ボタンの表面色をちょっと明るく */
border-color: #3a3; /* 枠線の色もちょっと明るく */
}
※本当に押した瞬間の装飾を指定したいなら、:hover疑似クラスよりも:active疑似クラスを使った方がそれっぽく見えますが、:activeの場合は押すまで何も変化しないので、この場合は:hoverを使う方が分かりやすいと思います(後述)。
ソースは以上です。
上記のHTML＋CSSを実際に表示させると、以下のように見えます。
ボタンの上にマウスを載せると、マウスポインタの形状が「指さす手」に変わります。
以上、ボタンの上にマウスポインタが載ったらリンクと同じように「指さす手」の形に変化させる方法でした。
ぜひ、使ってみて下さい。
なお、ボタンをもっとボタンっぽく見えるように、ボタン表面をグラデーションで描く方法については別途記事「テキストリンクを表面がグラデーションのボタン形状に装飾する方法」もご参照下さい。また、ボタンを押した際に「押し下げたように見せる」配色の作り方は、記事「テキストリンクをボタンのように装飾するCSS」の後半をご参照下さい。
()
▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)
