CSSのfocus-withinを完全ガイド！フォーム周辺をオシャレに変える方法

:focus-withinの活用でフォーム周辺の見た目を改善

先生と生徒の会話形式で理解しよう

生徒

「入力欄をクリックしたときに、その周りの枠や背景までパッと色が変わるようにしたいのですが、どうすればいいですか？」

先生

「それはCSSのfocus-withinという機能を使えば、驚くほど簡単に作ることができますよ。」

生徒

「ふぉーかす・うぃじん…ですか？難しそうですが、初心者でも大丈夫でしょうか？」

先生

「大丈夫です！『中にフォーカスが当たっているとき』という条件を指定するだけなんです。具体的な使い方を一緒に見ていきましょう！」

1. CSSのfocus-withinとは何かをやさしく解説

ウェブサイトを制作する上で、ユーザーが「今どこを操作しているか」を分かりやすく伝えることは、非常に重要です。通常、CSSには「その要素自体をクリックしたときに見た目を変える」という仕組みがありますが、focus-within（フォーカス・ウィズイン）は一味違います。

これは、ある要素の「中」に含まれている入力欄などがクリックされたときに、親となる要素（外側の箱）の見た目を変えるための命令です。プログラミング未経験の方に分かりやすく例えるなら、部屋の中にあるスイッチを入れると、部屋全体の照明がパッと明るくなるようなイメージです。これを使うことで、お問い合わせフォームなどの操作感を劇的に向上させることができ、SEO（検索エンジン最適化）においても好ましいユーザー体験を提供できるようになります。

2. フォーカスという言葉の意味を正しく知ろう

パソコン初心者の方がまず最初につまずくのが「フォーカス」という言葉です。これは、マウスで入力欄をクリックしたり、キーボードの操作でその項目を選択したりして、「今からここで入力を受け付けますよ」という状態になることを指します。

例えば、スマートフォンの画面で文字を打つために四角い枠をタップすると、カーソルがピコピコと点滅しますよね。あの状態が「フォーカスが当たっている」状態です。focus-withinの「within」には「内部に」という意味があるため、合わせて「内部にフォーカスがあるとき」という判定になります。この基本的な考え方を理解しておくだけで、CSSの学習効率はグンと上がります。

3. 入力欄を囲む枠線の色をふわっと変える方法

まずは、一番よく使われる「フォーム全体を強調する」デザインに挑戦してみましょう。通常、入力欄をクリックするとその欄の枠線だけが変わりますが、focus-withinを使えば、入力欄を包んでいる「親の要素」全体の枠線を光らせることができます。

これにより、入力フォームが複数並んでいるときに、ユーザーは「今、このセクションを入力しているんだな」と直感的に理解できるようになります。デザインを美しくするだけでなく、利用者の迷いをなくす親切な設計を心がけましょう。


<style>
	/* 外側の箱（container）の設定 */
	.container {
		border: 2px solid #ccc;
		padding: 20px;
		transition: 0.3s; /* 変化をなめらかにする */
	}
	/* 中の入力欄にフォーカスが当たったとき、外側の箱の色を変える */
	.container:focus-within {
		border-color: #007bff;
		box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
	}
</style>

<div class="container">
	<p>ここに入力してみてください：</p>
	<input type="text" placeholder="クリックすると枠が光ります">
</div>

ブラウザ表示

ここに入力してみてください：

4. ログイン画面などで背景色を切り替えるテクニック

次に、背景全体の色を切り替えて、操作中の没入感を高める手法を紹介します。ログイン画面などで、IDやパスワードを入力しようとした瞬間に、入力エリアの背景が白から薄い青に変わるような演出です。これは、視覚的なフィードバックをユーザーに与えるために非常に効果的です。

パソコンの操作に不慣れな方は、自分の入力がシステムに認識されているのか不安になることがあります。背景色が変わることで「今、ここが有効ですよ」というメッセージを言葉を使わずに伝えることができるのです。CSSの指定も非常にシンプルで、クラス名のあとに:focus-withinを付けるだけです。


<style>
	/* ログインエリア全体の初期設定 */
	.login-area {
		background-color: #f8f9fa;
		padding: 25px;
		border-radius: 10px;
	}
	/* 中身にフォーカスが当たったら背景色を水色にする */
	.login-area:focus-within {
		background-color: #e3f2fd;
	}
</style>

<div class="login-area">
	<label>ユーザー名：</label>
	<input type="text" class="form-control mb-2">
	<label>パスワード：</label>
	<input type="password" class="form-control">
</div>

ブラウザ表示

5. アイコンの色を同時に変えてオシャレ度アップ

入力欄の横にアイコンがある場合、入力中だけそのアイコンの色を鮮やかにすると、さらにプロっぽい仕上がりになります。通常、アイコン（iタグやspanタグなど）の色を変えるには個別に指定が必要ですが、focus-withinを使えば、「この箱の中のどこかが触られたら、箱の中にあるアイコンの色を全部変える」という命令が一括で出せます。

これはHTMLの構造を利用した賢い書き方です。クラス名の指定を工夫するだけで、コードの量を減らしつつ、リッチなアニメーションを実現できます。こうした細かいこだわりが、検索エンジンからも高く評価される「質の高いコンテンツ」へと繋がっていきます。


<style>
	/* アイコン付きの入力グループ */
	.input-group-custom {
		color: #999;
		margin-bottom: 15px;
	}
	/* 入力中だけアイコンをオレンジ色にする */
	.input-group-custom:focus-within i {
		color: #fd7e14;
	}
</style>

<div class="input-group-custom">
	<i class="bi bi-envelope-fill"></i>
	<input type="email" placeholder="メールアドレスを入力">
</div>

ブラウザ表示

6. フォーム以外の意外な活用法！カード型のリンクなど

この機能は入力フォームだけでなく、クリックできる「カード型」のパーツにも使えます。例えば、画像と説明文がセットになったカードの中に、詳細を読むためのボタンを置いている場合です。ユーザーがボタンにマウスを合わせたり、キーボード操作で選択したりした瞬間に、カード全体の影を濃くして浮き上がらせるような効果が作れます。

これにより、ユーザーは「今このカードを選択しているんだ」という確信を持つことができます。スマホユーザーにとっても、タップしたときの反応が分かりやすくなるため、非常に親切な設計と言えます。focus-withinは、アクセシビリティ（誰もが使いやすいこと）を向上させるための強力な味方なのです。

7. 注意点！古いパソコンやブラウザでの動作について

とても便利なfocus-withinですが、学習する上で知っておくべき注意点が一つあります。それは「古いブラウザ」では動かないことがあるという点です。特に、かなり昔のバージョンのInternet Explorerなどを使っている環境では、この効果は表示されません。

しかし、安心してください。最近のスマートフォンや、最新のGoogle Chrome、Edge、Safariなどであれば問題なく動作します。もし動かない環境があったとしても、単に「背景色が変わらない」だけで、入力自体ができなくなるわけではありません。このように、新しい技術を取り入れつつ、基本の機能も損なわない考え方をプログレッシブ・エンハンスメントと呼びます。

8. 実践的なフォームデザインの組み合わせ例

最後に応用編として、これまで学んだことを組み合わせた本格的なフォームのデザインを見てみましょう。ラベル（見出し文字）と入力欄、そして補足説明を一つのグループにして、入力中はそのグループ全体が際立つように設定します。これを繰り返すことで、長いアンケートフォームでも、今どこを入力しているか迷子にならない画面が完成します。

プログラミングのコードは、パズルのように組み合わせて使うのがコツです。最初は難しく感じるかもしれませんが、一行ずつ「これは何を命令しているのかな？」と読み解いていけば、必ず自分のものにできます。自分の手で作った画面が思い通りに動く楽しさを、ぜひ体験してみてください！


<style>
	/* まとまり（セクション）の設定 */
	.form-section {
		border-left: 5px solid #eee;
		padding-left: 15px;
		margin-bottom: 20px;
		transition: 0.5s;
	}
	/* 入力中、左の線を太くして目立たせる */
	.form-section:focus-within {
		border-left-color: #28a745;
		background-color: #f0fff4;
	}
	.form-section label {
		display: block;
		font-weight: bold;
	}
</style>

<div class="form-section">
	<label>お問い合わせ内容</label>
	<textarea class="form-control" rows="3"></textarea>
	<small>※できるだけ詳しくご記入ください</small>
</div>

ブラウザ表示

お問い合わせ内容 ※できるだけ詳しくご記入ください

9. 学習のヒントと次へのステップ

今回学んだfocus-withinは、CSSの中でも比較的新しく、かつ非常に使い勝手の良い機能です。まずは自分のブログや練習用のページで、小さな四角形を作って色を変える実験から始めてみてください。失敗してもパソコンが壊れることはありません。むしろ、失敗した数だけ「なぜ動かないのか」を考える力が身につき、上達への近道となります。

検索エンジンに好まれるサイトは、技術をひけらかすサイトではなく、あくまで「使う人のことを考えたサイト」です。この機能を使いこなして、世界中の人に喜ばれる使いやすいホームページを一緒に作っていきましょう。あなたの挑戦を応援しています！

2026年最新スキルアップ・実践セミナー