CSSのfocus活用術！入力欄が光るハイライトスタイルで使いやすいWebフォームを作る

フォーカス時のハイライトスタイル（:focusの活用）

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

生徒

「お問い合わせフォームなどで、枠をクリックした時に色が変わるオシャレなサイトがありますよね。あれはどうやって作っているんですか？」

先生

「それはCSSのfocusという機能を使っています。入力中であることをユーザーに伝える、とても大切なテクニックですよ。」

生徒

「focusというのは何ですか？プログラミング初心者でもすぐに使えますか？」

先生

「はい、とても簡単です。フォーカスとは『今注目されている状態』のこと。さっそく設定方法を見ていきましょう！」

1. フォーカスとハイライトスタイルの基礎知識

フォーカスとは、パソコンの画面上で「現在、入力ができる状態にある場所」のことを指します。マウスでテキストボックスをクリックしたり、キーボードのタブキーを使って移動したりしたときに、その枠が選択された状態になることを「フォーカスが当たっている」と言います。

この時、CSSの「focus」という機能を使うと、枠線の色を変えたり、光らせるような影をつけたりと、特別な装飾を施すことができます。これをハイライトスタイルと呼びます。初心者の方にとって、Webサイトを作る際の第一歩は「訪問者が迷わないようにすること」です。どこに入力しているかが視覚的に分かると、ユーザーは安心して文字を入力できます。これはWebデザインにおいて、操作性を高めるために欠かせないおもてなしの心なのです。

2. フォーカス時に枠線の色を変える方法

最もシンプルで効果的なハイライト方法は、枠線の色を変更することです。入力欄をクリックした瞬間に色が青や緑に変わるだけで、サイトの印象はグッとプロっぽくなります。


<style>
    .input-basic {
        padding: 10px;
        border: 2px solid #ccc;
    }
    .input-basic:focus {
        border-color: #007bff;
        outline: none;
    }
</style>

<input type="text" class="input-basic" placeholder="クリックすると枠が青くなります">

ブラウザ表示

ここで重要なのは「outline: none」という指定です。通常、ブラウザはフォーカス時に独自の青い枠を表示しますが、これを一度消すことで、私たちがCSSで指定した枠線をきれいに表示させることができます。枠線の色を変えるだけで、今どの入力項目を操作しているのかが明確に伝わるようになります。

3. 影をつけて光っているように見せるテクニック

より目立たせたい場合は、影をつける「box-shadow」という設定を組み合わせるのがおすすめです。入力欄の周りがふんわりと光るような演出が加わり、非常に高級感のあるフォームが出来上がります。


<style>
    .input-glow {
        padding: 10px;
        border: 1px solid #ced4da;
    }
    .input-glow:focus {
        border-color: #ffc107;
        box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
        outline: none;
    }
</style>

<input type="text" class="input-glow" placeholder="クリックすると光るような影が出ます">

ブラウザ表示

この「box-shadow」という記述は、影の広がりやぼかし具合を数値で細かく指定できます。数値を調整することで、光の強さを変えることができるため、自分の好みに合わせた演出が可能です。Web制作の初心者でも、このコードを真似するだけで、既存のWebサイトよりも一段上のデザインを実現できます。

4. 背景色を変化させて強調するデザイン

枠線だけでなく、入力欄の背景色自体を変化させる手法もあります。背景色が薄い黄色や明るい青に変わることで、入力中の項目がより強調され、間違いを防ぐ効果が期待できます。


<style>
    .input-bg {
        padding: 10px;
        border: 1px solid #ccc;
    }
    .input-bg:focus {
        background-color: #fff9e6;
        border-color: #d39e00;
        outline: none;
    }
</style>

<input type="text" class="input-bg" placeholder="背景色が変わるタイプです">

ブラウザ表示

背景色を変える際は、文字が読みづらくならないように注意しましょう。あまりに濃い背景色にしてしまうと、入力した文字が見えなくなってしまいます。薄い色を選び、文字とのコントラストを保つことが大切です。このように、色をうまく使いこなすことは、ユーザーにストレスを感じさせないWebサイト作りには不可欠です。

5. 角の丸みとアニメーションを組み合わせる

フォーカス時の変化に「動き」を加えると、さらに洗練された印象になります。CSSの「transition（トランジション）」を使うと、色の変化をパッと切り替えるのではなく、ふわっと滑らかに変えることができます。


<style>
    .input-anime {
        padding: 10px;
        border: 2px solid #ddd;
        border-radius: 20px;
        transition: all 0.3s ease;
    }
    .input-anime:focus {
        border-color: #28a745;
        background-color: #e8f5e9;
        outline: none;
    }
</style>

<input type="text" class="input-anime" placeholder="動きがなめらかなタイプです">

ブラウザ表示

「transition: all 0.3s ease」と書くだけで、ブラウザが勝手に時間をかけて色を変えてくれるようになります。この滑らかな変化が、サイトに高級感と使いやすさを同時に与えてくれます。プログラミング未経験でも、この一文を加えるだけで驚くほど操作感が心地よくなりますので、ぜひ取り入れてみてください。

6. フォームのアクセシビリティへの配慮

フォーカススタイルを作る際、最も大事なことは「見やすさ」を損なわないことです。デザインを凝りすぎて、肝心の色が背景と混ざって見えなくなってしまっては、かえってユーザーに迷惑をかけてしまいます。ハイライトの効果は、あくまで「どこを入力しているか」を教えるためのツールです。

また、キーボードの操作だけでWebサイトを閲覧している方にとって、フォーカスの状態が分かりやすいことは、閲覧のしやすさに直結します。デザインの美しさだけでなく、どんな人がサイトに訪れても快適に情報を得られるような配慮を忘れないようにしましょう。こうした心遣いができるようになることが、立派なWebクリエイターになるための第一歩です。

7. 効率的なCSSコード管理のコツ

Webサイト全体で同じようなフォーカススタイルを使いたい場合は、CSSの中に共通のクラス名を作って適用させるのが一番の近道です。例えば、「focus-highlight」という名前を一つ決めておけば、全てのテキストボックスに同じスタイルを使い回すことができます。

初心者のうちは、コードをたくさん書いてしまって管理が大変になることもあるかもしれません。ですが、一つひとつ名前をつけて整理していく習慣をつけることで、後から見返したときに「ああ、ここはこうなっていたんだ」と理解しやすくなります。パソコンの中は、整理整頓が得意な人ほど早く上達します。まずは小さな枠を光らせることから始めて、自分の理想とするWebフォームを少しずつ形にしていきましょう。

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