作成日
26 August 2010
必要条件
この記事に必要な予備知識
サンプル作成のツールとしてDreamweaverを使います（CS5以降が必要。CS5ではアップデータ11.0.3を適用し、「HTML5 パック for Dreamweaver CS5」をインストールする必要があります。
※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。
ユーザーレベル
初級
※HTML5とCSS3は現在策定中の仕様です。本連載は執筆時点の仕様内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。
HTML5文書を作成する
さっそく、Dreamweaverを用いて HTML5のWebページを作ってみましょう。Dreamweaver CS5以降では、新規ファイルを作成する際にHTML5を選択することができます。
ドキュメントタイプからHTML5を選択しファイルを作成すると、HTML5のDoctype宣言が付与されたHTMLが出力されます。
既にこの状態でHTML5文書の基本の状態です。このままHTML5のコードを書き始めることもできますが、文字エンコーディングの宣言をさらに短くすることもできます。
デフォルトでは4行目に、
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
のように文字エンコーディングが宣言されていますが、HTML5ではこれを
4. <meta charset="utf-8">
のように記述することもできます。こうしておくことでわずかではありますが、コードが短く読みやすくなります。このエンコーディング指定方法は、Internet Explorer 6を含む各Webブラウザーで問題なく動作します。
次に文章をマークアップしてみましょう。
文章をマークアップする
HTML5では要素が増え、より詳細なマークアッブができます。ここでは次の例文をマークアップしてみましょう。
【例文】
--------------------------------------------------
【効果的なWebサイト、モバイル、デバイスコンテンツ制作を支援】
標準規格に準拠したWebサイト、表現力豊かで現実感溢れるデジタル体験を構築する際に必要なすべてが揃ったソリューションです。
●WEBデザイン
HTML、CSS、JavaScriptに特化したWebデザインを開発できます
●インタラクティブデザイン
ビジュアルで、もしくはコードベースの開発により、自由な形式の魅力あるインタラクティブWebコンテンツやエクスペリエンスを作成できます。
上記の例文には、
--------------------------------------------------
「【副題】」
「本文」
「●見出し」
「本文」
「●見出し」
「本文」
のように役割をもったテキストが揃っています。そしてこのテキストはHTML5の考え方に沿って次のようにマークアップすることができます。
1. <h1>CS5 Web Premium</h1>
2. <h2>効果的なWebサイト、モバイル、デバイスコンテンツ制作を支援</h2>
3. <p>標準規格に準拠したWebサイト、表現力豊かで現実感溢れるデジタル体験を構築する際に必要なすべてが揃ったソリューションです。</p>
4. <h3>WEBデザイン</h3>
5. <p>HTML、CSS、JavaScriptに特化したWebデザインを開発できます</p>
6. <h3>インタラクティブデザイン</h3>
7. <p>ビジュアルで、もしくはコードベースの開発により、自由な形式の魅力あるインタラクティブWebコンテンツやエクスペリエンスを作成できます。</p>
HTML4と区別がつかないと思いますが、HTML5はHTML4.01を拡張したHTMLです。そのため、HTML4の多くの知識を活かし、ノウハウを流用することができます。
もちろん、このマークアップ状態でも立派なHTML5の文書ですが、HTML5では様々な要素が新たに加わり、それらを利用することでより詳細なマークアップをすることもできます。ここでは、主題と副題のグルーピングなどに利用する「hgroup」と、章を明示するための「section」を利用してみましょう。
hgroupを利用する
先程マークアップをした例文では主題と副題となる箇所が含まれており、以下の部分が該当します。
10. <h1>CS5 Web Premium</h1>
11. <h2>効果的なWebサイト、モバイル、デバイスコンテンツ制作を支援</h2>
hgroupはこのh1とh2を「1つの見出し」としてまとめることができます。hgroupは次のように利用します。
10. <hgroup>
11. <h1>CS5 Web Premium</h1>
12. <h2>効果的なWebサイト、モバイル、デバイスコンテンツ制作を支援</h2>
13. </hgroup>
14. <p>標準規格に準拠したWebサイト、表現力豊かで現実感溢れるデジタル体験を構築する際に必要なすべてが揃ったソリューションです。</p>
15. <h3>WEBデザイン</h3>
16. <p>HTML、CSS、JavaScriptに特化したWebデザインを開発できます</p>
17. <h3>インタラクティブデザイン</h3>
18. <p>ビジュアルで、もしくはコードベースの開発により、自由な形式の魅力あるインタラクティブWebコンテンツやエクスペリエンスを作成できます。</p>
hgroupを利用すると、そのグループは1つの見出しとなり、hgroup要素はグループ内の最も大きいレベルの見出しとして機能します。つまり、この場合のhgroupはh1相当ということになります。
そのため、現在h3としてマークアップしている2箇所を繰り上げることもできます（見出しのレベルは連続している必要はなく、h1の次にh3が登場してもよいのでこのままでもかまいません）。
10. <hgroup>
11. <h1>CS5 Web Premium</h1>
12. <h2>効果的なWebサイト、モバイル、デバイスコンテンツ制作を支援</h2>
13. </hgroup>
14. <p>標準規格に準拠したWebサイト、表現力豊かで現実感溢れるデジタル体験を構築する際に必要なすべてが揃ったソリューションです。</p>
15. <h2>WEBデザイン</h2>
16. <p>HTML、CSS、JavaScriptに特化したWebデザインを開発できます</p>
17. <h2>インタラクティブデザイン</h2>
18. <p>ビジュアルで、もしくはコードベースの開発により、自由な形式の魅力あるインタラクティブWebコンテンツやエクスペリエンスを作成できます。</p>
なお、Dreamweaver CS5以降では、HTML5の新要素やその属性についても入力補完に対応します。
sectionを利用する
次に章の範囲を要素で明示してみましょう。HTMLでの章は一般的に「現在の見出し」から「次の見出し」までを指します。一般的にsection要素は章の範囲を明示するために、次のように利用します。
10. <section>
11. <hgroup>
12. <h1>CS5 Web Premium</h1>
13. <h2>効果的なWebサイト、モバイル、デバイスコンテンツ制作を支援</h2>
14. </hgroup>
15. <p>標準規格に準拠したWebサイト、表現力豊かで現実感溢れるデジタル体験を構築する際に必要なすべてが揃ったソリューションです。</p>
16. <section>
17. <h3>WEBデザイン</h3>
18. <p>HTML、CSS、JavaScriptに特化したWebデザインを開発できます</p>
19. </section>
20. <section>
21. <h3>インタラクティブデザイン</h3>
22. <p>ビジュアルで、もしくはコードベースの開発により、自由な形式の魅力あるインタラクティブWebコンテンツやエクスペリエンスを作成できます。</p>
23. <section>
24. </section>
なお、見出し要素の構造が整っている場合には、sectionを利用し章を明示する必要はありません。section要素を伴わない見出しはsectionと似た機能を持っており、暗黙的に章を生み出します。
まとめ
今回紹介したようにHTML4.01、XHTML1.0の知識を活かし、その考え方を広げたHTMLがHTML5なのです。Dreamweaverもまたこれと同じく、HTML4.01、XHTML1.0文書の作成に加え、HTML5関連機能を利用することで、これまでの機能を活かしながら対応範囲を拡張することができます。HTML5文書のオーサリングツールとしてのDreamweaverをぜひお試しください。
次回はCSS3を利用し、今回作成したHTML5文書を装飾します。