CSS Tips | 超実務コアCSSテクニック：UIパーツ － 入力フォームフォーカス装飾

Web APP CSS
スポンサーリンク

入力フォームのフォーカス装飾は「入力しやすさ」と「安心感」を作る UI の要

フォームはユーザーが“手を動かす場所”なので、 フォーカスした瞬間に 「ここに入力していいんだ」 と伝える視覚的サインが必要です。

そのために使うのが、 枠線の強調・影・背景色の変化・アニメーション といったフォーカス装飾。

ここでは、CSS と Tailwind CSS の両方で、 初心者でも迷わないように、実務で使えるフォーカスデザインを丁寧に解説します。

フォーカス装飾の基本構造

フォーカス時に変化させる要素

背景色 枠線（border） 影（box-shadow） アウトライン（outline） アニメーション（transition）

これらを 1〜2個だけ変化させる のが上品なフォーム設計のコツです。

例1：最も基本の「枠線強調フォーカス」

CSS 版

.input-basic {
  padding: 0.6rem 0.8rem;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.input-basic:focus {
  border-color: #2563eb;
  outline: none;
}
CSS
<input type="text" class="input-basic" placeholder="名前を入力">
HTML

Tailwind 版

<input
  type="text"
  class="px-3 py-2 border-2 border-gray-300 rounded-lg
         focus:border-sky-600 focus:outline-none
         transition"
  placeholder="名前を入力">
HTML

深掘りポイント

フォーカス時に枠線の色が変わるだけで、 「入力状態」が明確に伝わります。 outline を消して border に統一することで、見た目が整います。

例2：影を使った“ふわっと浮く”フォーカス

CSS 版

.input-shadow {
  padding: 0.6rem 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.input-shadow:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25);
  outline: none;
}
CSS
<input type="email" class="input-shadow" placeholder="メールアドレス">
HTML

Tailwind 版

<input
  type="email"
  class="px-3 py-2 border border-gray-300 rounded-lg
         focus:border-sky-600
         focus:shadow-[0_0_0_4px_rgba(37,99,235,0.25)]
         focus:outline-none
         transition"
  placeholder="メールアドレス">
HTML

深掘りポイント

影を使うと「入力欄が浮き上がる」ように見え、 視線が自然にフォーカス欄へ誘導されます。 アクセシビリティ的にもフォーカスが分かりやすくなります。

例3：背景色が変わる“入力しやすいフォーム”

CSS 版

.input-bg {
  padding: 0.6rem 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.input-bg:focus {
  background: #ffffff;
  border-color: #2563eb;
  outline: none;
}
CSS
<input type="text" class="input-bg" placeholder="ユーザー名">
HTML

Tailwind 版

<input
  type="text"
  class="px-3 py-2 border border-gray-300 rounded-lg bg-slate-50
         focus:bg-white focus:border-sky-600 focus:outline-none
         transition"
  placeholder="ユーザー名">
HTML

深掘りポイント

背景色が少し明るくなるだけで、 「入力モードに入った」ことが直感的に分かります。 特にライトテーマで効果的です。

例4：アンダーラインが伸びる“ミニマルフォーム”

CSS 版

.input-line {
  padding: 0.6rem 0;
  border: none;
  border-bottom: 2px solid #d1d5db;
  background: transparent;
  transition: border-color 0.2s ease;
}

.input-line:focus {
  border-color: #2563eb;
  outline: none;
}
CSS
<input type="text" class="input-line" placeholder="検索">
HTML

Tailwind 版

<input
  type="text"
  class="px-0 py-2 border-b-2 border-gray-300 bg-transparent
         focus:border-sky-600 focus:outline-none
         transition"
  placeholder="検索">
HTML

深掘りポイント

ミニマルなデザインにしたいときは、 下線だけのフォームが最適。 フォーカス時の色変化がとても映えます。

例5：アイコン付きフォームのフォーカス装飾

CSS 版

.input-icon-wrap {
  position: relative;
}

.input-icon-wrap input {
  padding-left: 2.5rem;
}

.input-icon-wrap svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  stroke: #9ca3af;
  transition: stroke 0.2s ease;
}

.input-icon-wrap input:focus + svg {
  stroke: #2563eb;
}
CSS
<div class="input-icon-wrap">
  <input type="text" placeholder="検索">
  <svg viewBox="0 0 24 24" width="20" height="20">
    <circle cx="11" cy="11" r="7" stroke-width="2" fill="none"/>
    <line x1="16" y1="16" x2="20" y2="20" stroke-width="2"/>
  </svg>
</div>
HTML

Tailwind 版（group を使う）

<div class="relative group">
  <input
    type="text"
    class="px-10 py-2 border border-gray-300 rounded-lg
           focus:border-sky-600 focus:outline-none
           transition"
    placeholder="検索">
  <svg
    viewBox="0 0 24 24"
    class="w-5 h-5 stroke-gray-400 absolute left-3 top-1/2 -translate-y-1/2
           group-focus-within:stroke-sky-600 transition">
    <circle cx="11" cy="11" r="7" stroke-width="2" fill="none"/>
    <line x1="16" y1="16" x2="20" y2="20" stroke-width="2"/>
  </svg>
</div>
HTML

深掘りポイント

フォーカス時にアイコンの色が変わると、 「今どの入力欄にいるか」がさらに分かりやすくなります。 フォームの視認性が大きく向上します。

例6：フォーカスリング（outline）をアクセシブルに強調

CSS 版

.input-accessible {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid #d1d5db;
}

.input-accessible:focus {
  outline: 3px solid rgba(37, 99, 235, 0.5);
  outline-offset: 2px;
}
CSS

Tailwind 版

<input
  type="text"
  class="px-3 py-2 border border-gray-300 rounded-lg
         focus:outline focus:outline-[3px] focus:outline-sky-500/50
         focus:outline-offset-2"
  placeholder="アクセシブル入力">
HTML

深掘りポイント

アクセシビリティを重視する場合、 outline を消さずに「見やすい色」に変えるのが正解です。 視覚的にフォーカスが明確になります。

フォーカス装飾の設計ポイント

変化は「1〜2個」に絞る

色＋影 色＋背景 線だけ など、変化を絞ると上品で使いやすいフォームになります。

フォーカスできない環境も意識する

スマホではフォーカスが弱く見えることがあるため、 枠線や背景の変化をしっかり入れておくと安心です。

アクセシビリティを忘れない

outline を完全に消すのは NG。 代わりに border や shadow でフォーカスを補強します。

そのまま使える「万能フォーカスフォーム」テンプレート（Tailwind）

<input
  type="text"
  class="px-4 py-2 rounded-lg border border-gray-300 bg-white
         focus:border-sky-600
         focus:shadow-[0_0_0_3px_rgba(37,99,235,0.25)]
         focus:outline-none
         transition"
  placeholder="入力してください">
HTML

影・枠線・アニメーションが揃っていて、 どんな UI にも合わせやすい万能フォームです。

さいごに

入力フォームのフォーカス装飾は、 「入力しやすさ」「安心感」「視認性」 を作る UI の基礎です。

ほんの少しの色や影の変化で、 フォームの使いやすさが劇的に変わります。

もしあなたが作っているフォーム（ログイン、問い合わせ、検索など）があれば、 そのフォームに合わせた最適なフォーカス装飾を一緒に設計できます。

スポンサーリンク
タイトルとURLをコピーしました