Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/10/03 14:00

 本連載では、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)
図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)
図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)
図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)
図4 <input type="tel">iPhoneでの表示(sample.html)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

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

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:CSSで作るWeb用パーツ

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5