CodeZine(コードジン)

特集ページ一覧

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

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

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

フォームパーツのスタイリング

 背景が完成したので、次は中身をスタイリングしていきましょう。

Webフォントでテキストをスタイリング

 見出しのContact Usや、ラベルのName、E-mail、Phone、Message、送信ボタンのSend Messageなどのテキストは「Google Fonts」を利用してスタイリングしています。

 使い方は簡単です。まず、Google Fontsで使いたいフォントを選び、提供されるコードを貼り付けます。見出しとラベルには、Special Eliteというフォントを選びました。

リスト10 Google Fontsで「Special Elite」を利用/HTML(sample.html)
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>

 送信ボタンには、Shadows Into Lightというフォントを選びました。複数のフォントを指定する場合には、|でフォントを区切って指定します。

リスト11 Google Fontsで「Special Elite」と「Shadows Into Light」を利用/HTML(sample.html)
<link href='http://fonts.googleapis.com/css?family=Special+Elite|Shadows+Into+Light' rel='stylesheet' type='text/css'>

 続いて、見出し、ラベル、送信ボタンなどに、font-familyプロパティでフォントを指定するだけです。

リスト12 見出しとラベルにSpecial Elite、送信ボタンにShadows Into Lightを指定/CSS(sample.html)
h1, label {
  font-family: 'Special Elite', cursive;
}
p#submit input {
  font-family: 'Shadows Into Light', cursive;
  ~中略~
}

 これで、Webフォントを適用することができました。

図7 Webフォントの適用(sample.html)
図7 Webフォントの適用(sample.html)

ラベルのスタイリング

 ラベルは、右揃えにしたいので、まずは幅を指定して、text-align:rightで右揃えにしたいところですが、label要素はインライン要素なので幅を指定できません。

図8 ラベルがinlineの時(デフォルト)(sample.html)
図8 ラベルがinlineの時(デフォルト)(sample.html)

 だからといってdisplay:block;でブロックレベル要素にしてしまうと、改行されてしまい、後に続く入力欄が横並びにならずに、表示が崩れてしまいます。

図9 ラベルがdisplay:block;の時(sample.html)
図9 ラベルがdisplay:block;の時(sample.html)

 そこで、display:inline-blockを指定します。これでインライン要素でありながら幅を持つことができます。ここでは、min-width: 100px;として最小幅100pxで指定しました。

リスト13 ラベルにdisplay: inline-block;を指定/CSS(sample.html)
label {
  font-size: 18px;
  color: #600; 
  display: inline-block;
  min-width: 100px;
  padding: 0 10px;
  text-align: right;
  vertical-align: top;
}
図10 ラベルがdisplay:inline-block;の時(sample.html)
図10 ラベルがdisplay:inline-block;の時(sample.html)

テキスト入力欄のスタイリング

 テキスト入力欄は、淡い黄色の背景色を指定し、下ボーダーに破線を指定しています。セレクタにinput:not([type="submit"])とすることで、type属性がsubmitではないinput要素に絞ることができます。

リスト14 入力欄に背景色と下線を指定/CSS(sample.html)
input:not([type="submit"]), textarea {
  background: rgba(255,255,204,0.8);
  border-bottom: 1px dashed #999999;
  ~中略~
}
図11 テキスト入力欄のスタイル(sample.html)
図11 テキスト入力欄のスタイル(sample.html)

送信ボタンの装飾

 送信ボタンは、封筒から紙がはみ出しているようにスタイリングしたいので、絶対配置をします。まずは送信ボタンの親のp#submitにposition: relative;を指定して基準位置を決め、続いて、送信ボタンにposition: absolute;を指定して、top:-40pxで上から-40px、right: -80pxで右から-80pxに配置しています。最後にtransform: rotate(3deg);で少し斜めに回転させて完成です。

p#submit {
  position: relative; /* 基準位置を指定 */
}
p#submit input {
  font-family: 'Shadows Into Light', cursive;
  width: 180px;
  padding: 6px 10px;
  border: 0;
  position: absolute; /* 絶対配置 */
  top: -40px;
  right: -80px;
  background: #efef93;
  box-shadow: 0 2px 6px #666;
  transform: rotate(3deg); /* 回転 */
  font-size: 24px;
  color: #600;
}
図12 完成(sample.html)
図12 完成(sample.html)

まとめ

 今回は、フォーム部品を組み合わせたお問い合わせフォームのスタイリングを紹介しました。CSS3を使うと表現の幅が広がります。次回は実務でよく使われる画像とテキストのスタイリング方法を紹介します。



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

バックナンバー

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

もっと読む

著者プロフィール

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

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

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

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

あなたにオススメ

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