入力欄にアイコンを表示しよう！CSSのpositionと擬似要素で簡単おしゃれな入力フォーム作成術

入力欄のアイコン表示（擬似要素やpositionの活用）

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

生徒

「Webサイトを見ていると、名前を入力する枠の中に人のアイコンが入っているのを見かけます。あれってどうやって作っているのですか？」

先生

「あれは入力欄の装飾で、CSSを使って配置されています。CSSの仕組みを理解すると、自分でも簡単に作れるようになりますよ。」

生徒

「CSSというのは聞いたことありますが、アイコンを枠の中に入れるなんて難しそうです！」

先生

「大丈夫です。基本となるposition（位置指定）と擬似要素（ぎじようそ）という考え方を順番に学んでいきましょう！」

1. 入力欄にアイコンを表示するメリットとは？

Webサイトのデザインにおいて、入力欄にアイコンがあることはとても重要です。なぜなら、一目で「ここに名前を入力する」「ここはメールアドレスを入力する場所だ」とユーザーに直感的に伝えることができるからです。これをUI（ユーザーインターフェース）デザインと呼びますが、使いやすいサイト作りにおいて欠かせない技術です。

アイコンがあるだけで、サイトが洗練された印象になり、プロっぽく見えます。初心者の方でも、CSSという言語を少し工夫するだけで、すぐに取り入れることができます。まずは、どんな仕組みでアイコンが浮いているのか、その秘密を探っていきましょう。

2. CSSのposition（位置指定）を理解しよう

CSSには、要素を自由な場所に配置するための「position」という機能があります。通常、HTMLの要素は上から順に並びますが、positionを使うと、そのルールを無視して好きな場所にアイコンを重ねることができます。

特に重要なのが「親」と「子」の関係です。アイコンの親となる入力欄（inputタグ）をrelative（相対的な位置）に設定し、アイコンをabsolute（絶対的な位置）にすることで、入力欄の端にアイコンを固定することができます。これが、アイコンを入力欄の右や左にきれいに並べるための基本テクニックとなります。

3. 擬似要素でアイコンを挿入する

次に、HTMLにわざわざアイコンの画像タグを追加しなくても、CSSの力だけでアイコンを表示する方法を学びましょう。CSSには「擬似要素」という、実際には存在しないはずの要素を画面上に作り出す機能があります。

「before」や「after」という言葉を使って、入力欄のすぐ前や後ろにアイコンを付け加えることができます。これを使うことで、HTMLがすっきりし、管理がしやすくなります。プロのデザイナーもよく使う手法ですので、ぜひ覚えておきましょう。


<style>
  .input-wrapper {
    position: relative;
    display: inline-block;
  }
  .input-wrapper::before {
    content: "人";
    position: absolute;
    left: 10px;
    top: 5px;
  }
  .my-input {
    padding-left: 30px;
  }
</style>

<div class="input-wrapper">
  <input type="text" class="my-input" placeholder="名前を入力">
</div>

ブラウザ表示

4. アイコンをきれいに整える余白の調整

アイコンを表示させると、入力した文字とアイコンが重なってしまうことがあります。これを解決するのが「パディング（padding）」です。パディングとは、要素の内部にできる余白のことです。

アイコンがある側の入力欄に、少しだけパディングを広めに設定してあげると、アイコンと文字が重ならず、とても見やすい入力フォームになります。ちょっとした調整ですが、使いやすさには大きな差が出ます。まずは、padding-leftやpadding-rightを使って、文字が窮屈にならないように調整する練習をしてみましょう。


<style>
  .search-box {
    padding: 10px 10px 10px 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
</style>

<input type="text" class="search-box" placeholder="検索キーワード">

ブラウザ表示

5. ブートストラップを使ってさらに簡単に配置する

CSSをゼロから書くのが難しい場合は、ブートストラップ（Bootstrap）という便利なツールを使うのがおすすめです。ブートストラップには、あらかじめ準備されたスタイルがたくさんあり、入力欄にアイコンを添えるための部品も用意されています。

「input-group」という機能を使えば、入力欄の横にアイコンを簡単に並べることができます。複雑なCSSを書かなくても、クラスを指定するだけでプロのようなデザインになります。初心者の方は、まずはこうした便利な道具を使って、仕組みを理解してからCSSを自分で書くようにするとスムーズです。


<div class="input-group mb-3">
  <span class="input-group-text"><i class="bi bi-envelope"></i></span>
  <input type="text" class="form-control" placeholder="メールアドレス">
</div>

ブラウザ表示

6. レスポンシブ対応：スマホでもきれいな表示

最後に忘れてはならないのが、スマホで見たときの表示です。パソコンではきれいに並んでいたアイコンも、スマホの狭い画面ではずれてしまうことがあります。そんなときは「レスポンシブ」という技術を使います。これは、画面の幅に合わせて表示を変える技術です。

CSSのメディアクエリという仕組みを使うと、「画面幅が小さいときはアイコンのサイズを小さくする」といった指示を出すことができます。今のWebサイトは、パソコンだけでなくスマホで見られることがほとんどですので、アイコンのデザインもスマホで見やすいかどうか、必ず確認するようにしましょう。これだけでサイトの品質は一段と上がります。


<style>
  .icon-input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
</style>

<input type="text" class="icon-input" placeholder="スマホでも安心の幅">

ブラウザ表示

7. アイコン表示でユーザー体験を向上させる

入力欄にアイコンを表示する作業は、最初は難しく感じるかもしれません。positionや擬似要素といった、新しい概念が出てくるからです。しかし、これらを使いこなせるようになると、入力フォームの使い勝手が大きく変わります。ユーザーは「何を入力すればいいか」が一目で分かるようになるため、ストレスなくサイトを利用できるようになります。

Web開発の現場では、ほんの少しの丁寧なデザインが、サイトの評価を大きく左右します。ぜひ、今回のCSSテクニックを参考にして、自分だけの使いやすい入力フォームを作ってみてください。失敗しても大丈夫です。何度か書き直して、ブラウザで表示を確認する、その繰り返しが、あなたのWeb制作スキルを確実に高めてくれます。

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