サイト内検索を実装するためのHTMLとCSS
Webサイトに検索機能を追加したいと思ったことはありませんか？ ユーザーが求める情報をスムーズに見つけられるように、検索窓はWebサイトにとって非常に重要な要素です。 この記事では、HTMLを使って検索窓を作成する方法を、3つのパターンに分けて解説します。シンプルな標準的な検索窓から、画像を使ったカスタマイズ検索窓、さらにはGoogle検索窓まで、作成に必要なコードとそれぞれの要素の解説を詳しくご紹介します。
1. 標準的なサイト内検索窓
まずは、HTMLで最も基本的なサイト内検索窓を作成する方法を紹介します。 以下のコードをHTMLファイルに貼り付けるだけで、シンプルな検索窓が完成します。- 要素: フォーム全体を定義する要素です。
- action="#" : フォームデータの送信先URLを指定します。 # は、現在のページ自身を表すため、この設定ではフォーム送信後もページ遷移は起こりません。実際には、検索を実行するサーバーサイドのプログラムのURLを指定します。
- method="post" : フォームデータの送信方法を指定します。 post メソッドは、データをURLに表示せずにサーバーに送信するため、セキュリティ上、 get メソッドよりも安全です。
- name="search" : この入力フィールドに"search"という名前を付けます。サーバーサイドでデータを受け取る際に、この名前で識別されます。
- placeholder="キーワードを入力" : テキストフィールド内に、薄いグレーで「キーワードを入力」というヒントを表示します。ユーザーが入力開始すると、このヒントは消えます。
- name="submit" : この送信ボタンに"submit"という名前を付けます。
- value="検索" : ボタンに表示するテキストを「検索」に設定します。
2. 自作するサイト内検索窓
#box < position:relative; top:0px; left:0px; padding-bottom:10px; >#headerSearchText < line-height:30px; padding-left:10px; padding-right:28px; >#headerImageこのコードでは、 要素で検索テキストフィールドと画像ボタンを囲み、CSSを使って画像ボタンをテキストフィールド内に配置しています。また、 要素で複数行のテキスト入力欄を追加しています。
- :
- 検索テキストフィールドと画像ボタンをまとめて配置するための 要素です。
- id="box" : 後ほどCSSでスタイルを適用するために、"box"というIDを指定しています。
- 検索キーワードを入力するためのテキストフィールドです。
- name="smp_text" : サーバーサイドでデータを受け取る際に、この名前で識別されます。
- placeholder="キーワードを入力" : テキストフィールド内に、薄いグレーで「キーワードを入力」というヒントを表示します。
- id="headerSearchText" : 後ほどCSSでスタイルを適用するために、"headerSearchText"というIDを指定しています。
- 画像を検索ボタンとして使用するための要素です。クリックすると、フォームが送信されます。
- name="smp_name" : サーバーサイドでデータを受け取る際に、この名前で識別されます。
- src="https://drive.google.com/uc?export=view&id=1qyh3SwKQK9922MjChea6ZsmoKqOEPc5i" : 表示する画像のURLを指定します。任意の画像に変更可能です。
- alt="検索" : 画像が表示できない場合に表示される代替テキストです。
- id="headerImage" : 後ほどCSSでスタイルを適用するために、"headerImage"というIDを指定しています。
- 複数行のテキストを入力するための要素です。ここでは、検索窓に追加情報を入力したい場合などを想定して使用しています。
- cols="70" : テキストエリアの横幅を70文字分に設定します。
- rows="4" : テキストエリアの高さを4行分に設定します。
- name="smp_textarea" : サーバーサイドでデータを受け取る際に、この名前で識別されます。
- maxlength="255" : 入力できる最大文字数を255文字に制限します。
- placeholder="テキスト入力" : テキストエリア内に、薄いグレーで「テキスト入力」というヒントを表示します。
- #box < position: relative; . >: #box 要素を基準とした相対的な位置指定を有効にします。これにより、子要素である画像ボタンを #box 要素内で自由に配置できます。
- #headerSearchText < line-height: 30px; . >: テキストフィールドの高さを30ピクセルに設定し、画像ボタンが収まるようにします。
- #headerImage < width: 20px; position: absolute; top: 10px; left: 180px; >: 画像ボタンの幅を20ピクセルに設定し、 #box 要素を基準とした絶対的な位置指定で配置します。 top と left の値を調整することで、画像ボタンの位置を細かく調整できます。
3. 標準的なGoogle検索窓
このコードでは、 要素の action 属性にGoogleの検索URLを指定し、 method 属性に get メソッドを指定することで、Google検索を実行できるようにしています。
- :
- フォーム全体を定義します。
- method="get" : フォームデータの送信方法を get メソッドに設定します。Google検索では get メソッドが使用されます。
- action="http://www.google.co.jp/search" : フォームの送信先URLをGoogleの検索URLに設定します。
- :
- Googleのロゴ画像へのリンクを作成します。クリックするとGoogleのトップページに遷移します。
- align="absmiddle" : ロゴ画像をテキストの中央に配置します。
- :
- 検索キーワードを入力するためのテキストフィールドです。
- name="q" : Google検索では、検索キーワードを"q"という名前で受け取ります。
- size="31" : テキストフィールドの表示幅を31文字分に設定します。
- maxlength="255" : 入力できる最大文字数を255文字に制限します。
- 要素:
- ユーザーには見えない形で、追加情報をサーバーに送信するための要素です。
- name="ie" value="Shift_JIS" : Googleが受け取る文字コードを"Shift_JIS"に設定します。
- name="oe" value="Shift_JIS" : 検索結果を出力する文字コードを"Shift_JIS"に設定します。
- name="hl" value="ja" : 検索結果を日本語で表示するように設定します。
- :
- フォームを送信するためのボタンです。クリックすると、Google検索が実行されます。
- value="Google 検索" : ボタンに表示するテキストを「Google 検索」に設定します。
4. まとめ
- 標準的なサイト内検索窓 : シンプルなテキストフィールドと送信ボタンを持つ基本的な検索窓。
- 自作するサイト内検索窓 : 画像を使った検索ボタンや複数行のテキスト入力欄など、カスタマイズ性の高い検索窓。
- 標準的なGoogle検索窓 : Googleの検索エンジンを利用する検索窓。
Q&A
Q: 検索フォームのアクションは何ですか？ A: 検索フォームのアクションは、ユーザーが検索を実行したときにデータを送信するURLです。この例では、search.phpが示されています。 Q: CSSでフォームをどのように改善できますか？ A: CSSを使用してボタンの色やサイズ、ホバー効果などを調整し、より魅力的なデザインにすることができます。 Q: ヒントとプレースホルダの違いは何ですか？ A: ヒントは、ユーザーが入力を始めたときに消えるテキストであり、プレースホルダは、空の入力フィールドに表示されるガイダンステキストです。
- HTML/CSS
- HTML テクノロジーチュートリアル
- CSSチュートリアル
- Bootstrapチュートリアル
- JavaScriptチュートリアル
- jQueryチュートリアル
- Front-end Frameworkチュートリアル
- ブロックチェーン技術チュートリアル
- computeチュートリアル
- Flux AI
- Flux Pro
- Dream Machine AI
- Free AI Face Swap