デザインサンプルで学ぶCSSによるスタイリング～「フォーム（お問い合わせフォーム）」編

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

　本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。本記事では、これまで紹介したフォームパーツを組み合わせたエアメール風のお問い合わせフォームをスタイリングする方法を紹介します。

対象読者

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

必要な環境

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

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

エアメール風デザインのお問い合わせフォーム

　今回は、図1のようなエアメール風デザインのお問い合わせフォームをCSSでスタイリングする方法を紹介します。

図1　エアメール風デザインのお問い合わせフォーム（sample.html）

フォーム全体のマークアップ

　まずはフォーム全体のマークアップを確認しましょう。HTML5で書いたもので、p要素でlabel要素とinput要素を囲んだシンプルなコードです。赤と青の斜線を表現するために、全体をdivで囲み、sampleというID名を付けています。また、最後のp要素は送信ボタンを紙のように装飾するため、ここにもsubmitというID名を付けました。

リスト1　エアメール風デザインのお問い合わせフォーム／HTML（radio.html）

<div id="sample">
  <form>
    <h1>Contact Us</h1>
    <p>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" required="required">
    </p>
    <p>
      <label for="mail">E-mail</label>
      <input type="email" name="mail" id="mail" required="required">
    </p>
    <p>
      <label for="tel">Phone</label>
      <input type="tel" name="tel" id="tel" required="required">
    </p>
    <p>
      <label for="message">Message</label>
      <textarea name="message" id="message" required="required"></textarea>
    </p>
    <p id="submit"><input type="submit" value="Send Message"></p>
  </form>
</div>

required属性で必須項目を指定

　HTML5では、入力必須、妥当性のチェック、入力補助など、これまでJavaScriptで作成されることの多かったフォームに関する機能をHTMLで指定することができます。ただし、これらのチェックは未対応ブラウザによっては働きませんし、JavaScriptをほとんど用いずに入力値チェックが可能になったとしても、サーバー側でのチェックが不要になるわけではありませんので使用の際には気を付けましょう。

　サンプルでは、入力必須の指定にHTML5で追加されたrequired属性を使っています。

リスト2　必須項目の指定／HTML（sample.html）

<p>
  <label for="name">Name</label>
  <input type="text" name="name" id="name" required="required">
</p>

　図2のように、required属性をサポートしている一般的なブラウザで値が空のまま送信ボタンを押すと、注意を促す表示が出てPOSTできなくなります。

図2　input要素のrequired属性（sample.html）

<input type="email">

　HTML5では、input要素のtype属性に新しい値が多数追加されました。

HTML5で追加されたinput要素のtype属性の値

値	説明
email	メールアドレス
url	URL
search	検索テキスト
tel	電話番号
date	日付
datetime	UTC（協定世界時）による日時
datetime-local	UTC（協定世界時）によらないローカル日時
month	月
week	週
time	時間
month	月
week	週
time	時間
number	数値
range	大まかな数値
color	色

　サンプルでは、type属性の値にemailを指定しメールアドレス入力欄を作成しています。

リスト3　メールアドレス入力欄／HTML（sample.html）

<p>
  <label for="mail">E-mail</label>
  <input type="email" name="mail" id="mail" required="required">
</p>

　図3のように、type="email"をサポートしている一般的なブラウザでは、メールアドレス以外の内容を入力して送信しようとするとエラーが表示されます。

図3　<input type="email">（sample.html）

<input type="tel">

　input要素のtype属性の値にtelを指定すると、電話番号入力欄を作成できます。こちらもHTML5で追加された値です。

リスト4　電話番号入力欄／HTML（sample.html）

<p>
  <label for="tel">Phone</label>
  <input type="tel" name="tel" id="tel" required="required">
</p>

　type="email"のように、入力形式が決まっているわけではなく、type="text"と同じような動作になりますが、スマホ／タブレットなどのソフトウェアキーボードがある環境によっては、キーボードがテンキーになります。

図4　<input type="tel">iPhoneでの表示（sample.html）