hover と focus — 「押せそう」を伝える状態のスタイル

CSSには、要素の状態に応じてスタイルを当てる書き方があります。コロンで始まるので擬似クラスと呼ばれます。最初に覚えるのは3つです。

3つの状態

書き方

.btn {
  background: #0f6fd1;
}

.btn:hover {
  background: #0b5aad;
}

セレクタの後ろにコロンと状態名を付けるだけです。中に書くCSSはふつうと同じです。

リンクやボタンをキーボードのTabキーで選ぶと、青い枠が表示されます。これがフォーカスの表示です。見た目が気に入らないからと outline: none で消してしまう例をよく見かけますが、これは危険です。

マウスが使えない人や、キーボードのほうが速い人は、この枠だけを頼りに操作しています。消すと、いまどこにいるのか分からなくなります。目を閉じてマウスカーソルを消されるのと同じ状態です。

デザインに合わないなら、消すのではなく自分の見た目に変えてください。

消すのではなく、作り変える

/* やってはいけない */
.btn:focus { outline: none; }

/* こうする */
.btn:focus-visible {
  outline: 3px solid #ffc531;
  outline-offset: 2px;
}

:focus-visible を使うと、キーボード操作のときだけ表示され、マウスクリック時には出ません。見た目と使いやすさを両立できます。

CODETabキーで移動してみるコードを書き換えると、すぐ下で動きます

プレビューの中をクリックしてから Tab キーを押すと、ボタンに黄色い枠が付きます。outline の色や太さを変えてみてください。

指で操作する端末には「乗せる」動作がありません。hover でしか出ない情報を作ると、スマホの人には一生見えないことになります。ドロップダウンメニューを hover だけで開く作りは、この理由で避けられます。

hover は「補助的な演出」と考えてください。無くても使えるように作り、あると分かりやすい、くらいがちょうどいいバランスです。

text-decoration: none で下線を消せますが、文章の中のリンクからは消さないほうが安全です。色だけで区別すると、色の見え方が違う人には見分けられません。ナビゲーションのように「明らかにリンクだと分かる場所」なら消して構いません。

button 要素は初期状態で矢印カーソルのままなので、cursor: pointer を指定して指の形にすると「押せる」ことが伝わります。逆に、押せないものに pointer を付けるのは混乱のもとです。