HTML5 は Web コンテンツの編成をするために設計された言語です。そこには、標準化された直観的な UI マークアップ言語を作成することによって、Web の設計および開発を容易にするという意図があります。HTML5 はページを分析して区分化する手段を提供し、サイトを論理的に編成するためだけでなく、サイトにシンジケーション機能を与えるように個々のコンポーネントを作成することを可能にします。HTML5 では、情報を分割してラベルを付けることによって、情報を使いやすく、理解しやすいものにするという情報マッピングの本質を体現しており、「Web サイト設計のための情報マッピング手法」と言うことができます。そしてこれが、HTML5 が持つ非常にセマンティックで美しいという性質の基礎となっています。HTML5 を使用すれば、あらゆるスキル・レベルのデザイナーおよび開発者が、単純なテキストによるコンテンツはもとより、リッチでインタラクティブなマルチメディアでさえも作成して公開できるようになります。

HTML5 はデータ管理、描画、動画、そして音声用の効果的な手段を提供し、Web および携帯機器を対象としたクロスブラウザー・アプリケーションの開発を容易にします。HTML5 は、モバイル・クラウド・コンピューティング・サービスの進化を促している技術の 1 つでもあります。それは、HTML5 を使用することで極めて柔軟に、刺激的でインタラクティブな Web サイトを開発できるようになっているからです。さらに、HTML5 には新しいタグが追加されていることに加え、さまざまな機能強化 (簡潔な構造、フォームのコントロール、API、マルチメディア、データベース・サポート、そして大幅に高速化された処理速度など) も盛り込まれています。

HTML5 で新たに追加されたタグでは、その役割と用途が非常にわかりやすいようにカプセル化されています。HTML の以前のバージョンで使われていたタグはそれほど記述的ではありませんでしたが、HTML5 では極めて記述的かつ直観的なラベルとして、すぐにそのコンテンツがわかる充実した内容のラベルを用意しています。例えば、あまりにも多用されていた <div> タグを補うために、<section> タグと <article> タグが追加されました。また、特定のコンテンツ・タイプをより具体的に記述できるように、<video>、<audio>、<canvas>、および <figure> タグも追加されています。

以下に、HTML5 になって提供されるようになった内容を記載します。

• そこに何が含まれるように作られているかを正確に記述するタグ
• ネットワーク通信の強化
• 汎用ストレージの大幅な改善
• バックグラウンド・プロセスを実行する Web Workers
• 常駐アプリケーションとサーバーとの間の常時接続を確立する WebSocket インターフェース
• 保管データの取得に関する改善
• ページの保存およびロード速度の促進
• CSS3 で GUI を管理するためのサポート (つまり、HTML5 をコンテンツ指向にすることができます)
• ブラウザーのフォーム処理の改善
• クライアント・サイドのローカル・ストレージを可能にする SQL ベースのデータベース API
• キャンバスおよび動画 (サードパーティーのプラグインをインストールしなくても、グラフィックと動画を追加することができます)
• Geolocation API 仕様 (この仕様では、スマート・フォンの位置情報機能を使用して、モバイル・クラウドのサービスおよびアプリケーションを統合します)
• フォームの強化 (JavaScript コードをダウンロードする必要を減らし、モバイル・機器とクラウド・サービスとの間の通信を効率化します)

HTML5 はより魅力的なユーザー・エクスペリエンスをもたらします。HTML5 を使用して設計されたページでは、デスクトップ・アプリケーションと同じようなエクスペリエンスを実現することができます。また、HTML5 は API の機能をさまざまなプラットフォームで使えるブラウザーと組み合わせることによって、複数のプラットフォームでの開発を強化します。HTML5 を使用することで、開発者は最新のアプリケーションによる、プラットフォームに依存しないエクスペリエンスを提供することができます。

HTML5 という言葉を口にするとき、それは、継続的な革新が行われている技術を簡潔に表現していることになります。この言葉には、HTML 5 とその関連技術である CSS3 および JavaScript との相互作用に基づく新しいタグ、新しい方法、そして汎用開発フレームワークのすべてが含まれます。HTML5 は、クライアントを中心としてアプリケーションを処理するという現象の中核となっています。HTML5 技術のテクニックとメソッドは多くのデスクトップ・アプリケーションに採り入れられていますが、HTML5 は豊富な機能を備えた Web モバイル・フォン・ブラウザーに実装することもできます。Web モバイル・フォン・ブラウザーは、Apple iPhone、Google Android、そして Palm webOS を実行する電話の人気と普及状況が証明しているように、ますます拡大している市場です。

HTML5 が持つ能力のなかでも重要なのは、今までよりも遥かに理解しやすいプロセスを生み出す、情報マッピング (あるいは、コンテンツ・ブロッキングと呼んでも構いません) です。このツールが設計および開発にいかに効果的なものになっているかは、HTML5 が Web 処理の世界に占める割合がますます増えているという事実に示されています。

HTML5 は、テキスト・レベルでのより効果的なセマンティック・プロセスの登場と、フォームの作成および使用をより強力に制御する時代の到来を告げています。HTML5 による革新に伴うこのような性質のすべて、そしてその他多くの利点が、このパラダイムが占める割合がますます増えている根本的な理由となっています。多くの政府機関、営利団体、そしてその他の機関が (さらに、その主な活動としては、情報処理および情報通信とはかなり離れて関わっている組織の多くも)、この拡大する現象の展開に多かれ少なかれ注目しています。

HTML5 は魔法のランプではありません。そこにはジーニーもいません (訳注: ジーニーは「アラジンと魔法のランプ」や「アラジン」などの物語に登場する魔人の名前)。けれども HTML5 の技術および方法に関する利点は、ランプをこすって叶える魔法の次に、HTML5 を素晴らしいものにしています。

ページの計画

これから実例として、単純な Web ページを作成し、このプロセスを通して HTML5 で導入された新しいタグのいくつかを説明しようと思います。まず、効果的かつ効率的な Web ページに仕上げるためには、作成したいコンポーネントのすべてを考慮した計画を立てなければなりません。

図 1 に、作成するページの設計の概要を示します。このページ設計には、ヘッダー (Header) 領域、ナビゲーション (Navigation) 領域、3 つのセクション (Section) と補足情報 (Aside) からなる記事 (Article) 領域、そして最後にフッター (Footer) 領域があります。ブラウザー互換性の問題を調整しなければならなかったり、基本構造を理解する妨げとなったりするような視覚的混乱がないように、このページは Google Chrome ブラウザーで機能するように設計します。最終目標とするのは、新しい HTML5 のタグの使い方を明確に説明し、これらのタグを使用して適格なコードの作成と簡潔なページ設計を行えることを明らかにするページを作成することです。

このページを作成する過程で、HTTML5 ページを正しくレンダリングするために必要な CSS3 についても言及します。CSS3 は、HTML5 ページのスタイル設定、ナビゲーション、そして全体的な印象を作り出す上でなくてはならないものです。W3Schools CSS3 のリファレンス・サイト (「参考文献」を参照) を調べるとわかるように、CSS3 のプロパティー・グループには、背景、フォント、マーキー、アニメーションなどの有用な要素が含まれています。

ページの作成に取り掛かる前に、いくつかの新しい HTML5 タグについて学んでおく必要があります。

上に戻る

ヘッダー領域

サンプル・ページのヘッダー領域の中に含めるコンテンツは、ページ・タイトルとサブタイトルです。ページの Header 領域のコンテンツを作成するには、<header> タグを使用します。<header> タグには、Web ページ自体の開始情報だけでなく、<section> および <article> に関する開始情報を含めることもできます。ここで作成する Web ページには、ページの Header 領域 (ページの設計の概要を参照) があるだけでなく、記事領域とセクション領域内にも Header 領域があります。リスト 1 に、<header> タグのマークアップ例を記載します。

<header>
    <h1>Heading Text</h1>
    <p> Text or images can be included here</p>
    <p> Logos are frequently placed here too</p>
</header>

<header> タグ内には、<hgroup> タグを含めることもできます (リスト 2 を参照)。<hgroup> タグは見出しをグループに分け、<h1> から <h6> の見出しレベルを使用して、以下のリストに示されているように大見出しと小見出しを設定します。

<header>
    <hgroup>
          <h1>Main Heading</h1>
          <h2>Sub-heading </h2>
    </hgroup>
    <p> Text or images can be included here</p>
</header>

ナビゲーション領域

ページのナビゲーション領域を作成するには、<nav> タグを使用します。<nav> 要素は、ナビゲーション専用の領域を定義します。<nav> タグはメインのサイト・ナビゲーションに使用してください。ここに、ページの他の領域に含まれるリンクを収容することはできません。ナビゲーション領域には、例えば、リスト 3 に示すようなコードを含めることができます。

<nav>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Our Products</a></li>
          <li><a href="#">Contact Us</a></li>
     </ul>
</nav>

上に戻る

記事領域およびセクション領域

ここで設計しているページには、1 つの記事セクションがあり、ここにページの実際のコンテンツが入ります。この領域を作成するには、<article> タグを使用します。このタグが定義するコンテンツは、ページの他のコンテンツとは独立して使用することができます。例えば、RSS フィードを作成する場合には、<article> を使用してフィードのコンテンツを一意に識別することができます。<article> タグによって識別されるコンテンツを削除したり、別のコンテキストに配置したりしても、そのコンテキストにおけるコンテンツは完全に理解することができます。

Acme United 計画の記事領域には、3 つのセクション領域が含まれます。これらのセクション領域を作成するには、<section> タグを使用します。<section> の中に含めるのは、Web コンテンツ内で互いに関連するコンポーネント領域です。<section> タグには (<article> タグもそうですが)、ヘッダー、フッター、さらにセクションを完成するために必要なその他すべてのコンポーネントを含めることができます。<section> タグは、コンテンツをグループ化するために使用します。<section> タグと <article> タグのコンテンツはどちらも通常は <header> で始まり、<footer> で終わります。この 2 つの間に、タグのコンテンツが入ります。

<article> タグの中に <section> タグを含めることができるのと同じく、<section> タグの中に <article> タグを含めることもできます。<section> タグは同様の情報をグループ化するために使用し、<article> タグは記事やブログなど、コンテンツが持つ意味に影響を与えることなく、削除したり、新しいコンテキストに移動したりすることができる情報に使用します。<article> タグはその名前が示唆するように、完全な情報一式を提供します。それとは対照的に、<section> タグには関連情報が含まれていても、その情報だけを別のコンテキストに配置することはできません。そうすると、その情報が持つ意味が失われてしまうためです。

リスト 4 に、<article> タグと <section> タグの使用例を記載します。

<article>
     <section>
          Content
     </section>
     <section>
          Content
     </section>
</article>
<section>
     <article>
          Content
     </article>
     <article>
          Content
     </article>
</section>

画像要素

<section> タグと <article> タグの両方、そして <header> タグと <footer> タグには、<figure> タグを含めることができます。この <figure> タグには、画像、図表、および写真を含めることができます。

<figure> タグにさらに <figcaption> を含め、この <figcaption> タグに <figure> タグ内の図のキャプションとして、図をコンテンツにより密接に結び付けるための説明を入力することができます。図 5 に、<figure> および <figcaption> タグの構造例を記載します。

<figure>
     <img src="/figure.jpg" width="304" height="228" alt="Picture">
     <figcaption>Caption for the figure</figcaption>
</figure>

メディア要素

<section> および <article> タグには、さまざまなメディア要素を含めることも可能です。HTML5 のタグは、そこにどのようなコンテンツが含まれるのかがすぐに理解できるようになっています。そのため、以前は単に埋め込まれるだけだった音楽や動画などのメディア要素をより正確に識別できるようになりました。

<audio> タグが識別するのは、音のコンテンツ、つまり音楽をはじめとするあらゆる音声ストリームです。<audio> タグには、どの音声をいつ、どのように再生するかを制御する属性があります。これらの属性は具体的には、src、preload、control、loop、および autoplay です。リスト 6 に記載する例では、音声はページがロードされると同時に再生が開始され、そのまま再生され続けます。ユーザーには音声を停止、再開するためのコントロールが提供されます。

<audio src="MyFirstMusic.ogg" controls autoplay loop>
     Your browser does not support the audio tag.
</audio>

<video> タグを使用すれば、ビデオ・クリップやストリーミング・ビジュアル・メディアを配信することができます。このタグには、<audio> タグで使用されるすべての属性に加え、poster、width、height という 3 つの属性があります。poster 属性は、動画のロード中や、動画がまったくロードされないときに使用する画像を指定するために使用することができます。

図 7 に、<video> タグの構造例を記載します。

<video src="MyFirstMovie.ogg" controls="controls">
     Your browser does not support the video tag
</video>

<video> タグと <audio> タグにはどちらも <Source> タグを含めることができます。<Source> タグは、<video> および <audio> タグのマルチメディア・ソースを定義するタグです。この要素を使って、代替となる動画ファイルまたは音声ファイルを指定すると、ブラウザーはサポートしているメディア・タイプまたはコーデックに応じた代替ファイルを選択することができます。例えばリスト 8 には、2 つの選択肢があります。この場合、使用しているブラウザーで WMA バージョンのファイルを再生できなければ、次に MP3 が試行され、それでも再生できない場合には、その音声ファイルを再生できない理由を通知するメッセージがユーザーに表示されることになります。

<audio>
     <source src="/music/good_enough.wma" type="audio/x-ms-wma">
     <source src="/music/good_enough.mp3" type="audio/mpeg">
     <p>Your browser does not support the HTML 'audio' element.</p>
</audio>

<embed> タグは、ページ内に表示できる埋め込みコンテンツを定義します。埋め込みコンテンツの一例は、Adobe Flash SWF ファイルのプラグインです。リスト 9 の type 属性は、埋め込みソースを Flash ファイルとして識別しています。

<embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

<embed> タグの属性には、src と type の他、height、width もあります。

上に戻る

補足情報領域

Acme United 計画の補足情報領域を作成するには、<aside> タグを使用します。このタグは、記事の話の流れには直接関係のない補足コンテンツを収容するタグだと思ってください。雑誌では、記事のなかで指摘した要点を明らかにするために、補足情報がよく使用されます。<aside> タグに含めるコンテンツは、削除しても、記事、セクション、ページの情報には影響しないコンテンツを含めます。

図 10 に、<aside> タグの使用例を記載します。

<p>My family and I visited Euro Disney last year.</p>
<aside>
     <h4>Disney in France</h4>
     <p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>

上に戻る

フッター領域

<footer> 要素には、例えば記事の著者や日付などといった、ページ、記事、またはセクションに関する情報が含まれます。著作権やその他の重要な法的情報をページのフッターとして含めることもできます (リスト 11 を参照)。

<footer>
     <p>Copyright 2011 Acme United. All rights reserved.</p>
</footer>

上に戻る

ページの作成

HTML5 でページを作成するために必要となる基本的なタグについて学んだところで、いよいよページの作成に取り掛かります。これから作成するのは、Acme United 社の Web ページです。図 2 に示す完成版のページは、ダウンロードして使用できるようになっています (「ダウンロード」を参照)。

それではまず、ページをセットアップするところから始めます。ページを開始するのは <!doctype> です。HTML5 では <!doctype> が単純化されているので、html を指定すると覚えておけば十分です。この変更は、このタグのエントリーを単純化するだけでなく、このタグ自体を先々まで使用できるようにもしています。名前が html5 ではなく、単に html となっていることに注意してください。今後、いくつもの HTML のバージョンが現れては消えようとも、<!doctype> には常に html を指定することができます。

<html> タグには、<!doctype> タグ以外のすべての HTML 要素が含まれます。つまり、他のすべての要素は、<html> タグと </html> タグの間にネストしなければならないということです。リスト 12 を見てください。

<!doctype html>
<html lang="en">

<!doctype> として html を指定するのに続いて、言語に英語を指定した後は、<head> 要素を続けます。そこに、スクリプト、ブラウザー・サポート情報、スタイルシートのリンク、メタ情報、およびその他の初期化関数を組み込むことができます。以下に、head セクションで使用できるタグを記載します。

• <base>
• <link>
• <meta>
• <script>
• <style>
• <title>

<title> タグは、文書の実際のタイトルのホルダーであり、<head> セクションに必須の要素です。ページを表示すると、このタグに含まれるタイトルがブラウザーの上部に表示されます。HTML5 ページのレンダリングには、リスト 13 の <link> タグで指定する CSS3 スタイルシートが使用されます。呼び出されるスタイルシートは、main-stylesheet.css です。

<head>
     <title>HTML5 Fundamentals Example</title>
     <link rel="stylesheet" href="main-stylesheet.css"  />
</head>

次に、<body> タグ、<header> タグ、<hgroup> タグの順に続けます。これらのタグについては前に説明したとおりです。この例の <h1> 領域には、この架空の会社の名前、Acme United を表示し、<h2> 領域には「A Simple HTML5 Example」というサブタイトルを表示します。リスト 14 に、このマークアップを記載します。

<body >
     <header>
          <hgroup>
               <h1>Acme United</h1>
               <h2>A Simple HTML5 Example</h2>
          </hgroup>
     </header>

リスト 15 に、これまでのページのセットアップに使用する CSS3 を記載します。最初にページのフォントを設定し、続いて本文の詳細として本文のサイズを定義します。次に、第 1 レベルと第 2 レベルの見出しタグのパラグラフ構造を設計します。これらの見出しは、ページに使用します。

* {
	font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
	width: 800px;
	margin: 0em auto;
}

header h1 {
	font-size: 50px;
	margin: 0px;
	color: #006;
}

header h2 {
	font-size: 15px;
	margin: 0px;
	color: #99f;
	font-style: italic;
}

リスト 16 に、メインのサイト・ナビゲーションに対処するように設計された <nav> タグを記載します。

<nav>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
     </ul>
</nav>

HTML5 には、一部のデザイナーや開発者にとって混乱の元となってきた <menu> タグもあります。混乱の原因は、ナビゲーションはしばしば「ナビゲーション・メニュー」と呼ばれることがあるためです。<menu> タグは HTML バージョン 4.01 でいったん廃止されたものの、HTML5 で対話性の強化を目的に生まれ変わりました。メイン・ナビゲーションには、このタグを使用しないでください。メイン・ナビゲーションに使用するタグは、<nav> タグのみです。<menu> タグは後で、この例で使用します。

ナビゲーションのフォーマット設定は、CSS3 で行います。リスト 17 に示す各 <nav> タグの定義は、それぞれに <nav> タグ内に含まれる <ul> および <li> 要素の特定の状態を表します。

nav ul {
	list-style: none;
	padding: 0px;
	display: block;
	clear: right;
	background-color: #99f;
	padding-left: 4px;
	height: 24px;
}
nav ul li {
	display: inline;
	padding: 0px 20px 5px 10px;
	height: 24px;
	border-right: 1px solid #ccc;
}

nav ul li a {
	color: #006;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
}

nav ul li a:hover {
	color: #fff;
}

次は、記事領域です。<article> タグが定義するこの領域には、固有の <header> 情報が含まれます。<article> に含まれる <section> にも、固有の <header> タグがあります。リスト 18 を見てください。

<article>
     <header>
          <h1>
               <a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
          </h1>
     </header>
     <p> Primum non nocere ad vitam Paramus . . . </p>
     <section>
          <header>
               <h1>This is the first section heading</h1>
          </header>
          <p>Scientia potentia est qua nocent docentp . . .>
     </section>

リスト 19 に、このフォーマットをレンダリングする CSS3 マークアップを記載します。paragraph、header、および section 領域の定義はすべて、これらの領域が含まれる <article> タグに対して定義されていることに注意してください。ここで定義している <h1> タグのフォーマットは、ページ・レベルの <h1> タグのために定義した <h1> タグのフォーマットとは異なります。

article > header h1 {
	font-size: 40px;
	float: left;
	margin-left: 14px;
}

article > header h1 a {
	color: #000090;
	text-decoration: none;
}

article > section header h1 {
	font-size: 20px;
	margin-left: 25px;
}

article p {
	clear: both;
	margin-top: 0px;
	margin-left: 50px;
}

<article> に含まれる 2 つ目の <section> タグには、最初の <section> と同じ基本情報が含まれますが、今回ここに含めるタグは、<aside>、<figure>、<menu>、<mark> です (リスト 20 を参照)。

ここで使用している <aside> タグは、このタグが含まれるセクションの話の流れには属さない情報を表示するために使用します。<figure> タグには、ストーンヘンジのグラフィックを組み込みます。この <section> には、<menu> タグもあります。このタグを使って、4 人の女神それぞれの名前を付けたボタンを作成します。いずれかのボタンをクリックすると、その特定の女神に関する情報が表示されるという仕組みです。veni、vidi、vici という単語を強調表示するために、<mark> タグを <p> タグ内で使用します。

<section>
     <header>
          <h1>Second section with mark, aside, menu & figure</h1>
     </header>
     <p class="next-to-aside"> . . .  <mark>veni, vidi, vici</mark>. Mater . . .</p>
     <aside>
          <p>This is an aside that has multiple lines. . . .</p>
     </aside>
     <menu label="File">
          <button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button>
          <button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia</button>
          <button type="button" onClick="JavaScript:alert
		                           ('Urania . . .')">Urania</button>
          <button type="button" onClick="JavaScript:alert
		                           ('Calliope . . .')">Calliope</button>
     </menu> 
     <figure><img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/>
          <figcaption>Figure 1. Stonehenge</figcaption>
     </figure>
</section>

このセクションの CSS3 には、<p> タグの新しい定義を含めて、このセクションの幅をページに設定した幅よりも短くします。このように変更することで、テキストに重なることなく、補足情報をページの右に寄せることができます。リスト 21 に、このマークアップを記載します。

article p.next-to-aside {
	width: 500px;
}

article >  section figure {
	margin-left: 180px;
	margin-bottom: 30px;
}

article > section > menu {  
	margin-left: 120px;
}	  

aside p {  
        position:relative;
        left:0px;
        top: -100px;
		z-index: 1;
        width: 200px;  
    	float: right;
	    font-style: italic; 
       	color: #99f;
}  

ビデオ・セクションの要素

<article> を構成する最後のコンポーネントは、video セクションです。このサンプル動画は Ogg で、ページをロードすると自動再生され、そのままループを続けます。動画を一時停止および再生するには、コントロールを使用します。最近のインスタンスの多くでは、Ogg 動画に拡張子 ogv (video の v) が使用されています (リスト 22 を参照)。<audio> タグについても、このタグと同じように機能します。

     <section>
          <header>
               <h1>This is a video section</h1>
          </header>
          <p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" 
                                controls autoplay loop>
                <div class="no-html5-video"><p>This video will work in 
                                Mozilla Firefox or Google Chrome only. </p>
                </div>
          </video></p>
     </section>
</article>

リスト 23 に、video セクションの CSS3 定義を記載します。

article > section video {
	height: 200px;
	margin-left: 180px;
}
	
article > section div.no-html5-video{
	height: 20px;
	text-align: center;
	color: #000090;
	font-size: 13px;
	font-style: italic;
	font-weight: bold ;
	background-color: #99f;
}	  

ページのフッターおよび終了タグはリスト 24 のとおりです。

          <footer>
              <p>Copyright: 2011 Acme United. All rights reserved.</p>
          </footer>
     </body>
</html>   

リスト 25 は、フッターの CSS3 です。

footer p {
	text-align: center;
	font-size: 12px;
	color: #888;
	margin-top: 24px;
}

上に戻る

まとめ

Web ページが完成したところで、この連載の第 1 回は終了です。この記事で最終目標としたのは、新しい HTML5 方式を紹介することでした。HTML5 は単なる HTML4 のアップグレードではありません。HTML5 は、デジタル通信の新たな手段です。CSS3 と JavaScript の機能によって、HTML5 は関連するすべてのものを 1 つのパッケージのようなもので開発者に提供するところまで来ています。世間に出回っている HTML5 の一般的な使用方法に関する大量の情報から必要な情報を吸収するのに前向きであれば、ますます増え続ける優秀な HTML5 マルチメディア Web デザイナーと開発者の 1 人になれます。連載の次回の記事では、HTML5 フォームのコーディングおよびフォーマットの設定方法について検討します。

上に戻る

ダウンロード

ダウンロード形式について

参考文献

学ぶために

• 「Create modern Web sites using HTML5 and CSS3」(developerWorks、2010年3月) は、複数のコンポーネントからなる HTML5 と CSS3 を学ぶための記事です。
  
  
• 「HTML 5 の新要素」(developerWorks、2007年8月) では、HTML5 の新しい要素をいくつか紹介しています。
  
  
• HTML5 Doctor Webサイトにアクセスすると、現在の HTML5 の動向が的確にわかります。
  
  
• W3Schools.com HTML5 Tag Reference に、HTML5 のすべてのタグ、定義、およびサンプルが記載されています。
  
  
• WHATWG Web サイトでは、HTML5 仕様の詳細を説明しています。
  
  
• W3Schools.com CSS3 Reference に、CSS バージョン 3 に関する広範な情報が提供されています。
  
  
• Web development ゾーンでは、多種多様な Web ベースのソリューションを話題にした記事を揃えています。
  
  
• developerWorks Technical events and webcasts で最新情報を入手してください。
  
  
• developerWorks オンデマンド・デモ: 初心者向けの製品のインストールおよびセットアップから熟練開発者向けの高度な機能に至るまで、さまざまに揃ったデモを見てください。
  
  
• Twitter で developerWorks をフォローしてください。
  
  

議論するために

• 今すぐ developerWorks で自分のプロフィールを作って、HTML に関するウォッチ・リストをセットアップしてください。developerWorks コミュニティーとずっとつながっていられます。
  
  
• Web 開発に興味を持つ他の developerWorks メンバーを見つけてください。
  
  
• Web のトピックを専門とする developerWorks グループに参加して、知識を共有してください。
  
  
• Roland Barcia が彼のブログで Web 2.0 とミドルウェアについて語っています。
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• ページの計画
• ヘッダー領域
• ナビゲーション領域
• 記事領域およびセクション領域
• 補足情報領域
• フッター領域
• ページの作成
• まとめ
• ダウンロード
• 参考文献
• 著者について
• コメント