HTML5＋CSS3 使ってみた感想2010-10-20

Cron Builder を作るにあたって、初めてちゃんと HTML5＋CSS3 を使ってみたので、その雑感などをメモ程度に書いてみます。

HTML5

header、footer、nav

分かりやすくていいです。ソースが見やすくなります。
早くエディタ側の対応が進んで、見やすく色分けしてくれるようになると嬉しいですね。

section

Cron Builder みたいなウェブアプリの場合、使いどころにちょっと悩みます。今回はタブの中身で使ってみました。article 要素に至っては、使いどころがないです。
ブログとかニュースサイトなら綺麗にハマるんだと思いますが、ウェブアプリの場合、新規追加の要素を無理して使う必要はないですよね。

header とか section って、ブロック要素じゃないの？

header、footer、section を最初、名前が違うだけのdiv のつもりで使ってたら、Chrome は意図通り表示されたのに、Firefox はブロック要素として振る舞っていませんでした。(未確認ですが inline-block ぽい？)
display: block して事なきを得ましたが、この辺って正しくはどうあるべきなんでしょう？(Fx 3.6 が実は HTML5 に対応していないだけ？？)

div

せっかくだから、div 要素を使わずにやってみようと思って始めましたが、結局挫折。少し凝ったことをやろうとすると、やっぱり「論理的な意味を持たない枠」が必要になるので、そこは結局 div にしました。
まあ、無しにするのは難しいですが、div は確実に減らせます。div が減ると class とか id の指定も減らせて、CSS のセレクタが綺麗になるのが嬉しいところです。

その他 canvas、video、audio など

派手派手しい要素は全然使ってません。

CSS3

:hover

CSS3 じゃないけど、IE が a 要素にしか対応してなかったので、気分としては CSS3。a 要素以外にも色々使うと、スマートに書けます。
よく li の中に a を入れて…ってやってましたが、今回、タブを表す li 要素に直接 :hover したら HTML がスッキリしました。気持ちいい。
onclick イベントも jQuery の後乗せで li に直接付与して実現してて、a 要素の使用は本当の意味でページ遷移する時だけです。意味的にも綺麗で精神的によろしい。

border-radius

言わずと知れた角丸。もはや定番という意識です。
Fx 3.6 はまだベンダープレフィックスが必要なのがちょっと意外でした。Fx 4.0 では要らなくなるのかな？

text-shadow

実装されたのが昔だけあって、抜群の安定感。Cron Builder ではロゴにあたる部分で使用してます。
最近、本文に微妙にずらした text-shadow をかける例を見かけますが、やりすぎると見にくくなるので気を付けたいところですね。
調子に乗って、5px 5px 5px とか離しすぎでぼかしすぎの影を付けると、雰囲気が一気に 90 年代テイストになりますｗ

box-shadow

影繋がりで次は box-shadow。こっちは最近の実装なので、Chrome も Firefox もベンダープレフィックスが必要です。でも、ルール自体はシンプルなので使い勝手はブラウザに寄らず同じでした。
inset (内側の影) を指定すると窪んだ感じを表現できます。
Cron Buider では、border-radius と box-shadow: inset を組み合わせて使っていて、同じ事を CSS3 無しでやろうと思ったら、画像はいくつも必要だし、マークアップも汚くなってしまいます。今回、一番 CSS3 の恩恵を感じた部分はここでした。

グラデーション

最後はこれです。仕様未決定でしたっけ？ベンダープレフィックスどころか、実装によってそもそも書式が全然違うし、それらも複雑です。
オンライン上に色々とグラデーション CSS のジェネレータがありますが、グラデーションの指定はジェネレータが無いと書けないと思います。

その他

アニメーションとか回転とかは使ってません。CSS3 を考えた人達が「CSS3 すげーんだぜ！」って言いたい気持ちは分かるんですが、やりすぎじゃないかなぁと思ってます。昔懐かしい blink とか marquee の匂いを感じるんですがどうなんでしょう？

ざっとこんなところです。
全般的にみて、マークアップが綺麗になるケースが多く、それに伴い CSS のセレクタも分かりやすくなるケースが多かったので、将来的には主流になっていくと思いました。
jQuery 使ってると、CSS セレクタが分かりやすい＝jQuery が分かりやすいっていう事なので、特に助かりますね。

スタンダードな使い方をしている限り、ブラウザ間の挙動の違いもほとんど無いので楽に作れます。
え？IE？もちろん、全力で無視してます。
body 直下に以下の条件付きコメントを入れているのが、せめてもの良心でしょうか。

<!--[if IE]>
<div style="padding: 5px; border: 3px solid #f00; background: #fee; color: #f00; font-size: 10pt;">
IE では一切動作確認していません。恐らく動作しません。
</div>
<![endif]-->