デザインサンプルで学ぶCSSによるスタイリング～「フォーム（検索ボックス）」編

CSSで作るWeb用パーツ（5）

　本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。本記事では、HTML5で追加されるフォーム関連の機能を一部抜粋して紹介し、それらをスタイリングするコツを紹介します。今回は検索ボックスのサンプルを3つ紹介します。

対象読者

• （X）HTMLとCSSの基本を理解している方。
• デザインのコツを学びたい方。

必要な環境

　本連載で動作確認を行ったブラウザは次のとおりです。

• Windows 7 Internet Explorer 11（以下IE 11）
• Windows 7 Firefox 29
• Windows 7 Chrome 35

フラットデザインの検索ボックス

　まずは図1のようなフラットデザインの検索ボックスをスタイリングしてみましょう。なお、図のキャプションに併記しているファイル名は、対応する記事に添付しているサンプルファイルを表しています（以下同様）。

図1　フラットデザインの検索ボックス（sample01.html）

　入力欄のフォーカス時や、ボタンにカーソルが乗るとスタイルが変化し、薄い色になります。

図2　フォーカス時、ホバー時のスタイル（sample01.html）

HTML5でマークアップ

　コードはHTML5で書いたもので、form要素の中に入力欄と送信ボタンのinput要素を置いたシンプルなコードになっています。HTML5では、action属性がform要素の必須属性ではなくなったので省略しています。またform直下には原則としてブロックレベル要素を配置する必要がありましたが、HTML5ではそのような制約がなくなったので、form直下にinput要素を配置しています。

　1つ目のinput要素はtype属性の値にHTHL5で新しく追加された検索テキストの入力欄を作成できるsearchを指定しました。2つ目のinput要素のtype属性はimageとし、幅と高さが40pxのボタン画像（search01.png）を指定しています。

リスト1　フラットデザインの検索ボックス／HTML（sample01.html）

<form>
<input type="search" class="text">
<input type="image" value="検索" src="search01.png">
</form>

positionプロパティで配置する

　まず、入力欄とボタンの高さを揃えるため、それぞれ上下のパディングは付けずにボタン画像と同じ高さの40pxを指定します。入力欄の幅は200pxで、左右パディングは各10pxずつ付けています。

　入力欄の右端とボタンの左端をぴったり揃えていますが、これらは親要素のformを基準位置として絶対配置をしています。form要素にposition:relative;を指定して基準位置とします。その上で、それぞれのinput要素にはposition:absolute;を指定して、topやleftプロパティで絶対配置します。入力欄は、フォームの左上でそろえるため、top:0、left:0を指定、ボタンはフォームの左から「入力欄の幅200px+左パディング10px+右パディング10px=220px」となるので、left:220px;を指定します。また、デフォルトスタイルでformやinput要素にマージンが設定されていると、ぴったり重ねることができないので、リセットしておきます。

リスト2　フラットデザインの検索ボックス／CSS（sample01.html）

form, input {
  margin: 0; /* マージンをリセット */
}
form {
  position: relative; /* 基準位置とする */
}
input[type="search"] {
  background-color: #fbd7a2;
  border: 0;
  height: 40px; /* 高さ40px */
  width: 200px;
  padding: 0 10px; 
  position: absolute; /* 絶対配置 */
  left: 0;
  top: 0; 
}
input[type="image"] {
  border: 0;
  padding: 0;
  width: 40px;
  height: 40px; /* 高さ40px */
  position: absolute; /* 絶対配置 */
  left: 220px; /* 左から220px */
  top: 0;
}

入力欄の幅と高さの算出方法を統一する

　ここまででIE 11やFirefox 29では意図したように表示されるのですが、Chrome 35では、図3のように入力欄とボタンの間に20pxの余白ができてしまいます。これはChromeが入力欄の幅をpaddingを含めて200px幅になるよう算出しているためです。

図3　Chromeで表示（sample01a.html）

　そこでCSS3のbox-sizingプロパティを使います。box-sizingはボックスサイズの算出方法を指定するプロパティで、初期値はパディングやボーダーを幅と高さに含めない「content-box」となっています。Chromeでは検索テキスト入力欄のbox-sizingがパディングやボーダーを高さに含める「border-box」になっています。

box-sizingプロパティ

値	意味
content-box	パディングとボーダーを幅と高さに含めない（初期値）
border-box	パディングとボーダーを幅と高さに含める
inherit	親要素の値を継承する

　そこで次のように「box-sizing: content-box;」を指定すると、Chromeでも入力欄とボタンの間隔が隙間なく表示されます。

リスト3　ボックスの幅と高さの算出方法を統一する／CSS（sample01.html）

input[type="search"] {
  ～中略～
  box-sizing: content-box; /* 幅にパディングを含めない */
}

フォーカス時とホバー時のスタイルを指定

　続いて入力欄のフォーカス時とボタンのホバー時に半透明のスタイルを指定して完成です。opacityプロパティは要素全体を透過するのに対し、rgba()は背景やボーダーのみを透過します。入力欄のテキストは透過させたくないのでrgba()を使い、ボタンにはopacityプロパティを使いました。

リスト4　フォーカス時とホバー時のスタイルを指定／CSS（sample01.html）

input[type="search"]:focus {
  background:rgba(251,215,162,0.5); /* 背景色を半透明に */
}
input[type="image"]:hover {
  opacity: 0.5; /* ボックスを半透明に */
}