HTML 検索機能 サンプル

この記事では、HTMLを使用した検索機能のサンプルデザインと実装方法について説明します。簡単なコード例を用いて、検索フォームの構造や各要素の役割を解説します。

Webサイトに訪れたユーザーがスムーズに情報を探せるように、検索フォームは分かりやすく、そしてデザイン性の高いものであるべきです。

この記事では、HTMLで検索フォームを作成する方法を基本から解説し、さらにCSSを使ったおしゃれなデザインサンプルを10個ご紹介します。

コピペで使えるコードも掲載していますので、ぜひご自身のWebサイトに最適な検索フォームを実装してみてください。

1. 検索フォームのHTMLコード解説

HTMLで検索フォームを作成するには、<form>、<input type="text">、<input type="submit">の3つの要素を使用します。

まずは、基本的なコードを見てみましょう。

<form id="form1" method="get" action="自分のサイトURL">
  <input id="sbox1" name="s" type="text" placeholder="キーワードを入力" />
  <input id="sbtn1" type="submit" value="検索" />
</form>

それぞれの要素と属性について詳しく解説します。

• <form>要素: フォーム全体を定義する要素です。
  • id="form1": このフォームに"form1"というIDを付与します。CSSでスタイルを適用する際に使用します。
  • method="get": フォームデータの送信方法を指定します。getメソッドでは、検索キーワードがURLに表示されます。
  • action="自分のサイトURL": フォームデータの送信先URLを指定します。実際には、検索を実行するサーバーサイドプログラムのURLを指定します。
• <input type="text">要素: 検索キーワードを入力するためのテキストフィールドを作成します。
  • id="sbox1": このテキストフィールドに"sbox1"というIDを付与します。CSSでスタイルを適用する際に使用します。
  • name="s": この入力フィールドに"s"という名前を付けます。サーバーサイドでデータを受け取る際に使用します。
  • placeholder="キーワードを入力": テキストフィールド内に、薄いグレーで「キーワードを入力」というヒントを表示します。ユーザーが入力開始すると、このヒントは消えます。
• <input type="submit">要素: フォームを送信するためのボタンを作成します。
  • id="sbtn1": この送信ボタンに"sbtn1"というIDを付与します。CSSでスタイルを適用する際に使用します。
  • value="検索": ボタンに表示するテキストを「検索」に設定します。

HTML5から<input>要素のtype属性には、検索用の入力欄を指定するsearchが追加されましたが、ここではtextを使用しています。これは、最近のWordPressテーマでは、searchに対して独自のスタイルが適用されていることが多く、カスタマイズが難しくなる場合があるためです。

WordPressテーマでのデフォルトスタイルについて

WordPressテーマによっては、検索フォームに独自のスタイルが適用されている場合があります。そのため、上記のコードをそのまま貼り付けても、テーマのデザインに合わせた検索フォームにならないことがあります。

その場合は、CSSを使って検索フォームのスタイルをカスタマイズする必要があります。

2. 検索フォームのCSSデザイン4パターン

ここでは、CSSを使って検索フォームをデザインする基本的な方法を4つのパターンに分けて解説します。

2.1 横並びデザイン

テキストフィールドと検索ボタンを横並びにするデザインは、最も一般的な検索フォームのスタイルです。

<form id="form1" action="自分のサイトURL">
  <input id="sbox1" name="s" type="text" placeholder="キーワードを入力" />
  <input id="sbtn1" type="submit" value="検索" />
</form>

/* フォーム全体を中央へ */
#form1 {
  display: flex;
  justify-content: center; /* 中央へ固定 */
  height: 50px; /* 高さ */
}

/* 入力フォーム */
#sbox1 {
  width: 250px; /* 横幅 */
  padding: 0 15px; /* プレースホルダーの位置調整 */
  border-radius: 4px 0 0 4px; /* 左側の角を少し丸める */
  background: #eee; /* 背景カラー */
  border: none; /* 枠線を消す */
  outline: 0; /* クリック時の青い枠線消す */
}

/* 検索ボタン */
#sbtn1 {
  width: 70px; /* 横幅 */
  border-radius: 0 4px 4px 0; /* 右側の角を少し丸める */
  background: #7fbfff; /* 背景カラー */
  border: none; /* 枠線を消す */
  color: #fff; /* テキストカラー */
  font-size: 16px; /* フォントサイズ指定 */
  cursor: pointer; /* マウスを乗せると指差しポインターになる */
}

/* 検索ボタンマウスオーバー時 */
#sbtn1:hover {
  background: #92dbff; /* 背景カラー変更 */
}

2.2 全体の幅の調整方法

検索フォーム全体の幅を調整するには、入力フォーム(#sbox1)と検索ボタン(#sbtn1)のwidthの値を変更します。

2.3 四隅の角を丸くしたい

角を丸くするには、border-radiusプロパティを使用します。値を大きくするほど、丸みが強くなります。

• 入力フォームの左側上下の角を丸くする場合: border-radius: 25px 0 0 25px;
• 検索ボタンの右側上下の角を丸くする場合: border-radius: 0 25px 25px 0;

2.4 入力フォームと検索ボタンを離したい

入力フォームと検索ボタンの間隔を空けるには、入力フォーム(#sbox1)にmargin-rightを指定します。

#sbox1 {
  margin-right: 10px;
}

角丸をなくす場合は、#sbox1と#sbtn1両方にborder-radius: 0;を指定します。

2.5 入力フォームと検索ボタンを離した状態で丸みをもたせる

要素間を離しつつ角を丸くするには、marginとborder-radiusを組み合わせます。

#sbox1 {
  margin-right: 10px;
  border-radius: 10px;
}

#sbtn1 {
  border-radius: 10px;
}

2.6 入力フォームクリック時の青い枠線の解説

テキストフィールドをクリックすると、デフォルトでは青い枠線が表示されます。これを消すには、outline: 0;を指定します。

3. 横並びで検索ボタンに虫眼鏡アイコンを設置する

検索ボタンに虫眼鏡アイコンを設置すると、視覚的に分かりやすくなり、ユーザービリティが向上します。

ここでは、Font Awesomeというアイコンフォントを使って虫眼鏡アイコンを表示する方法を解説します。

HTML:

<form id="form1" action="自分のサイトURL">
  <input id="sbox1" name="s" type="text" placeholder="キーワードを入力" />
  <button id="sbtn2" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>

CSS:

/* フォーム全体を中央へ */
#form1 {
  display: flex;
  justify-content: center;
  height: 50px;
}

/* 入力フォーム */
#sbox1 {
  width: 250px;
  padding: 0 15px;
  border-radius: 4px 0 0 4px;
  background: #eee;
  border: none;
  outline: 0;
}

/* 検索ボタン */
#sbtn2 {
  width: 50px;
  border-radius: 0 4px 4px 0;
  background: #7fbfff;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

#sbtn2:hover {
  background: #92dbff;
}

Font Awesomeの導入方法

1. CDNを使う方法:
   • 以下のコードをHTMLの<head>タグ内に貼り付けます。

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
       

2. WordPressのfunctions.phpに記述する方法:
   • 以下のコードを子テーマのfunctions.phpに追加します。

   function enqueue_scripts(){
     wp_enqueue_style('fontawesome','https://use.fontawesome.com/releases/v6.5.1/css/all.css');
   }
   add_action('wp_enqueue_scripts','enqueue_scripts');
       

アイコンをきれいに配置するには、検索ボタン(#sbtn2)の横幅(width)と高さを揃える必要があります。

4. 入力フォーム枠線+虫眼鏡アイコン

入力フォームに枠線を付けて、検索ボタンに虫眼鏡アイコンを設置するデザインもよく見られます。

HTML:

<form id="form1" action="自分のサイトURL">
  <input id="sbox2" name="s" type="text" placeholder="キーワードを入力" />
  <button id="sbtn2" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>

CSS:

/* フォーム全体を中央へ */
#form1 {
  display: flex;
  justify-content: center;
  height: 50px;
}

/* 入力フォーム */
#sbox2 {
  width: 250px;
  padding: 0 15px;
  border-radius: 4px 0 0 4px;
  background: transparent; /* 背景カラー透明 */
  border: 2px solid #7fbfff; /* 枠線の指定 */
  border-right: none; /* 枠線の右側だけ削除 */
  outline: 0;
}

/* 検索ボタン */
#sbtn2 {
  width: 50px;
  border-radius: 0 4px 4px 0;
  background: #7fbfff;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

#sbtn2:hover {
  background: #92dbff;
}

ここでは、入力フォーム(#sbox2)の背景を透明にし、枠線を指定しています。さらに、検索ボタンとの境界線を消すために、border-right: none;を指定しています。

5. 入力フォームと虫眼鏡アイコンだけのデザイン

検索ボタンの背景をなくし、入力フォームと虫眼鏡アイコンのみを表示する、よりシンプルなデザインも人気です。

HTML:

<form method="get" id="form1" action="自分のサイトURL">
  <input id="sbox1" name="s" type="text" placeholder="キーワードを入力">
  <button id="sbtn3" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>

CSS:

/* フォーム全体を中央へ */
#form1 {
  display: flex;
  justify-content: center;
  height: 50px;
}

/* 入力フォーム */
#sbox1 {
  width: 250px;
  padding: 0 15px;
  border-radius: 4px 0 0 4px;
  background: #eee;
  border: none;
  outline: 0;
}

/* 検索ボタン */
#sbtn3 {
  width: 50px;
  border-radius: 0 4px 4px 0;
  background: #eee; /* 入力フォームと同じ背景色 */
  border: none;
  color: #666;
  font-size: 18px;
  cursor: pointer;
}

#sbtn3:hover {
  background: #7fbfff;
  color: #fff;
}

入力フォーム(#sbox1)と検索ボタン(#sbtn3)の背景色を同じにすることで、フォームが一体化しているように見えます。

6. 枠線の中に虫眼鏡アイコン

フォーム全体に枠線を付けて、虫眼鏡アイコンを枠線内に配置するデザインもスタイリッシュです。

HTML:

<form method="get" id="form2" action="自分のサイトURL">
  <input id="sbox3" name="s" type="text" placeholder="キーワードを入力">
  <button id="sbtn4" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>

CSS:

/* フォーム全体 */
#form2 {
  display: flex;
  justify-content: center;
  border: solid 2px #666;
  max-width: 300px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
}

/* 入力フォーム */
#sbox3 {
  width: 240px;
  padding: 0 15px;
  border-radius: initial;
  background: transparent;
  border: none;
  outline: 0;
}

/* 検索ボタン */
#sbtn4 {
  width: 50px;
  background: transparent;
  border-radius: initial;
  border: none;
  color: #666; /* 枠線と同じ色 */
  font-size: 18px;
  cursor: pointer;
}

#sbtn4:hover {
  background: #7fbfff;
  color: #fff;
}

このデザインでは、フォーム全体(#form2)に枠線を付け、入力フォーム(#sbox3)と検索ボタン(#sbtn4)の背景を透明にしています。枠線と虫眼鏡アイコンの色を揃えることで、統一感のあるデザインになります。

7. 虫眼鏡アイコンを左側にしたい

虫眼鏡アイコンをテキストフィールドの左側に配置したい場合は、HTMLの<input>と<button>タグの順番を入れ替えます。

HTML:

<form method="get" id="form1" action="自分のサイトURL">
  <button id="sbtn4" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
  <input id="sbox3" name="s" type="text" placeholder="キーワードを入力">
</form>

ただし、タグの順番を入れ替えただけだと、プレースホルダーの余白が不自然になる場合があります。その場合は、入力フォーム(#sbox3)にpadding: 0;を指定することで調整できます。

8. 上下2段構造にするデザイン

テキストフィールドと検索ボタンを上下に配置するデザインも、スペースを有効活用できるため便利です。

HTML:

<form method="get" id="form1" action="自分のサイトURL">
  <input id="sbox1" name="s" type="text">
  <button id="sbtn3" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>

CSS:

/* フォーム全体を中央へ */
#form1 {
  display: flex;
  justify-content: center;
  flex-direction: column; /* 要素を縦に並べる */
  position: relative; /* 位置決め */
  margin-top: 30px; /* フォームの上に余白 */
}

/* フォーム上テキスト */
#form1::before {
  position: absolute;
  content: "検索フォーム";
  font-size: 15px;
  background: #7fbfff;
  color: #fff;
  width: 300px;
  border-radius: 4px 4px 0 0;
  text-align: center;
  top: -25px;
}

/* 入力フォーム */
#sbox1 {
  width: 250px;
  height: 50px;
  padding: 0 15px;
  border-radius: 0 0 0 4px;
  background: #eee;
  border: none;
  outline: 0;
}

/* 検索ボタン */
#sbtn3 {
  width: 50px;
  height: 50px;
  border-radius: 0 0 4px 0;
  background: #eee;
  border: none;
  color: #7fbfff;
  font-size: 18px;
  cursor: pointer;
}

#form1::before疑似要素を使って、フォーム上部に「検索フォーム」というテキストを追加しています。横幅を調整する際は、#form1::beforeのwidthと、#sbox1、#sbtn3のwidthの合計値を合わせてください。

9. 検索フォームで使えるFont Awesomeの無料虫眼鏡アイコン7つ

Font Awesome 6.5.1以降では、以下の7つの虫眼鏡アイコンを無料で使用できます。すべて商用利用も可能です。

10. Font Awesomeを使ったSNSボタンもおすすめ

Font Awesomeは、検索フォームだけでなく、SNSボタンの作成にも活用できます。 以下の記事では、合計32パターンの様々なSNSボタンを作成しました。 プロフィールやサイドバーなどに実装できます。

11. 結論：検索フォームはユーザーが一目でわかるデザインしよう

この記事では、様々なデザインの検索フォームを紹介してきましたが、重要なのはユーザーにとって分かりやすく、使いやすいデザインであることです。

今回紹介したコード例を参考に、ぜひご自身のWebサイトに最適な検索フォームを実装してみてください。

検索フォームの基本構造

検索フォームは、ユーザーが情報を検索するためのインターフェースです。HTMLで簡単に構築できる基本的なフォームのタグや要素について説明します。

基本的なフォームの例

検索機能の実装方法

実際にHTMLを用いて検索機能を実装する手順を詳しく解説します。検索ボックス、ボタンの作成、そしてサーバーサイドの処理についての基本的な流れを紹介します。

検索機能のデザイン

ユーザーにとって使いやすい検索フォームをデザインするためのポイントや工夫について考察します。視覚的な要素や配置についても触れます。

例えば、以下のポイントに注意することが重要です：

• 適切なサイズの入力フィールドを使用すること
• ボタンは明確に目立たせること
• プレースホルダーを使って入力内容の例を示すこと

参考文献

詳細な情報については以下のリンクを参照してください。

• MDN Web Docs: <form> 要素
• WHATWG HTML Living Standard: form 要素

よくある質問 (QA)

Q1: 検索フォームにはどのような要素が必要ですか？

A1: 検索フォームには、入力フィールドと送信ボタンが基本的な要素です。

Q2: 検索結果はどのように表示しますか？

A2: 検索結果は、検索フォームのaction属性で指定したページに表示できます。

Q3: CSSを使ってフォームのデザインを変更できますか？

A3: はい、CSSを使用してフォームの見た目やレイアウトを自由に変更できます。

その他の参考記事:サイト 内 検索 html