KAKERU Designing トミー（末富将也）

キーボード操作の枠をCSSで整える｜:focus-visibleでクリックでは出さずTabでは出す

:focus-visible でTabキーのときだけボタンに枠を出した見本とコード

ボタンをクリックしたときに出る黒い枠が気になって、CSSで消してしまう。よく見かける書き方です。CSSの :focus-visible を使うと、マウスでクリックしたときは枠を出さず、キーボードで操作したときだけ枠を出せます。

使いどころは、サイトのボタン・リンク・入力欄のすべてです。枠を消したいと思ったら、outline: none で消すのではなく、:focus-visible で「出す場面」と「見た目」を整えます。枠そのものを無くすことはしません。

この記事の要点

  • :focus-visible で、Tab キーなどキーボードで来たときだけ、ボタンやリンクに枠を出せる
  • 使いどころは、ボタン・リンク・カード・入力欄のすべて。「枠を消して」と頼まれたら、消さずにこの指定で出す場面と見た目を整える
  • outline: none だけで消さない。枠の色は背景と3:1以上の差をつけ、太さは2〜3pxを目安にする
トミー

連載「WEBの技術」の57回目です。
今回は、キーボードで操作したときに出る「枠」です。見た目の話であり、使える人を減らさないための話でもあります。

完成見本：キーボード操作の枠を整える4種類

どの見本も、Tab キーを押して次のボタンへ移っていく様子を、自動でくり返し見せています。1は、左がマウスでクリックしたとき、右が Tab キーで来たときです。同じボタンでも、右だけに枠が出ます。

BUTTON1. キーボードで来たときだけ枠を出すボタン・リンクの基本に
TWO-TONE2. どんな背景でも見える2色の枠写真や濃い色の上にあるボタンに
CARD3. カード全体に枠を出す記事一覧・事例一覧のカードに
INPUT4. 入力欄の枠を消さずに整えるお問い合わせフォームに

※ 見本の動きは、Tab キーで移ったときの見た目を再現したものです。実際に試せる見本は、コードの節の最後にあります。見本は読み上げソフトでは読まれないようにしています。動きを減らす設定にしている方には、止まって見えます。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-fv は、サイトのほかのデザインと名前がぶつからないようにするための目印です。1と2は、同じボタンの見た目に枠の指定を足しています。

1. キーボードで来たときだけ枠を出す

:focus-visible は、ブラウザが「ここに枠を出したほうがいい」と判断したときだけ当てはまる指定です。Tab キーで来たときは枠が出て、マウスでクリックしたときは出ません。outline-offset で、枠をボタンから少し離しています。

HTML
<div class="kd-fv-group"><button class="kd-fv-btn " type="button">資料を見る</button><button class="kd-fv-btn " type="button">料金のめやす</button><button class="kd-fv-btn " type="button">お問い合わせ</button></div>
CSS
/* ボタンの見た目（1と2で共通） */
.kd-fv-btn {
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: #0284C7;
  color: #fff;
  font-weight: 700;
}

/* キーボードで来たときだけ枠を出す */
.kd-fv-btn:focus-visible {
  outline: 3px solid #0F172A;  /* 枠の太さ・線の種類・色 */
  outline-offset: 3px;         /* ボタンとのすき間 */
}

2. どんな背景でも見える2色の枠

外側を濃い色の outline、内側のすき間を白の box-shadow にして、枠を2色にします。白い背景では濃い線が、濃い背景では白い線が見えるので、ボタンがどこに置かれても枠が分かります。

HTML
<div class="kd-fv-group"><button class="kd-fv-btn kd-fv-2c" type="button">資料を見る</button><button class="kd-fv-btn kd-fv-2c" type="button">料金のめやす</button></div>
CSS
/* ボタンの見た目（1と2で共通） */
.kd-fv-btn {
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: #0284C7;
  color: #fff;
  font-weight: 700;
}

/* 外側は濃い色、内側のすき間は白 */
.kd-fv-2c:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;  /* すき間を白でうめる */
}

3. カード全体に枠を出す

カードの中のリンクに Tab キーで来たとき、リンクの文字ではなくカード全体に枠を出します。親を選べる :has() を使い、「中のリンクが :focus-visible のカード」に枠を付けています。:has() に対応していないブラウザでは、リンクのふつうの枠が残ります。

HTML
<div class="kd-fv-cards"><div class="kd-fv-card"><p class="kd-fv-ttl">施工事例</p><a href="#">事例を見る</a></div><div class="kd-fv-card"><p class="kd-fv-ttl">スタッフ紹介</p><a href="#">紹介を見る</a></div></div>
CSS
/* カード */
.kd-fv-card {
  position: relative;
  padding: 16px;
  border-radius: 12px;
  background: #F1F5F9;
}
.kd-fv-ttl {
  margin: 0 0 6px;
  font-weight: 700;
}
.kd-fv-card a {
  color: #0369A1;
  font-weight: 700;
}
.kd-fv-card a::after {
  content: "";
  position: absolute;
  inset: 0;  /* カードのどこを押してもリンクが開く */
}

/* 中のリンクにキーボードで来たら、カード全体に枠 */
.kd-fv-card:has(a:focus-visible) {
  outline: 3px solid #0284C7;
  outline-offset: 3px;
}
.kd-fv-card:has(a:focus-visible) a {
  outline: none;  /* 二重にならないよう、リンクの枠は消す */
}

4. 入力欄の枠を消さずに整える

入力欄は、マウスでクリックしたときも :focus-visible が当てはまります。文字を打つ場所がどこかを示す必要があるからです。ふちの色と枠を同じ色にそろえて、今どこに入力しているかをはっきり見せます。

HTML
<div class="kd-fv-form"><label>お名前<input class="kd-fv-input" type="text" name="name"></label><label>メールアドレス<input class="kd-fv-input" type="email" name="email"></label></div>
CSS
/* 入力欄 */
.kd-fv-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #64748B;
  border-radius: 8px;
  font-size: 16px;
}

/* 入力中の欄 */
.kd-fv-input:focus-visible {
  border-color: #0284C7;
  outline: 3px solid #0284C7;
  outline-offset: 1px;
}

ここからは、実際に操作して試せる見本です。パソコンなら、このあたりをクリックしてから Tab キーを何回か押してみてください。ボタン、カード、入力欄の順に枠が移ります。同じボタンをマウスでクリックしたときは、枠が出ません。

施工事例

事例を見る

スタッフ紹介

紹介を見る

サイト全体のボタンとリンクにまとめて付けるなら、a:focus-visible, button:focus-visible { outline: 3px solid #0F172A; outline-offset: 3px; } のように書きます。

仕組み：「:focus」と「:focus-visible」のちがい

フォーカスとは「今、操作の対象になっている場所」

ボタンやリンク、入力欄は、Tab キーを押すたびに順番に「操作の対象」が移ります。この状態をフォーカスと呼びます。フォーカスがあるボタンで Enter キーを押すと、そのボタンが押されます。キーボードで操作する人は、フォーカスの枠を見て、今どこにいるかを知ります。

:focus はいつでも、:focus-visible は必要なときだけ

:focus は、フォーカスがあれば必ず当てはまります。マウスでボタンをクリックしたときも、フォーカスはそのボタンに移るので、:focus で枠を付けるとクリックのたびに枠が出ます。「クリックすると枠が出て気になる」と感じる原因の多くは、これです。

:focus-visible は、フォーカスがあり、さらにブラウザが「枠を見せたほうがいい」と判断したときだけ当てはまります。MDNによると、マウスや指でクリックしたときは、どこを押したか本人が分かっているので枠を出さず、キーボードで移ったときは枠を出します。ブラウザの判断に任せられるのが、この指定の良いところです。

入力欄はクリックでも枠が出る

例外が入力欄です。文字を入力する欄は、マウスでクリックしたときも :focus-visible が当てはまります。文字を打つ場所がどこかを、いつでも示す必要があるからです。4の見本は、そのためにふちと枠の色をそろえて、きれいに見えるようにしています。

outline は場所を取らない

枠には border ではなく outline を使います。outline は、ボタンの外側に線を描くだけで、まわりの文字やボタンを押しのけません。border で枠を付けると、フォーカスが移るたびにボタンの大きさが変わり、まわりが動きます。outline-offset は、枠とボタンのあいだのすき間です。

数値を変えるとどうなるか

枠の太さとすき間

同じボタンで、枠の太さと、ボタンとのすき間だけを変えました。

1pxは、ボタンの色と重なって見落としやすくなります。6pxは目立ちますが、となりのボタンとの間が狭いと、枠どうしがぶつかります。KAKERUでは、3pxの太さに3pxのすき間を基本にしています。

枠の色

枠の色を変えました。かっこの中は、白い背景との色の差（コントラスト比）です。

MDNは、フォーカスの枠と背景の色の差を3:1以上にするよう書いています。KAKERUブルー（#0EA5E9）は白い背景では2.8:1で足りません。右の「すき間なしで同じ色」は、ボタンの色と枠の色が同じなので、ボタンが少し大きくなったようにしか見えません。枠はボタンと違う色にするか、すき間をあけます。

スマホと、見る人への配慮

スマホでは、ふだんは枠が出ない

MDNには、マウスや指で押したときは枠は要らない、と書かれています。スマホを指でタップして使う場面では、ふつうは枠が出ません。ただ、スマホやタブレットにキーボードをつないで操作する人もいます。「スマホでは見えないから要らない」ではなく、出たときにきれいに見えるようにしておきます。

outline: none だけで消さない

MDNは、ブラウザのふつうの枠を消すなら、代わりの分かりやすい枠を用意するよう書いています。*:focus { outline: none; } のような1行がテーマのCSSに入っていると、キーボードで操作する人は、今どこにいるのか分からなくなります。W3Cのアクセシビリティの基準（WCAG 2.4.7）でも、キーボードで操作できる画面では、今どこを操作しているかが見えることを求めています。

色を強制する設定でも枠が残るように

Windowsのコントラスト テーマのように、見る人が画面の色を強制する設定では、MDNによると box-shadow は消え、outline は残ります（色はブラウザが決めます）。2の見本は、白いすき間を box-shadow、外側の線を outline で描いているので、この設定でも外側の線は残ります。枠を box-shadow だけで描くと、この設定では枠が消えます。

枠がほかの部品に隠れないように

ページの上に固定したヘッダーや、下に固定したボタンがあると、Tab キーで移った先がその下に隠れることがあります。固定する部品を作ったときは、Tab キーでページの最後まで移ってみて、枠が隠れないかを確かめます。

やりすぎ注意

枠を光らせる、ふわっと広がるように動かす、といった飾りは、見た目は楽しくても、どこにいるかを伝えるという役目には足しになりません。動きを付けるなら、動きを減らす設定にしている人には止まるようにします。

AIに頼むなら

Claudeなどの生成AIに頼むときは、「消して」ではなく「出す場面を整えて」と伝え、色の差まで指定すると、手直しが減ります。

このサイト（CSSを貼る）のボタン・リンク・入力欄に、:focus-visible でフォーカスの枠を付けて。
枠は outline 3px、すき間3px、色は #0F172A。背景との差は3:1以上にして。
:focus で枠を消す指定や outline: none だけの指定があれば、外して代わりの枠にして。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • outline: none が残っていないか。「枠を消して」に近い頼み方をすると、枠を消すだけのコードが出ることがあります。代わりの枠があるかを見ます
  • Tab キーで最後まで移れるか。実際にページを開いて Tab キーを押し続け、すべてのボタンとリンクで枠が見えるか、順番がおかしくないかを確かめます
  • 濃い背景の上のボタンでも見えるか。ヘッダーやフッターなど、背景が暗い場所のボタンで、枠が背景に溶けていないかを見ます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • 「クリックすると枠が出て気になる」と言われたとき。:focus の枠を :focus-visible に置きかえます。クリックでは出なくなり、キーボードで操作する人の枠は残ります
  • サイトの色に合わせた枠にしたいとき。ブラウザのふつうの枠は、サイトによっては背景に溶けて見えにくいことがあります。サイトの濃い色で、太さとすき間をそろえます
  • カードが並ぶ一覧。カード全体を押せるようにしているなら、3の見本のようにカード全体に枠を出します。押せる範囲と枠の範囲がそろいます

使わない場面

  • outline: none だけで枠を消す。見た目のために、キーボードで操作する人がサイトを使えなくなります。KAKERUでは、頼まれてもこの形にはしません
  • 枠を box-shadow だけで描く。色を強制する設定で消えてしまいます。飾りとして足すのはよくても、本体は outline にします
  • 枠を光らせたり動かしたりする。目立たせるより、どこにいるかが分かることを優先します
トミー

KAKERUなら、サイト全体のボタンとリンクに :focus-visible の枠を最初に入れます。
「枠を消して」と言われたら、消すのではなく、クリックでは出ない形に整えて、そのわけを説明します。

まとめ

  • :focus-visible は、キーボードで来たときだけ枠を出せる。マウスのクリックでは出ない
  • 入力欄だけは、クリックでも枠が出る。ふちの色と枠をそろえる
  • 枠は outline で描く。3pxの太さに3pxのすき間が目安
  • 枠の色は背景と3:1以上の差。濃い背景には2色の枠
  • outline: none だけで消さない

まずは1のコードの :focus-visible を、サイトのボタンとリンクに付けて、Tab キーでページの最初から最後まで移ってみてください。

参考にした資料

いずれも2026年11月12日に確認しました。内容は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

マウスを乗せると動くボタンをCSSだけで コピペで使える5種類と、スマホ・キーボードへの配慮
関連記事マウスを乗せると動くボタンをCSSだけで｜コピペで使える5種類と、スマホ・キーボードへの配慮
:has()でできること。画像があるカード・チェックした項目・数で並びが変わるタグの見本とコード
関連記事:has() でできること｜親を選ぶCSSで、画像の有無・チェック・数に合わせて見た目を変える、コピペ4種類と使いどころ
動きが苦手な人への配慮をCSSで。ふつうの見え方と動きを減らす設定の見え方を並べた見本とコード
関連記事動きが苦手な人への配慮をCSSで（prefers-reduced-motion）｜止める・置きかえる・足す・JSで合わせる、書き方の型4つ

次に読む

無料の道具（登録なし）KAKERU TOOLS｜仕事の「ちょっと面倒」を、道具で減らす。WEB技術・次の回背景の写真をCSSで固定する｜background-attachment: fixedとiPhoneでも動くstickyWEB技術・前の回ど真ん中に置くCSS｜flex・grid・align-contentで縦も横も中央寄せ、コピペで使える4種類
:focus-visible でTabキーのときだけボタンに枠を出した見本とコード

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

25歳からWEBの世界に携わり、WEBデザインから始めて、今はWEBシステムまで一貫して制作しています。問題点を洗い出し、改善を提案する中で、WEB・グラフィック・動画・システムを縦断して提案するのが得意です。

NEW POSTこのライターの最新記事