CSSレイアウト

複雑な応用型レイアウト

search (検索フォーム)

今度は、検索フォームを作ってみましょう。

Yahoo! の検索検索フォームの解説に使用するHTML, CSSをまとめました。ZIPで圧縮してあります。Yahoo! 検索フォーム

Yahoo! 検索フォーム

まずは、検索フォームのHTMLを考えます。まずは、必要なもののリストアップから。

  • フォーム（背景画像がある部分）
  • 検索ワードのテキストボックス
  • 画像ボタン ×２
  • 「検索オプション」というリンク

以上です。（今回は、検索メニュー という文字については無視してしまいます。）

複雑なフォームでは、よくテーブルを使用してアイテムを並べていくことを行いますが、今回のようなフォームでは、その必要はないでしょう。もっとシンプルに考えていきます。

・・・そうそう、このホームページでは、いわゆる普通のホームページを作成できるように、というコンセプトの元で作られているため、あえて滅多に使用しないフォーム関連のタグの説明は行っていません。必要になるころには、既にHTMLのほとんどの使い方を覚えた後で、そのときになったら自分で調べてみればいいのです。

・・・でも、今回は多少フォーム関連のタグを知らないとHTMLが書けないので、ちょっとだけ触れておきます。

まずは、formというタグを紹介しておきます。

form要素は、フォームの開始～フォームの終了を明示するために使用します。

<form>
  ～～～
  ～～～
  ～～～
</form>

テキストボックス・画像ボタンはこのタグの中に配置することになります。

テキストボックスと画像ボタンの説明に移ります。実は、テキストボックスと画像ボタンは同じタグで作成することが出来ます。

inputというタグは、type属性の値によって、テキストボックスや画像ボタンになったりします。また、それだけでなく、チェックボックスやラジオボタンなどもこのタグで作成することが出来ます。

今回必要なテキストボックスにはtype="text"を、画像ボタンにはtype="image"を指定します。

また、画像ボタンの場合は img要素 と同じように、alt属性で代替文字列を指定します。また、画像ファイルの指定も同じようにsrc属性で指定します。

次に、fieldsetというタグを紹介します。このタグは、フォームアイテム（input要素など）の集まりを意味ごとにグループ化するために使用します。また、枠を表示することでグループを明らかにすることができます。（スクリーンショット参照）

では、form, input, fieldset を使用した簡単な一例を。

<form>
  <fieldset>
    <p>あなたが現在飼っているペットは？</p>
    <input type="checkbox" />犬<br />
    <input type="checkbox" />猫<br />
    <input type="checkbox" />その他<br />
    <input type="submit" value="送信" />
  </fieldset>
</form>

表示結果

では、今回の場合を考えてみます。・・・と言っても、それほど難しくはないので、いきなりソースコードへ。基本的なソースは以下の通りです。ZIPファイル内のsearch1.htmlもご覧ください。

<form>
  <fieldset>
    <input type="text" />
    <input type="image" src="../images/search_default.png" alt="検索" />
    <input type="image" src="../images/search_dict.png" alt="辞書" /><br />
    <a href="#">検索オプション</a>
  </fieldset>
</form>

表示結果 Yahoo!検索フォーム（search1.html）

では、次はCSSで飾り付けを。やるべきことをリストアップしましょう。

  • fieldsetのボーダーを消す
  • フォームの高さを指定する
  • 背景画像を表示させる
  • その他微調整。。。

では、CSSでレイアウトする際に必要な class, id を追加します。ヘッダー部の時と同じように、baseを用意します。また、left-column と right-column も用意しておきましょう。

ソースコードは以下のようになります。ZIPファイル内のsearch2.htmlもご覧ください。

<div id="base">
  <div id="left-column">
      <form id="search">
        <fieldset>
          <input type="text" class="words" />
          <input type="image" src="../images/search_default.png" alt="検索" />
          <input type="image" src="../images/search_dict.png" alt="辞書" /><br />
          <a href="#">検索オプション</a>
        </fieldset>
      </form>
  </div>
  <div id="right-column">
  </div>
</div>

必要なタグ, class, idを追加したところで、それぞれの幅、高さを確認しておきましょう。

base
幅 : 705px
left-column
幅 : 480px
right-column
幅 : 220px
search
高さ : 57px

では、CSSを書いていきます。まずは、base, left-column, right-column, search の大きさ、回りこみ等を指定してしまいます。分かりやすいように、それぞれにはボーダーを表示しておくと良いでしょう。ZIPファイル内のsearch2.cssもご覧ください。

* { padding: 0; margin: 0; }
body {
  text-align: center;
}
#base {
  width: 705px;
  text-align: left;
  margin: 10px auto;
}
#left-column {
  width: 480px;
  float: left;
}
#right-column {
  width: 220px;
  float: right;
}
#search {
  height: 57px;
}
#base,
#left-column,
#right-column {
  border: 1px solid #ccc;
}

表示結果 Yahoo!検索フォーム（search2.html）

次は、fieldsetのボーダーを消して、searchの背景画像を指定します。また、search内の文字列を中央表示にし、文字の大きさを80%にします。（文字の大きさについては、body要素へ指定しておきます。）

CSSの追加部分は以下の通りです。ZIPファイル内のsearch3.cssもご覧ください。

body{
  font-size: 80%;
}
#search {
  background: url("images/search_form.png") repeat-x scroll;
}
#search fieldset {
  border: none;
  text-align: center;
}

表示結果 Yahoo!検索フォーム（search3.html）

あともうチョットです。上のスクリーンショットを見れば気がつきますが、

  • 検索ワードのテキストボックスが短い
  • テキストボックスやボタンが上の方にある
  • テキストボックスのボーダーの色が気になる（？）

の３つを修正しましょう。これらは、テキストボックス（words）の幅とボーダーとマージンを設定することで解決します。数値は以下の通りとします。

words
幅 : 280px
ボーダー : 1px solid #707070
上マージン : 10px
下マージン : 5px

ということで、CSSの追加部分は以下のようになります。ZIPファイル内のsearch4.cssもご覧ください。（base, left-column, right-column のボーダーは消しておきます。）

#search .words {
  border: 1px solid #707070;
  width: 280px;
  margin-top: 10px;
  margin-bottom: 5px;
}

表示結果 Yahoo!検索フォーム（search4.html）

これで、検索フォームの部分は完成です。・・・検索フォームは結構簡単でしたね(^o^)