サイト内検索 html css

サイト内検索を実装するためのHTMLとCSS

この文章では、Webサイト内での検索機能を実装するためのHTMLとCSSの基本的な技術について解説しています。具体的には、検索フォームの作成方法やスタイルの適用方法について詳しく説明しています。

サイト内検索の標準版とhtmlで自作するカスタマイズした検索窓

Webサイトに検索機能を追加したいと思ったことはありませんか？

ユーザーが求める情報をスムーズに見つけられるように、検索窓はWebサイトにとって非常に重要な要素です。

この記事では、HTMLを使って検索窓を作成する方法を、3つのパターンに分けて解説します。シンプルな標準的な検索窓から、画像を使ったカスタマイズ検索窓、さらにはGoogle検索窓まで、作成に必要なコードとそれぞれの要素の解説を詳しくご紹介します。

1. 標準的なサイト内検索窓

まずは、HTMLで最も基本的なサイト内検索窓を作成する方法を紹介します。

以下のコードをHTMLファイルに貼り付けるだけで、シンプルな検索窓が完成します。

<form action="#" method="post">
  <input type="search" name="search" placeholder="キーワードを入力">
  <input type="submit" name="submit" value="検索">
</form>

このコードでは、検索キーワードを入力するためのテキストフィールドと「検索」ボタンを表示します。

それぞれの要素と属性について詳しく見ていきましょう。

<form>要素: フォーム全体を定義する要素です。

action="#": フォームデータの送信先URLを指定します。#は、現在のページ自身を表すため、この設定ではフォーム送信後もページ遷移は起こりません。実際には、検索を実行するサーバーサイドのプログラムのURLを指定します。

method="post": フォームデータの送信方法を指定します。postメソッドは、データをURLに表示せずにサーバーに送信するため、セキュリティ上、getメソッドよりも安全です。

<input type="search">要素: 検索キーワードを入力するためのテキストフィールドを作成します。

name="search": この入力フィールドに"search"という名前を付けます。サーバーサイドでデータを受け取る際に、この名前で識別されます。

placeholder="キーワードを入力": テキストフィールド内に、薄いグレーで「キーワードを入力」というヒントを表示します。ユーザーが入力開始すると、このヒントは消えます。

<input type="submit">要素: フォームを送信するためのボタンを作成します。

name="submit": この送信ボタンに"submit"という名前を付けます。

value="検索": ボタンに表示するテキストを「検索」に設定します。

2. 自作するサイト内検索窓

標準的な検索窓もいいですが、サイトのデザインに合わせてカスタマイズしたい場合もあるでしょう。ここでは、画像を使った検索ボタンと、複数行のテキスト入力欄を追加した、より自由度の高い検索窓を作成する方法を解説します。

<form action="#" method="post">
  <div id="box">
    <input type="text" name="smp_text" placeholder="キーワードを入力" id="headerSearchText">
    <input type="image" name="smp_name" src="https://drive.google.com/uc?export=view&id=1qyh3SwKQK9922MjChea6ZsmoKqOEPc5i" alt="検索" id="headerImage">
  </div>
  <textarea cols="70" rows="4" name="smp_textarea" maxlength="255" placeholder="テキスト入力"></textarea>
</form>

<style>
#box{
  position:relative;
  top:0px;
  left:0px;
  padding-bottom:10px;
}
#headerSearchText{
  line-height:30px;
  padding-left:10px;
  padding-right:28px;
}
#headerImage{
  width:20px;
  position:absolute;
  top:10px;
  left:180px;
}
</style>

このコードでは、<div>要素で検索テキストフィールドと画像ボタンを囲み、CSSを使って画像ボタンをテキストフィールド内に配置しています。また、<textarea>要素で複数行のテキスト入力欄を追加しています。

それぞれの要素と属性、そしてCSSの設定について詳しく見ていきましょう。

<div id="box">:

検索テキストフィールドと画像ボタンをまとめて配置するための<div>要素です。

id="box": 後ほどCSSでスタイルを適用するために、"box"というIDを指定しています。

<input type="text">:

検索キーワードを入力するためのテキストフィールドです。

name="smp_text": サーバーサイドでデータを受け取る際に、この名前で識別されます。

placeholder="キーワードを入力": テキストフィールド内に、薄いグレーで「キーワードを入力」というヒントを表示します。

id="headerSearchText": 後ほどCSSでスタイルを適用するために、"headerSearchText"というIDを指定しています。

<input type="image">:

画像を検索ボタンとして使用するための要素です。クリックすると、フォームが送信されます。

name="smp_name": サーバーサイドでデータを受け取る際に、この名前で識別されます。

src="https://drive.google.com/uc?export=view&id=1qyh3SwKQK9922MjChea6ZsmoKqOEPc5i": 表示する画像のURLを指定します。任意の画像に変更可能です。

alt="検索": 画像が表示できない場合に表示される代替テキストです。

id="headerImage": 後ほどCSSでスタイルを適用するために、"headerImage"というIDを指定しています。

<textarea>要素:

複数行のテキストを入力するための要素です。ここでは、検索窓に追加情報を入力したい場合などを想定して使用しています。

cols="70": テキストエリアの横幅を70文字分に設定します。

rows="4": テキストエリアの高さを4行分に設定します。

name="smp_textarea": サーバーサイドでデータを受け取る際に、この名前で識別されます。

maxlength="255": 入力できる最大文字数を255文字に制限します。

placeholder="テキスト入力": テキストエリア内に、薄いグレーで「テキスト入力」というヒントを表示します。

CSSの設定:

#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検索窓

最後に、Googleのサイト内検索窓を参考に、外部サイトの検索機能を利用する検索窓を作成する方法を紹介します。

<form method="get" action="http://www.google.co.jp/search">
<table bgcolor="#FFFFFF"><tr><td>
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"></a>
<input type="text" name="q" size="31" maxlength="255" value="">
<input type="hidden" name="ie" value="Shift_JIS">
<input type="hidden" name="oe" value="Shift_JIS">
<input type="hidden" name="hl" value="ja">
<input type="submit" name="btnG" value="Google 検索">
</td></tr></table>
</form>

このコードでは、<form>要素のaction属性にGoogleの検索URLを指定し、method属性にgetメソッドを指定することで、Google検索を実行できるようにしています。

各要素と属性について詳しく見ていきましょう。

<form method="get" action="http://www.google.co.jp/search">:

フォーム全体を定義します。

method="get": フォームデータの送信方法をgetメソッドに設定します。Google検索ではgetメソッドが使用されます。

action="http://www.google.co.jp/search": フォームの送信先URLをGoogleの検索URLに設定します。

<a href="http://www.google.co.jp/"> <img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"></a>:

Googleのロゴ画像へのリンクを作成します。クリックするとGoogleのトップページに遷移します。

align="absmiddle": ロゴ画像をテキストの中央に配置します。

<input type="text" name="q" size="31" maxlength="255" value="">:

検索キーワードを入力するためのテキストフィールドです。

name="q": Google検索では、検索キーワードを"q"という名前で受け取ります。

size="31": テキストフィールドの表示幅を31文字分に設定します。

maxlength="255": 入力できる最大文字数を255文字に制限します。

<input type="hidden" ...>要素:

ユーザーには見えない形で、追加情報をサーバーに送信するための要素です。

name="ie" value="Shift_JIS": Googleが受け取る文字コードを"Shift_JIS"に設定します。

name="oe" value="Shift_JIS": 検索結果を出力する文字コードを"Shift_JIS"に設定します。

name="hl" value="ja": 検索結果を日本語で表示するように設定します。

<input type="submit" name="btnG" value="Google 検索">:

フォームを送信するためのボタンです。クリックすると、Google検索が実行されます。

value="Google 検索": ボタンに表示するテキストを「Google 検索」に設定します。

4. まとめ

この記事では、HTMLを使って検索窓を作成する3つの方法を紹介しました。

標準的なサイト内検索窓: シンプルなテキストフィールドと送信ボタンを持つ基本的な検索窓。

自作するサイト内検索窓: 画像を使った検索ボタンや複数行のテキスト入力欄など、カスタマイズ性の高い検索窓。

標準的なGoogle検索窓: Googleの検索エンジンを利用する検索窓。

それぞれの方法を理解し、ご自身のWebサイトに最適な検索窓を実装してください。

Q&A

Q: 検索フォームのアクションは何ですか？: A: 検索フォームのアクションは、ユーザーが検索を実行したときにデータを送信するURLです。この例では、search.phpが示されています。
Q: CSSでフォームをどのように改善できますか？: A: CSSを使用してボタンの色やサイズ、ホバー効果などを調整し、より魅力的なデザインにすることができます。
Q: ヒントとプレースホルダの違いは何ですか？: A: ヒントは、ユーザーが入力を始めたときに消えるテキストであり、プレースホルダは、空の入力フィールドに表示されるガイダンステキストです。

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