DaniemonHTML5 Advent Calendar の12日目です。
本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系の Advent Calendar は、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。ここでは、「HTML5」がテーマになります。他にも面白い記事が公開される予定ですので興味のある方は是非チェックしてみてください：http://atnd.org/events/21987
五つのステップでブログとかに活用できるポラロイド風の写真を HTML5 と CSS3 で作りたいと思います。似たサンプルがあっちこっちにありますが、もう少し本物っぽくなるように第5段階でアニメーションの追加があります。
完成すればこういうふうになります： HTML5、CSS3 のポラロイド風写真
さぁ、スタートしましょう！
1. まずは HTML5
最初にマークアップを用意しましょう。HTML5 ではいくつかの新しい要素があります。どれをどういうふうに使うかは混乱しやすいですが、一つの簡単な要素は <figure> です。画像かビデオに使う要素で、実はそれだけであまり利点がなさそうですが、画像やビデオに説明の文章がある場合、<figcaption> との併用で役立ちます。使い方はこんな感じです：
<!-- HTML ファイル -->
<figure id="polaroid">
<img src="santa.jpg" alt="本物のサンタさん">
<figcaption>Merry Christmas !</figcaption>
</figure>現在のブラウザはこれで満足していますが、IE の古いバージョンでは HTML5 要素に CSS の摘要できません。解決方法の一つは Remy Sharp 氏が作った簡単な JavaScript です：
<!-- HTML ファイル -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->2. 次はポラロイド風に
ポラロイド写真のような効果はもちろん白い紙が必要なので、画像の周りにマージンを追加し、背景を白にします：
/* CSS ファイル */
#polaroid {
background: #fff;
color: #111;
display: block;
height: 425px;
margin: 2em auto;
width: 350px;
}
#polaroid img {
border: solid 1px #ddd;
margin: 24px;
}
#polaroid figcaption {
display: block;
font-size: 32px;
line-height: 1;
text-align: center;
}ところで、HTML5 パーサーの入っていないブラウザは <figure> や <figcaption> みたいな要素が認識されず、インライン要素として扱われます。そのため、display: block; を指定します。そうすると、IE6 でもポラロイドっぽく見えます。
3. CSS3 で面白く
やっと CSS3 の番になりました。細かい効果を追加するともう少し本格的になります。例えば影の引用、少しの回転、そして角を微妙に丸くしましょう：
/* CSS ファイル */
#polaroid {
box-shadow: 0 2px 4px #777;
border-radius: 3px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}多くの CSS3 プロパティの長所は古いブラウザで表示されなくてもデザインが崩れることは殆どありません。ただ、最も最新のプロパティができるだけ多くのブラウザで表示されるように、上記みたいにベンダープレフィックスが必要になります。
4. 一言メッセージをおしゃれに
今のところ、結構完成に近い感じがしますが、画像の下にあるメモはメモらしくないですね。ここでウェブフォントを使いましょう。ウェブフォントを使う時はもちろん利用する許可が必要です。このデモに使うフォントは Jesús Gorriti がコピーライト無しで公開している Gorri Sans です。
ウェブフォントは IE6 を含めてたくさんのブラウザで使うことができますが、ちょっとしたコツが必要です。Paul Irish 氏、Richard Fink 氏や Ethan Dunham 氏が色んな環境でテストして、一つの結果としてはこのコードがあります：
/* CSS ファイル */
@font-face {
/* Font source: http://gorriti.com/2009/02/05/mi-aportacion-al-mundo-brutista/ */
font-family: 'GorriSans';
src: url('GorriSans.eot?') format('eot'), url('GorriSans.woff') format('woff'), url('GorriSans.ttf') format('truetype');
}
#polaroid figcaption {
font-family: GorriSans, arial, sans-serif;
}因みに上記のフォントフォーマット（EOT式、WOFF式など）への変換は、Font Squirrel の @font-face ジェネレーターをおすすめします。
5. フェードイン効果の追加
いよいよ最後の仕上げになりましたが、それはもちろん写真の現像です。本物のポラロイド写真みたいに、このデモの写真が目の前でゆっくりと現れます。JavaScript を使うことが可能ですが、CSS のみの方法でやってみましょう。アニメーションそのものは簡単であり、画像の透明度にトランジションを利用します。つまり、1分の間、opacity が 0（透明）から 1（不透明）に変わります。
どのトランジションでも、二つ以上の状態が必要です。この場合、ページ自体が第1状態になり、第2状態を作るには target の疑似要素（pseudo-element）を使います。トランジションを起動するには、<body> 要素に「demo」という ID を加え、ページの URL にも「#demo」を追加します。そうすると、ページがロードする時、画像が透明の状態から段々画像が見える target の状態に変わります。
<!-- HTML ファイル -->
<body id="demo">
...
</body>/* CSS ファイル */
#polaroid img {
opacity: 0;
-webkit-transition-duration: 60s;
-moz-transition-duration: 60s;
-ms-transition-duration: 60s;
-o-transition-duration: 60s;
transition-duration: 60s;
}
#demo:target #polaroid img {
opacity: 1;
}完成したデモ： kyokodaniel.com/tech/css3/polaroid/index.html#demo
さぁ、これで更にクリスマスの雰囲気になったでしょうか？来年の HTML5、CSS3などのウェブ技術の発展が楽しみですね。皆さん、have a Merry Christmas and a Happy New Year!
