【デザインの幅が広がる】HTML、CSS、フォームでフォーム入力欄にアイコンを埋め込む

2024-04-20

HTML、CSS、フォームを使用してフォーム入力欄内にアイコンを配置する方法

HTML

まず、HTMLを使用してフォームと入力欄を作成します。以下は、アイコン付きの検索フォームの例です。

<form action="#">
  <label for="search">検索:</label>
  <div class="input-with-icon">
    <input type="text" id="search" name="search">
    <span class="icon"><i class="fas fa-search"></i></span>
  </div>
  <button type="submit">検索</button>
</form>

この例では、<div class="input-with-icon"> 要素を使用して、入力欄とアイコンをグループ化しています。 <span class="icon"> 要素には、Font Awesomeアイコンライブラリを使用して検索アイコンが挿入されています。

CSS

次に、CSSを使用してアイコンの位置とスタイルを設定します。以下は、上記のHTMLに対応するCSSの例です。

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

.icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #ccc;
}

input[type="text"] {
  padding-left: 30px;
}

このCSSでは、.input-with-icon 要素を相対位置に設定し、.icon 要素を絶対位置に設定しています。これで、アイコンを入力欄の上に配置することができます。 padding-left プロパティを使用して、入力欄の左側余白を調整し、アイコンとテキストが重ならないようにしています。

オプション

上記の例は基本的な方法ですが、さらにカスタマイズすることも可能です。以下に、いくつかのオプションを紹介します。

異なる種類のアイコンを使用する。 Font Awesome以外にも、多くの無料または有料のアイコンライブラリが用意されています。
アイコンの位置を調整する。 top、left、right、bottom プロパティを使用して、アイコンの位置を自由に調整できます。
アイコンをホバー時にアニメーション化する。 CSSトランジションを使用して、ホバー時にアイコンの色やサイズを変更することができます。
入力値に応じてアイコンを変更する。 JavaScriptを使用して、入力値に応じてアイコンを動的に変更することができます。

これらのオプションを組み合わせることで、より洗練された魅力的なフォームを作成することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォーム入力欄にアイコンを配置</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form action="#">
    <label for="search">検索:</label>
    <div class="input-with-icon">
      <input type="text" id="search" name="search">
      <span class="icon"><i class="fas fa-search"></i></span>
    </div>
    <button type="submit">検索</button>
  </form>
</body>
</html>

body {
  font-family: sans-serif;
}

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

.icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #ccc;
}

input[type="text"] {
  padding-left: 30px;
  width: 200px;
}

button[type="submit"] {
  padding: 5px 10px;
  cursor: pointer;
}

説明

このコードは、以下の内容を実現します。

フォームには、検索ラベル、入力欄、検索アイコン、送信ボタンが含まれています。
検索アイコンはFont Awesomeのfa-searchアイコンを使用しています。
アイコンは入力欄の左側に配置され、色はグレー (#ccc) です。
入力欄の幅は200pxに設定されています。
送信ボタンには、余白とカーソルポインタが設定されています。

このコードを編集して、独自のアイコンやスタイルを追加することができます。

補足

このコードは、BootstrapなどのCSSフレームワークを使用せずに記述されています。フレームワークを使用すると、レイアウトやスタイリングをより簡単に作成できます。
コードは、HTML5とCSS3の最新の機能を使用しています。古いブラウザとの互換性を考慮する必要がある場合は、Polyfillを使用する必要があります。

フォーム入力欄にアイコンを配置するその他の方法

背景画像を使用する

アイコンを背景画像として設定することで、入力欄内に配置することができます。これは、シンプルな方法でアイコンを追加したい場合に役立ちます。

<input type="text" style="background-image: url('icon.png'); background-repeat: no-repeat; background-position: left center; padding-left: 30px;">

Pseudo elementを使用する

CSS pseudo elementを使用して、アイコンを生成することができます。これは、SVGアイコンを使用したい場合や、アイコンの位置をより細かく制御したい場合に役立ちます。

<input type="text">

<style>
  input[type="text"]::before {
    content: "\f002"; /* Font Awesomeの検索アイコン */
    font-family: FontAwesome;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #ccc;
  }
</style>

JavaScriptを使用して、アイコンを動的に生成および配置することができます。これは、入力値に応じてアイコンを変更したい場合や、より複雑なアニメーションを作成したい場合に役立ちます。

<input type="text" id="search">

<script>
  const searchInput = document.getElementById('search');
  const searchIcon = document.createElement('span');
  searchIcon.classList.add('icon');
  searchIcon.innerHTML = '<i class="fas fa-search"></i>';
  searchInput.parentNode.insertBefore(searchIcon, searchInput);

  // 入力値に応じてアイコンを更新する
  searchInput.addEventListener('input', function() {
    if (searchInput.value.length > 0) {
      searchIcon.classList.add('active');
    } else {
      searchIcon.classList.remove('active');
    }
  });
</script>