【HTML5 Dev】5分で学べる HTML5(1/2)

HTML5 が開発者の間で注目されていることに疑問の余地はない。本稿は、HTML5 の基本的な機能を素早く学ぶ短期集中コースの必要な方のために用意したものである。

このチュートリアルでは、新しいセマンティック マークアップ、描画/アニメーション用キャンバス、音声/ビデオ、古い Web ブラウザでの HTML5 の使用方法をカバーしていく。さすがに5分では終わらないと思うが、短時間でできるよう約束する。しばらくお付き合いいただきたい。それだけの価値はあるはずだ。

セマンティック マークアップとページ レイアウト

ある大学で、キャンパス建設時に歩道を作らなかったという興味深い話がある。オープン時に芝生を敷いただけで道を作らず、しばらく静観していたのだ。

1年たつと、人々がよく歩いたところの芝はすっかりはげてしまった。ここで初めて大学は、芝のなくなった部分を舗装して歩道にしたのだ。

これは完全に理にかなっている。人が歩くまさにその場所が歩道になったのだ。

HTML5 の新しいセマンティックのエレメントは、これと全く同じ理論に基づいている。

セマンティックのエレメントは、その意味や目的を Web ブラウザと開発者に明確に示す。これを（例えば）<div>タグと比較してみたい。<div>タグは HTML ドキュメント内の区分や区画を定義するが、その内容を伝えたり、明確な意味を提供するものではない。

<div>

一般に、開発者はこれらの<div>タグと一緒に ID やクラス名を使う。これは開発者にとっては意味のあるものだが、残念ながら Web ブラウザがそのマークアップの目的を知る役には立たない。

<div id="header">

HTML5 には、いろいろな意味を持ち、エレメントの目的を開発者と Web ブラウザの双方に伝えられる新しいエレメントがある。

<header>

W3C は既存の数十億という Web ページを調査し、開発者が実際に使っている ID とクラス名を抽出した。そして、div1 や div2 などをふるい落とし、使用事例のある詳細な詳しいエレメントのリストを作り、これを標準としたのだ。

HTML5 の新しいセマンティック エレメントの一部を以下に紹介する。

article
aside
figcaption
figure
footer
header
hgroup
mark
nav
section
time

意味がよくつかめるので、これらの大半は動作を想像できるだろう。だが、念のため以下に図示しておく。


Headers と footers は読んで字のごとしであり、nav はナビゲーション バーもしくはメニュー バーを作るものだ。section と article を使うと、コンテンツをグループ化できる。最後に、関連リンクのサイド バーなどの二次コンテンツを作るには、aside が使える。

これらのエレメントを使用するコードのシンプルな例を紹介する。

このコードでは、上記した以外の新しいエレメントをいくつか使っている

h1 と h2 の両ヘッダをグループ化した hgroup エレメントに気付かれただろうか。

mark エレメントは、重要なテキストの強調表示やマーキングを可能にする。最後に、figure および figcaption エレメントは、コンテンツ内の図（画像、図、写真、コードなど）を指定したり、その図にキャプションを付けたりできる。

CSS と組み合わせたときの Web ページ表示例を紹介する（注：この CSS は筆者の優秀な同僚である Brandon Satrom による TechEd talk から拝借したが、決して美しいものではなく、効果はすべて筆者が施した）。


CSS が得意な誰か（筆者ではない）がこれを使ったら、どうなるだろう。非常に強力な結果が得られる。この HTML の描写性は、作業を大幅に簡単にしてくれる。

最後に、Visual Studio（VS）で理解されない HTML5 のエレメントがすべてが波線になる場合は、必ず Visual Studio 2010 SP1 をインストールしよう。

そして、VS のメニューから「Tools」-「Options」を選択する。左側のナビゲーション ペインで「Text Editor」-「HTML」と展開し、「Validation」をクリックして、「Target」ドロップダウン メニューから「HTML5」を選ぶ。これで何とか HTML5 のインテリセンスがサポートされる。


セマンティック エレメントの詳細については、以下を参照されたい。

How to Enable HTMl5 Standards Support

Twitter	iPhoneアプリ / iPadアプリ		Androidアプリ
Facebook	RSS	ニュースメール