HTML5／CSS3

2010年代のWeb制作に欠かせなくなるであろう、HTML5とCSS3についてまとめてみる。

HTML5 概要

1999年に勧告されたHTML4.01の後継にあたる。FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、
様々な要素を追加・廃止している。
2012年3月頃に正式に勧告される予定である。

HTML4.01と異なる点

（編集中）

新要素

特に「セクショニング」と「埋め込みコンテンツ」は実務的なニーズが高いとされている。
※以下は、2010年2月23日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。

【セクショニング】

・section

div要素の区分け的存在。見出しを付けられるような内容ごとに、このsection要素で区切ることが出来る。
コーディングの都合で区切る場合などは、従来通りdiv要素を用いる。

・nav

従来の<div id="navi">等の代替として使用できる。nav要素の中にul要素を用いるのが一般的のようである。
また、パンくずリストやページネーション等に用いるのも効果的。

・header

従来の<div id="header">の代替として使用できる。また、ドキュメント内に1つしか書けないということはないので、セクションの先頭に用いることもできる。

・footer

従来の<div id="footer">の代替として使用できる。また、ドキュメント内に1つしか書けないということはないので、セクションの最後に用いることもできる。

・aside

メインコンテンツではないが、それと直接関連のある内容をマークアップする際に用いる。
例えばきららのTOPページであれば、「うごうご4コマ」「Web限定連載」の部分にこれを用いるのが適していると言えそうである。

・article

・hgroup

【グルーピング】

・figure

【埋め込みコンテンツ】

・video

文字通り、動画を埋め込むための要素。従来のやり方ではFlashが必要であったりしたが、video要素では不要になった。
video要素には様々な属性が存在する。自動再生させるautoplay属性、ページ読み込みと同時にバッファを開始させるautobuffer属性、
万が一動画が読み込まれなかった場合に画像を表示させるposter属性など。
ただ、このvideo要素にはコーデックやIE対策など、様々な問題点が指摘されているため、実用できるようになるにはまだ時間がかかるとされている。

・audio

文字通り音楽を埋め込むための要素だが、ブラウザ間でサポートしているコーデックに差があるため、実装する際はやや複雑を要する。
詳細についてはhtml5doctorの記事を参照されたい。

・source

他のメディア要素と組み合わせて使用する。例えば、audio要素の中にsource要素を用いて音楽ファイルをロードする、など。

・canvas

・embed

【テキストレベル】

・mark

テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。

・time

・ruby／rt／rp

【フォーム】

・datalist

・keygen

・output

・progress

・meter

【インタラクティブ】

・details

・summary

・command

・menu

・device

CSS3 概要

事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。
しかし、一部プロパティやセレクタはすでに様々なブラウザでの実装が進んでいる。が、IEでの実装具合は言うまでもない。

CSS2.1と異なる点

（編集中）

新プロパティ対応表

（編集中）

新セレクタ対応表

（編集中）

資料

このページを作成するのに参考にしたページ等をリストアップ。

【Webサイト】

HTML5.JP ＞ html5doctor

HTML5 Showcase - AppleがHTML5・CSS3などのWeb標準で構築したサイト

【雑誌】

・Web Designing 2010年4月号 特集「実践・CSSコーディングの新常識」　公式サイト：http://book.mycom.co.jp/wd/