フォームパーツのスタイリング
背景が完成したので、次は中身をスタイリングしていきましょう。
Webフォントでテキストをスタイリング
見出しのContact Usや、ラベルのName、E-mail、Phone、Message、送信ボタンのSend Messageなどのテキストは「Google Fonts」を利用してスタイリングしています。
使い方は簡単です。まず、Google Fontsで使いたいフォントを選び、提供されるコードを貼り付けます。見出しとラベルには、Special Eliteというフォントを選びました。
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
送信ボタンには、Shadows Into Lightというフォントを選びました。複数のフォントを指定する場合には、|でフォントを区切って指定します。
<link href='http://fonts.googleapis.com/css?family=Special+Elite|Shadows+Into+Light' rel='stylesheet' type='text/css'>
続いて、見出し、ラベル、送信ボタンなどに、font-familyプロパティでフォントを指定するだけです。
h1, label { font-family: 'Special Elite', cursive; } p#submit input { font-family: 'Shadows Into Light', cursive; ~中略~ }
これで、Webフォントを適用することができました。
ラベルのスタイリング
ラベルは、右揃えにしたいので、まずは幅を指定して、text-align:rightで右揃えにしたいところですが、label要素はインライン要素なので幅を指定できません。
だからといってdisplay:block;でブロックレベル要素にしてしまうと、改行されてしまい、後に続く入力欄が横並びにならずに、表示が崩れてしまいます。
そこで、display:inline-blockを指定します。これでインライン要素でありながら幅を持つことができます。ここでは、min-width: 100px;として最小幅100pxで指定しました。
label { font-size: 18px; color: #600; display: inline-block; min-width: 100px; padding: 0 10px; text-align: right; vertical-align: top; }
テキスト入力欄のスタイリング
テキスト入力欄は、淡い黄色の背景色を指定し、下ボーダーに破線を指定しています。セレクタにinput:not([type="submit"])とすることで、type属性がsubmitではないinput要素に絞ることができます。
input:not([type="submit"]), textarea { background: rgba(255,255,204,0.8); border-bottom: 1px dashed #999999; ~中略~ }
送信ボタンの装飾
送信ボタンは、封筒から紙がはみ出しているようにスタイリングしたいので、絶対配置をします。まずは送信ボタンの親の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; }
まとめ
今回は、フォーム部品を組み合わせたお問い合わせフォームのスタイリングを紹介しました。CSS3を使うと表現の幅が広がります。次回は実務でよく使われる画像とテキストのスタイリング方法を紹介します。