Webサイト内の情報をユーザーが素早く見つけるために、「検索フォーム（検索窓）」は非常に重要な機能です。
コーポレートサイトのヘッダーや、ブログのサイドバー、ECサイトの商品検索など、あらゆる場面で利用されています。
「おしゃれな虫眼鏡アイコンを付けたい」
「カテゴリで絞り込み（複数条件）できるようにしたい」
このような疑問を持つ方のために、この記事ではHTMLとCSSを使った検索フォームの基本的な作り方から、コピペで使えるデザインサンプル、そして実際に検索システムとして動かすための仕組みまでを徹底解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
HTMLで作る検索フォームの基本形
検索フォームを作成するために必要なHTMLタグは、実はそれほど多くありません。
基本となるのは、フォーム全体を囲む <form> タグ、文字を入力する <input> タグ、そして送信する <button> タグの3つです。
最もシンプルな検索窓のコード
まずは、装飾なしの最もシンプルな検索フォームのコードを見てみましょう。
<form action="/search" method="get">
<input type="search" name="q" placeholder="キーワードを入力">
<button type="submit">検索</button>
</form>
検索フォームの骨格となるのは <form> タグです。
このタグの action 属性には、検索を実行するプログラムの場所（URL）を指定し、method 属性には通常「get」を指定します。
GETメソッドを使うことで、検索キーワードがURLの末尾（例：?q=キーワード）に付与され、検索結果ページとしてブックマークや共有が可能になります。
テキスト入力欄には <input type="search"> を使用します。
通常の text タイプでも動きますが、search タイプにすることで、ブラウザによっては入力履歴からの補完や、入力後の「×（クリア）」ボタンが自動的に表示されるようになり、ユーザー体験が向上します。
name 属性は、サーバーにデータを送る際の名前（パラメータ名）になる重要な部分です。
一般的に「q（query）」や「s（search）」などがよく使われます。
コピペで使える！おしゃれな検索フォームのデザイン
デフォルトの検索フォームは非常にシンプルで地味なため、CSSを使ってサイトのデザインに馴染むようにカスタマイズするのが一般的です。
ここでは、よく見かける「虫眼鏡アイコン付き」の検索フォームを作成してみましょう。
虫眼鏡アイコン付きのデザイン
<form action="#" method="get" class="search-form">
<input type="search" name="search" placeholder="サイト内を検索" class="search-input">
<button type="submit" class="search-button">検索</button>
</form>
<style>
/* フォーム全体をFlexboxで横並びにする */
.search-form {
display: flex;
max-width: 400px; /* フォームの最大幅 */
border: 1px solid #ccc;
border-radius: 25px; /* 丸みをつける */
overflow: hidden; /* 角丸からはみ出ないように */
}
/* 入力エリア */
.search-input {
flex: 1; /* 余白を埋める */
border: none;
padding: 10px 15px;
font-size: 16px;
outline: none; /* フォーカス時の枠線を消す */
}
/* 検索ボタン */
.search-button {
background-color: #333;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}
.search-button:hover {
background-color: #555;
}
</style>
このデザインでは、フォーム全体（.search-form）に枠線と角丸を設定し、その中に「入力欄」と「ボタン」を収めるスタイルを採用しています。
display: flex を指定することで、入力欄とボタンを綺麗に横並びにし、.search-input に flex: 1 を指定して、ボタン以外のスペースいっぱいに広がるように調整しています。
また、<input> タグや <button> タグにはデフォルトの枠線（border）が付いているため、これらを border: none でリセットすることで、一体感のあるデザインに仕上げています。
overflow: hidden を親要素に指定しているのは、子要素の背景色が角丸からはみ出すのを防ぐためです。
複数条件（絞り込み）で検索できるフォームの作り方
ECサイトや不動産サイトのように、「キーワード」だけでなく「カテゴリ」や「価格帯」などで絞り込んで検索したい場合もあります。
その場合は、<select> タグやラジオボタンを組み合わせてフォームを作成します。
カテゴリ選択付きの検索フォーム
<form action="/item-search" method="get" class="advanced-search">
<!-- カテゴリ選択 -->
<select name="category">
<option value="">すべてのカテゴリ</option>
<option value="electronics">家電</option>
<option value="fashion">ファッション</option>
<option value="books">本・書籍</option>
</select>
<!-- キーワード入力 -->
<input type="search" name="keyword" placeholder="商品名を入力">
<button type="submit">検索</button>
</form>
複数の条件で検索する場合も、基本は同じ <form> タグの中に要素を追加していくだけです。
ここでは <select> タグを使ってドロップダウンリストを作成しています。
重要なのは各要素の name 属性です。
例えば、カテゴリで「家電（electronics）」を選び、キーワードに「冷蔵庫」と入力して送信すると、URLは /item-search?category=electronics&keyword=冷蔵庫 のようになります。
サーバー側（システム側）は、このURLパラメータを受け取って、「カテゴリが家電、かつ、商品名に冷蔵庫を含む」データをデータベースから探して表示する処理を行います。
HTML側では、このように「適切な名前を付けてデータを送る準備」までを担当します。
検索フォームを実際に動かす仕組み（データベース連携）
ここまでHTMLとCSSでの「見た目」と「送信の仕組み」を作りましたが、HTMLだけでは「実際にデータを検索して結果を表示する」ことはできません。
入力されたキーワードを元に、記事や商品を探し出すには、バックエンド（サーバーサイド）の仕組みが必要です。
主な実装パターンは以下の3つです。
1. WordPressなどのCMS機能を使う
WordPressを使用している場合、検索機能は標準で用意されています。
<form> の action 属性をトップページ（/）に設定し、入力欄の name 属性を s にするだけで、自動的にサイト内検索が機能します。
<!-- WordPress用の検索フォーム -->
<form action="/" method="get">
<input type="search" name="s" placeholder="検索...">
<button type="submit">検索</button>
</form>
2. Googleカスタム検索を利用する
自前でシステムを持たなくても、Googleの検索エンジンを使って自分のサイト内を検索させる機能（Googleプログラム可能な検索エンジン）を導入することができます。
Googleから提供される専用のコードをHTMLに貼り付けるだけで、高精度な検索機能を利用できます。
デザインの自由度は下がりますが、導入のハードルは最も低いです。
3. PHPやデータベースで自作する
完全オリジナルの検索システムを作る場合は、PHPやPythonなどのプログラミング言語と、MySQLなどのデータベースを使用します。
フォームから送信されたキーワード（$_GET['q'] など）を受け取り、SQLの WHERE 句を使って SELECT * FROM items WHERE name LIKE '%キーワード%' のようにデータベースに問い合わせを行い、その結果をHTMLとして表示させるプログラムを組む必要があります。
HTML/CSSのスキルを活かして年収を上げる方法
以上、HTMLでキャッシュ更新を強制する方法について解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
