KUMALOGのテーマをHTML5+CSS3で作ったこととか参考にしたページとか

KUMALOGのテーマをHTML5/CSS3で作ったこととか参考にしたページとか

勉強を兼ねてKUMALOGの新たなテーマをHTML5+CSS3でサクッと作ってみた(細かい修正は後ほどやります…)ので、その感想を述べたり、参考にしたページを紹介したいと思います。

スポンサーリンク

HTML5は構造化タグが難しい!

HTML5については以前からチョコチョコ勉強していたのですが、いざ使ってみると難しいですね。

HTML5で重要な点と言えば、header・nav・article・aside・footerなどの構造化タグとアウトラインでしょうか。このテーマを作るに当たっては、構造化タグの使いどころで悩みました。

header・article・footerはともかく、nav・asideが難しい。navは「主要なナビゲーションで構成されるセクション」、asideは「ページや記事に関連するが、あまり重要ではないコンテンツ…たとえば、ブログロール、補助的なナビゲーション」に適しているとのことですが、じゃあ、「主要なナビゲーション」とか「あまり重要ではないコンテンツ」って何なんだ?という話なワケです。

その点については今のところだいたい納得しましたが、いまいちスッキリしない部分もあります。そのうち、記事としてまとめられたらいいなと思ってます。

CSS3はものすごく便利!

CSS3は最高ですね。画像無しでグラデーション、角丸、影を作ることができるってホントにハッピー。画像を全く使わなくてもそこそこイケてる感じに仕上がります。

ただ、IE対策のためにPIE.htcを使わないといけないのが面倒ですね。IEは無視したいところですが、IEのシェアはまだまだ高いので、なかなか無視できません。(後から気づいたのですが、PIE.htcを使ってもIE9ではlinear-gradientが効かないようです。この糞ブラウザめ…。)

Microsoftさん、早くこの糞ブラウザを何とかしていただけませんか?

HTML5/CSS3を使う際、特に参考にしたページ

HTML5 チュートリアル – HTML5.JP
HTML5を使うなら必読でございます。私は、構造化タグの使いどころを考えるために何度も読み返しました。

結局どうすればいいの? – Dive Into HTML5
上記の「HTML5 チュートリアル」と併せて読むことをおすすめします。

HTML5 におけるアウトラインに関して簡単解説 | WWW WATCH
アウトラインについてのわかりやすい解説。アウトラインを確認するためのすごく便利なツールも紹介されています。

【CSS3】ドロップシャドウやグロー(光彩)をCSSで(box-shadow) – みこむらめもむらむらむら
box-shadowのわかりやすい解説。box-shadowで何ができるのかがサクッとわかります。

CSS3 グラデーション(gradient)の指定方法 | CSS Lecture
グラデーションの設定方法がサクッとわかります。ただし、情報が少し古いので↓のページも併せて読むことをおすすめします。

もうチュートリアル記事には -webkit-gradient() 書かなくてもいいんじゃないかな – {u:b}
Android端末を考慮しないなら-webkit-gradientはいらないだろ~ってお話。

Can I use… Support tables for HTML5, CSS3, etc
HTML5やCSS3など、ブラウザの対応状況が一目でわかります。