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

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

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

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

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）

ラベルのスタイリング

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

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

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

図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）

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

　テキスト入力欄は、淡い黄色の背景色を指定し、下ボーダーに破線を指定しています。セレクタに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）

送信ボタンの装飾

　送信ボタンは、封筒から紙がはみ出しているようにスタイリングしたいので、絶対配置をします。まずは送信ボタンの親の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）

まとめ

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