SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CSSで作るWeb用パーツ

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

CSSで作るWeb用パーツ(5)

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

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

必要な環境

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

  • Windows 7 Internet Explorer 11(以下IE 11)
  • Windows 7 Firefox 29
  • Windows 7 Chrome 35

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

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

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

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

図2 フォーカス時、ホバー時のスタイル(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)
図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; /* ボックスを半透明に */
}

次のページ
立体感のある検索ボックス

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
CSSで作るWeb用パーツ連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7888 2014/07/28 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング