japan.internet.com
japan.internet.com メンバーID
Twitter
Facebook
RSS
ピックアップ
2012年2月8日 07:00

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

著者Jennifer Marsmanオリジナル版を読む海外海外発
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

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

【HTML5 Dev】5分で学べる HTML5

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

これらのエレメントを使用するコードのシンプルな例を紹介する。
【HTML5 Dev】5分で学べる HTML5

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

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

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

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

【HTML5 Dev】5分で学べる HTML5

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

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

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

【HTML5 Dev】5分で学べる HTML5

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

How to Enable HTMl5 Standards Support

プリンター用
記事を転送
この記事をクリップ!
japan.internet.com Androidアプリ
japan.internet.com Androidアプリ Android で japan.internet.com のニュースがどこでも、いつでも読めて、ニュースをTwitterに直接つぶやいたり、Facebookにコメントできる。 人気ニュースランキング、ブックマーク機能なども使えます。詳しくは こちらから
注目のトピックス
Copyright 2012 internet.com K.K. (Japan) All Rights Reserved.