CSS3とHTML５をフルに活用したコンタクトフォーム

今回のチュートリアルでは画像を使用せず、HTML5とCSS3だけでコンタクトフォームを作成する方法をご紹介していきたいと思います。その前に少々免責事項ですが、HTML5とCSS3はまだドラフト状態ですので、このチュートリアルの目的はあくまで「HTML5やCSS3を使うとこういうことが出来ますよ。」と一例をお見せすることに過ぎません。古いブラウザとの互換性の問題もありますし、もし本番でこの方法を使用する場合はご自身の責任でお願い致します。

さて、今回作成するのはシンプルなコンタクトフォームです。名前、メールアドレス、URL、件名、本文と言った基本的な情報をカバーしています。

そして文中のコードではベンダープリフィックスを省略していますが、デモページのソースコードは勿論ベンダープリフィックス入りなのでそちらでご確認いただけます。

HTML5の新フォーム要素

HTML5の仕様では、フォームの機能をさらに強化するような要素が沢山紹介されています。その中から今回のフォームで使用する要素をご紹介しますね。

• Input type = emailこちらは、ユーザーにEmailアドレスを入力してもらいたい時に使用します。HTML5をサポートしているブラウザなら、入力されたものがきちんとメールアドレスなのかどうか検出することが出来ます。
• Input type = urlユーザーが正確に有効なURLを入力したかどうか確認する為に使用します。
• Autocomplete = on attributeこちらはフォームや単一入力（single input）で使用することが可能で、「autocomplete = “on”」の場合にはユーザーがそれまでフォームへ入力した履歴を参照することが出来ます。
• Require = requiredこちらは入力必須項目に設定します。HTML5をサポートしているブラウザならば、ユーザーが全ての入力必須項目に記入するまではフォームを送信することが出来ないようにすることが出来ます。デフォルト設定では入力必須項目は事前に明示されていないので、Webデザイナーは視覚的な表示を追加する方がいいと思います。
• Placeholderこれは入力のヒントです。マウスで選択されていない状態の時は、この項目にどのような内容を入力したらいいのかサンプルを表示させることが出来ます。ユーザーがフィールドをクリックするとサンプルは消え、何も入力しないまま別のフィールドに移動すると再びサンプルが表示されます。

これで新しい要素への予備知識もバッチリだと思いますので、HTMLコードに移りましょう。

<div id="content">
	<h1> Contact me </h1>
	<form action=" " method="post"  autocomplete="on">
		<p>
			<label for="username" class="iconic user" > 名前 <span class="required">*</span></label>
			<input type="text" name="username" id="username"  required="required" placeholder="Hi friend, how may I call you ?"  />
		</p>
		<p>
			<label for="usermail" class="iconic mail-alt"> メールアドレス <span class="required">*</span></label>
			<input type="email" name="usermail" id="usermail" placeholder="I promise I hate spam as much as you do" required="required"  />
		</p>
		<p>
			<label for="usersite" class="iconic link"> ウェブサイト </label>
			<input type="url" name="usersite" id="usersite"  placeholder="e.g.: http://www.miste.com" />
		</p>
		<p>
			<label for="subject" class="iconic quote-alt"> 題名 </label>
			<input type="text" name="subject" id="subject"  placeholder="What would you like to talk about?" />
		</p>
		<p>
			<label for="message" class="iconic comment"> 本文  <span class="required">*</span></label>
			<textarea placeholder="Don't be shy, live me a friendly message and I'll answer as soon as possible "  required="required" ></textarea>
		</p>
		<p class="indication"><span class="required">*</span> 必須項目</p>
		<input type="submit" value=" ★  メール送信 !" />
	</form>
</div>

IDやクラスはそんなに使われていませんね。HTMLコードを出来るだけ減らして、その代わりにCSS3でフォームをスタイリングすることを目指しているからです。それと、HTML5のDOCTYPEを使用するのも忘れないようにしてくださいね！

ストライプ背景の作成

それではまずレイアウトからですが、フォームの背景を先に設定しましょう。ストライプのボーダーを作成するには「#content」だけスタイリングすれば大丈夫です。アイデアは極めてシンプルで、CSS3グラデーションを使ってこの要素全体にストライプの背景を設定しています。

#content{
position:relative;
margin:50px auto;
width:400px;
min-height:200px;
z-index:100;
padding:30px;
border:1px solid #383838;
background: #D1D1D1;
/* My stripped background */
background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px);
border-radius:8px;
box-shadow:0px 1px 6px #3F3F3F;
}

グラデーション部分はこのようにコーディングしています。
background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px);

これを文章で表現すると、こんな感じになります。
線状のグラデーションを45度の角度で作成し、1つ目のストライプはピンクで、0から30pxまでです。それから30から40pxまではグレーを加えます。その次のブルーは40から70pxまでです。70から80pxまで再びグレーを加えてお終いです。これを何度も繰り返します。これを実現するには、45度のストライプのグラデーションを、30px幅のピンクライン、10px幅のグレーライン、40px幅のブルーライン、10px幅のグレーラインで作成していると言うことです。

これでグラデーション背景は完成しました。けれど元々はボーダーを作る予定だったんですよね。このグラデーション背景をボーダーに変えてしまうには、背景の上に新しいコンテナを乗せてしまえばいいだけです。あんまり不要なSPANタグやIDタグは追加したくないので疑似要素の「class :after」を使いましょう。

/** my "fake" background that will hover the stripes **/
#content:after{
background:#F9F9F9;
margin:10px;
position: absolute;
content : " ";
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: -1;
border:1px #E5E5E5 solid;
border-radius:8px;
}

ボーダー幅はこのafter要素のマージンで設定しています。フォームのコンテンツがきちんと内側に収まるように、「#content」の方に充分なパディングを設定するのを忘れないようにしましょうね。

H1タグとテキストのスタイリング

H1タグにはQuestrialフォント、ボディ部分にはDroid Sansフォントを適用しています。アンパサンド（＆）はAliceフォントです。これらの書体はGoogleのフォントディレクトリのフォントなので、ヘッダーに以下のようにGoogle font apiコードを加えるだけです。

<link href='http://fonts.googleapis.com/css?family=Questrial|Droid+Sans|Alice' rel='stylesheet' type='text/css'>

以下のようにボディ部分にはDroid Sansフォント、H1タグにはQuestrialフォントを使用しています。H1タグのデコレーションにはまた疑似要素の「:before」と「:after」を使っています。

h1 {
font-family: 'Questrial', Verdana, sans-serif;
text-align:center;
font-size:40px;
padding:0;
margin:0 0 20px 0;
position:relative;
color:#8C8C8C;
}
/** have a nice ampersand **/
h1:after {
font-size:25px;
color:#D6CFCB;
content: '&';
text-align:center;
display:block;
width:100%;
font-family: 'Alice', Verdana, serif;
text-shadow: 0px 1px 0px #fff;
}
/** create the gradient bottom **/
h1:before {
position:absolute;
bottom:15px;
content: ' ';
text-align:center;
display:block;
height:2px;
width:100%;
background: linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */
}

画像は使わずアイコンの追加

「画像使わないって言ってたのに、アイコン追加してるじゃない。」って思いました？このアイコンどうやって追加したと思いますか？答えは簡単で、アイコンフォントを使用しています。このコンセプトをご存じない方の為に簡単に説明すると、アイコンでアルファベットの各文字をマッピングし、それらのアイコンを使ってフォントを成形しています。Chris Coyerさんが興味深いアーティクルをお書きになっているので、参照してみてくださいね。

今回のデモではP.J. Onoriさんのiconicと言うアイコンフォントを使用しています。

コード自体はこのようになります。ここでも疑似要素の「:before」を使っているので、大分見慣れてきましたか？

/** adding our icon font !! */
@font-face {
font-family: 'IconicStroke';
src: url('font/iconic_stroke-webfont.eot');
src: url('font/iconic_stroke-webfont.eot?#iefix') format('embedded-opentype'),
url('font/iconic_stroke-webfont.woff') format('woff'),
url('font/iconic_stroke-webfont.ttf') format('truetype'),
url('font/iconic_stroke-webfont.svg#IconicStrokeRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.iconic:before{
font-size:25px;
font-family: "IconicStroke";
}
.iconic.link:before { content: '/'; }
.iconic.quote-alt:before { content: "'"; }
.iconic.comment:before { content: "q"; }
.iconic.user:before { content: "u"; }
.iconic.mail-alt:before { content: "M"; }

最初に全てのアイコンにiconicフォントを適用させて、それからアイコンと関連のある文字を使用しています。何故疑似要素のbeforeを使用しているかと言うと、これは純粋な非セマンティックなスタイリングなので、文字はHTMLコードに非セマンティックを追加しないからです。

ラベルで本物のテキスト文字を使用しているので、アイコンフォントを使用することが出来ます。基本的にはアイコンフォントは見た目重視で使われるだけであって、ユーザビリティには何も影響を及ぼしません。アイコンフォントがロードされていなくても、フォームはきちんと表示されます。

フィールド設定「:not()」の威力

最初にお話した通り、出来るだけHTMLのコーディングは少なくしようと思っています。なのでIDタグも出来るだけ使用しません。入力部分をフォーマットするにはinput[type= text, email …]等を使って１つずつトリガーを立てることも出来ますが、CSS3ならばもっと簡単な解決方法があります。それが「:not()」です。サブミットボタン以外は全部同じように表示させたいので、「input:not([type=”submit”])」を設定します。

コードはこんな感じになります。コメントもふってあるので分かり易いかと思います。

/** we remove the red glow around required fields since we are already using the red star */
input:required, textarea:required {
-moz-box-shadow:none;
-webkit-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
}
/** inputs and textarea**/
input:not([type="submit"]),
textarea{
outline:none;
display:block;
width:380px;
padding:4px 8px;
border:1px dashed #DBDBDB;
color:#3F3F3F;
font-family:'Droid Sans',Tahoma,Arial,Verdana sans-serif;
font-size:14px;
border-radius:2px;
transition:background 0.2s linear,
box-shadow 0.6s linear;
}
input:not([type="submit"]):active,
textarea:active,
input:not([type="submit"]):focus,
textarea:focus{
background:#F7F7F7;
border:dashed 1px #969696;
box-shadow:2px 2px 7px #E8E8E8 inset;
}
input:not([type="submit"]){
height: 20px;
}
textarea{
min-height:150px;
resize:vertical
}
/* placeholder */
::-webkit-input-placeholder  {
color:#BABABA;
font-style:italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
color:#BABABA;
font-style:italic;
}

ここで強調したいことをまとめますね。

• 「outline:none」を使って、ブラウザのフォーカススタイルを無効化しています。そして独自のフォーカス／アクティブスタイルを追加しています。
• フィールドがアクティブになった時に、CSS3トランジッションを使って幾つか効果を加えています。コンマで区切れば、別の要素の別のトランジッションを別のタイミングで実行することが出来る事も覚えておいてくださいね。
• placeholderをスタイリングするにはベンダープリフィックスを使う必要があります。バグなのかどうかはよく分かりませんが、テキストエリアでは「webkit-input-placeholder」でもうまく行きます。けれどMozillaの場合はテキストエリアに特定のものを使用する必要があります。
• 入力必須項目をスタイリングするのに赤い星を使っているので、このデフォルトのイケてない赤光りは削除してしまいましょう。

送信ボタンのスタイリング

送信ボタンでは「input type=submit」を使用します。そしてここでは「:before」や「:after」と言った疑似要素は使用出来ません。その為HTMLコードの中で直接特殊文字を使用しています。非セマンティックな方法で解決させるのはあんまり気持ちの良いものでもないので、気に入らなければ削除してしまってください。

ボタンのスタイリングにはまたグラデーションやボックスシャドウを使っています。コーディングに関してはまた後程説明しますね。

/** Styling the send button **/
input[type=submit]{
margin-left:235px;
cursor:pointer;
background:none;
border:none;
font-family: 'Alice',serif;
color:#767676;
font-size:18px;
padding:10px 4px;
border:1px solid #E0E0E0;
text-shadow: 0px 1px  1px #E8E8E8;
background: rgb(247,247,247);
background: linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
border-radius:5px;
box-shadow:0px 1px 1px #FFF inset,
0 0 0px 5px #EAEAEA;
transition:all 0.2s linear;
}
input[type=submit]:hover{
color:#686868;
border-color: #CECECE;
background: linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
box-shadow:0px 1px 1px #FFF inset,
0 0 0px 5px #E0E0E0;
}
input[type=submit]:active,
input[type=submit]:focus{
position:relative;
top:1px;
color:#515151;
background: linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
box-shadow:0px -1px 1px #FFF inset,
0 0 0px 5px #E0E0E0;
}

ボタンにはほんのり薄いグラデーションをかけています。1pxの白のインセットボックスシャドウを上部に、そして1pxのグレーのボーダー。それから5pxのグレーのボーダー。「え？2種類のCSSボーダーなんて無理でしょ？」と言う声が聞こえて来そうですが、ここでボックスシャドウトリックの登場です！コンマを使えば、いくらでもボックスシャドウの設定をすることが出来るんですよ。

ここでのトリックは「プロパティはコンマ区切りされたシャドウのリストです。それぞれのシャドウは2-4の長さの値で定義されます。」と言う一文の中にあります。ボックスシャドウに長さを設定することが可能で、それが丁度「0 0 0px 5px #E0E0E0」の部分に当たります。x軸とy軸のオフセットは0で、カラーはグレー、シャドウ幅は5pxとして、2つ目のフェイクボーダーを作成しています。

ラベルの設定（トランジッション付き）

最後にユーザーがラベルをマウスオンした時に、色が変わるようなトランジッションを加えておきましょう。

label{
color:#7F7E7E;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
label:hover{
color:#191919;
}
label:before{
color:#C1BFBD;
transition: color 1s ease;
}
label:hover:before{
color:#969696;
transition: color 1s ease;
}
p{
margin-bottom:20px;
}
.indication{
color:#878787;
font-size:12px;
font-style:italic;
text-align:right;
padding-right:10px;
}
.required{
color:#E5224C;
}

ここで強調したいのは「label:hover:before」と言う感じで、疑似要素を沢山追加出来るんですよ！と言う事です。今の所疑似要素に設定したトランジッションはFirefox上しかうまく動作しませんので、chromeではアイコンの色はトランジッション無しで変化します。これがまたアイコンフォントの良いところでもあって、スプライトなども使わず簡単に色を変化させる事が出来ます。

ここまで来たら完成です。フォームでちょっと遊んでみてください。ホバー効果を確認してみたり、HTML5の新しい要素の威力を実感出来るのではないかと思いますよ。入力必須項目に何も入れず送信ボタンを押したり、無効なメールアドレスを入力して送信ボタンを押すとどんな風になるか試してみてください。折角ならFirefoxかchromeの最新版で試してみるのがいいと思いますよ。

最後に・・・

今回のチュートリアルが、HTML5やCSS3の可能性を理解するお手伝いになれば幸いです。最後にもう一度声を大にして申し上げておきますが、これはあくまでも効果を実感する為のデモなのでよっぽど自信があってしっかりしたフォールバックがある場合はまた別ですけれども、まだ実践では使わないでおいた方がいいと思いますよ。

互換性を向上させる為には、例えばmodernizrを使用してブラウザの機能を検出したり、役に立つHTML5のpolyfillsを見付けたりすることが出来るかと思います。

今度はあなたの番ですよ。CSS3をプロジェクトの中でどのように活用していきますか？HTML5ならいかがでしょうか。コメントどしどしお待ちしています！