CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ－疑似クラス :focus

疑似クラス :focus を“直感的に理解する”
:focus の基本文法を理解する
1. CSS の基本形
2. 深掘り：:focus は「キーボード操作の命綱」
:focus を使った UI の基本パターン
:focus の重要ポイント（深掘り）
例題で理解を深める
1. 例題：ログインフォームのフォーカスデザイン
まとめ：:focus を使いこなすコツ

疑似クラス :focus を“直感的に理解する”

:focus は、フォーム入力やボタン操作など ユーザーが「今まさに触っている要素」 を示す疑似クラスです。
特にアクセシビリティ（キーボード操作のしやすさ）に深く関わるため、
Webデザイナーとしてもフロントエンドエンジニアとしても必ず押さえておきたいポイントです。

ここでは、初心者でも迷わないように、CSS と Tailwind CSS の両方で丁寧に解説します。

:focus の基本文法を理解する

CSS の基本形

input {
  border: 1px solid #ccc;
  padding: 8px;
}

input:focus {
  border-color: #3182ce;
  outline: none;
}

input {
  border: 1px solid #ccc;
  padding: 8px;
}

input:focus {
  border-color: #3182ce;
  outline: none;
}

CSS

HTML

<input type="text" placeholder="名前を入力">

<input type="text" placeholder="名前を入力">

HTML

フォーカス（クリック or Tabキーで選択）すると、枠線が青く変わります。

深掘り：:focus は「キーボード操作の命綱」

マウス操作 → :hover
キーボード操作 → :focus

キーボードで Tab を押して移動すると、
どの要素が選択されているかを視覚的に示す必要があります。

これがないと、キーボード操作がほぼ不可能になります。

Tailwind では focus: プレフィックスで指定します。

<input
  class="border border-gray-300 p-2 focus:border-blue-500 focus:outline-none"
  placeholder="名前を入力"
/>

<input
  class="border border-gray-300 p-2 focus:border-blue-500 focus:outline-none"
  placeholder="名前を入力"
/>

HTML

:focus を使った UI の基本パターン

入力欄のフォーカス時に枠線を強調する

CSS版

.input {
  border: 1px solid #ccc;
  padding: 10px;
}

.input:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74,144,226,0.3);
  outline: none;
}

.input {
  border: 1px solid #ccc;
  padding: 10px;
}

.input:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74,144,226,0.3);
  outline: none;
}

CSS

Tailwind版

<input
  class="border border-gray-300 p-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-300 focus:outline-none"
  placeholder="メールアドレス"
/>

<input
  class="border border-gray-300 p-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-300 focus:outline-none"
  placeholder="メールアドレス"
/>

HTML

Tailwind の focus:ring-* は、CSS の box-shadow を簡単に表現できる便利なユーティリティです。

ボタンのフォーカスを視覚化する

CSS版

.button {
  background: #38a169;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
}

.button:focus {
  outline: 3px solid rgba(56,161,105,0.4);
}

.button {
  background: #38a169;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
}

.button:focus {
  outline: 3px solid rgba(56,161,105,0.4);
}

CSS

Tailwind版

<button class="bg-green-500 text-white px-4 py-2 rounded focus:outline-green-300 focus:outline focus:outline-2">
  決定
</button>

<button class="bg-green-500 text-white px-4 py-2 rounded focus:outline-green-300 focus:outline focus:outline-2">
  決定
</button>

HTML

リンクのフォーカスを分かりやすくする

CSS版

a:focus {
  outline: 2px solid #3182ce;
}

a:focus {
  outline: 2px solid #3182ce;
}

CSS

Tailwind版

<a class="focus:outline focus:outline-blue-500">
  詳しく見る
</a>

<a class="focus:outline focus:outline-blue-500">
  詳しく見る
</a>

HTML

:focus の重要ポイント（深掘り）

1. outline: none; は慎重に使う

多くの初心者がやりがちな NG 例です。

*:focus {
  outline: none;
}

*:focus {
  outline: none;
}

CSS

これは アクセシビリティを完全に破壊します。

フォーカスが見えなくなると、
キーボード操作のユーザーは「今どこにいるのか」分からなくなります。

outline を消すなら、必ず代わりの視覚効果を付けること。

Tailwind でも同じです。

2. focus-visible を使うとより自然な挙動に

focus-visible は「キーボード操作のときだけフォーカスを表示する」疑似クラスです。

CSS版

button:focus-visible {
  outline: 3px solid #3182ce;
}

button:focus-visible {
  outline: 3px solid #3182ce;
}

CSS

Tailwind版

<button class="focus-visible:outline focus-visible:outline-blue-500">
  送信
</button>

<button class="focus-visible:outline focus-visible:outline-blue-500">
  送信
</button>

HTML

マウス操作ではフォーカス枠が出ず、
キーボード操作ではしっかり表示されるため、より自然な UI になります。

3. フォーム UI は hover より focus の方が重要

フォーム入力は「触る」より「選択する」操作が中心なので、
:hover より :focus の方がユーザー体験に直結します。

入力欄のフォーカス強調
ボタンのフォーカスリング
エラー時のフォーカス誘導

これらはすべて :focus が関わります。

例題で理解を深める

例題：ログインフォームのフォーカスデザイン

CSS版

.input {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 6px;
  transition: border 0.2s, box-shadow 0.2s;
}

.input:focus {
  border-color: #3182ce;
  box-shadow: 0 0 0 3px rgba(49,130,206,0.3);
  outline: none;
}

.button {
  background: #3182ce;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
}

.button:focus {
  outline: 3px solid rgba(49,130,206,0.4);
}

.input {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 6px;
  transition: border 0.2s, box-shadow 0.2s;
}

.input:focus {
  border-color: #3182ce;
  box-shadow: 0 0 0 3px rgba(49,130,206,0.3);
  outline: none;
}

.button {
  background: #3182ce;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
}

.button:focus {
  outline: 3px solid rgba(49,130,206,0.4);
}

CSS

HTML

<input class="input" placeholder="メールアドレス">
<input class="input" placeholder="パスワード">
<button class="button">ログイン</button>

<input class="input" placeholder="メールアドレス">
<input class="input" placeholder="パスワード">
<button class="button">ログイン</button>

HTML

Tailwind版

<input
  class="border border-gray-300 p-2 rounded transition focus:border-blue-500 focus:ring-2 focus:ring-blue-300 focus:outline-none"
  placeholder="メールアドレス"
/>

<input
  class="border border-gray-300 p-2 rounded transition focus:border-blue-500 focus:ring-2 focus:ring-blue-300 focus:outline-none"
  placeholder="パスワード"
/>

<button
  class="bg-blue-500 text-white px-4 py-2 rounded focus:outline focus:outline-blue-300 focus:outline-2"
>
  ログイン
</button>

<input
  class="border border-gray-300 p-2 rounded transition focus:border-blue-500 focus:ring-2 focus:ring-blue-300 focus:outline-none"
  placeholder="メールアドレス"
/>

<input
  class="border border-gray-300 p-2 rounded transition focus:border-blue-500 focus:ring-2 focus:ring-blue-300 focus:outline-none"
  placeholder="パスワード"
/>

<button
  class="bg-blue-500 text-white px-4 py-2 rounded focus:outline focus:outline-blue-300 focus:outline-2"
>
  ログイン
</button>