HTML5 と CSS3 を使用して時代に即した Web サイトを作成する

HTML5 の canvas 要素と video 要素を実装する

1990年代初頭に World Wide Web が登場して以来、HTML はとりわけ強力なマークアップ言語となるまでに進化しました。HTML をその密接なパートナーである JavaScript と CSS と組み合わせて使用することで、視覚的に魅力的で、しかもインタラクティブな Web サイトおよびアプリケーションを作成することができます。このチュートリアルは、HTML5 および CSS3 の実践的入門ガイドとして、HTML5 が提供する新しい要素と API の機能および構文、そして CSS3 で新たに追加されたセレクター、エフェクト、機能を紹介し、最後にこれらの新機能の数々を利用したサンプル Web ページの開発方法を説明します。このチュートリアルを終える頃には、HTML5 と CSS3 で駆動する Web サイトまたはアプリケーションの作成に早速取り掛かれるようになっているはずです。

Joe Lennon, Software developer, Freelance

Photo of Joe LennonJoe Lennon は、アイルランドのコーク出身の 24 歳のソフトウェア開発者です。彼は Apress から出版予定の『Beginning CouchDB』の著者で、IBM developerWorks の技術記事やチュートリアルにも度々貢献しています。余暇は、サッカー、ガジェットの研究、そして Xbox 360 のゲームで楽しんでいます。彼の連絡先は、彼の Web サイト www.joelennon.ie です。



2011年 12月 09日

始める前に

このチュートリアルでは、読者に HTML、CSS、および JavaScript での基本的な経験があることを前提とします。HTML に関しては、その要素またはタグの概要、属性の意味、HTML マークアップの基本構文、Web ページの全体構造などを理解している必要があります。CSS に関しては、要素、クラス、ID ベースのセレクター、CSS プロパティーの構文、そしてインライン・スタイルシートまたは外部スタイルシートを使用して CSS を Web ページに組み込む方法について十分に理解していることが求められます。さらに、JavaScript の変数、関数、if 文、for ループの概要、および JavaScript コードを Web ページに組み込む方法についての実用的な知識も必要です。チュートリアルを開始する前に、これらの技術について復習する必要があると思ったら、「参考文献」セクションで紹介しているチュートリアルまたは記事を参考に、前もって HTML、CSS、および JavaScript による開発の基本を押さえておいてください。

このチュートリアルについて

この 10 年の間、Web 2.0 やリッチ・インターネット・アプリケーション (RIA)、そしてセマンティック Web などの概念によって、HTML、CSS、および JavaScript にはその最大限あるいはそれ以上の力が求められるようになっています。Web 2.0、RIA、セマンティック Web はほとんどの場合、動画や音声などのコンポーネント、そして極めてグラフィカルでインタラクティブなアプリケーションを駆動するために Adobe Flash などのプラグインを利用しています。Adobe Flex 開発フレームワーク、Microsoft Silverlight プラットフォーム、および JavaFX はいずれも、開発者を苦境に陥れている HTML の弱点を補うことを目指してきました。一方、HTML5 では完全なマルチメディア・サポート、ローカル・ストレージとオフライン・アプリケーションのサポート、ネイティブ 2D 描画 API、そして数多くの新しいアプリケーション開発 API を武器に巻き返しを図っています。そのすべては、HTML、CSS、JavaScript の組み合わせが Web サイトおよび Web アプリケーションのリッチなフロントエンドを実現できることを証明することを目的としています。

2010年に公開予定の HTML5 は、最も重要な新技術の 1 つとして広く認められています。すでに HTML5 に関する書籍の執筆も進められており、そのうちの一部は、早ければ今年 3 月には出版される予定です。長年 Web は、Web ブラウザーでネイティブにサポートできない機能を実現する際に外部プラグインを利用してきました。特に、2D 描画、アニメーション、マルチメディアに関しては、外部プラグインへの依存が顕著となっています。最新バージョンの HTML および CSS 仕様が目指しているのは、そのような追加ブラウザー・コンポーネントの必要性をなくし、今まで外部プラグインに依存してきた機能を容易に実現できるようにすること、そして表における行のドラッグ・アンド・ドロップや行のストライピング (表の背景色を行ごとに交互に変更すること) などといった平凡な操作に必要な JavaScript コードの量を減らすこと (場合によっては、JavaScript をまったく必要でなくすること) です。このチュートリアルを読んで、HTML5 を活用する方法を学んでください。

前提条件

HTML5 はかなり歴史の浅い仕様であるため、(この記事を執筆している時点では) ブラウザーのサポートはかなり限られています。このチュートリアルに記載するコードは、可能な限りどのブラウザーにも対応するように作成されていますが、一部の機能は、すべてのブラウザーで動作するわけではありません。特定のブラウザーでしか動作しない機能については、チュートリアルの説明の中で明記します。HTML5 および CSS3 のアプリケーションを開発する際には、新機能のすべてを体験できるように、以下の Web ブラウザーの最新バージョンをシステムにインストールすることをお勧めします。

HTML および CSS コードを作成するには、特定のソフトウェアは必要ありません。基本的なテキスト・エディター (メモ帳、vi、emacs など) さえあれば十分です。このチュートリアルでは、ソース・コードをローカル・コンピューター上のディレクトリーに保存することを前提としているので、Web サーバーを使用する必要も、Web ホスティング・サービスにファイルをアップロードする必要もありません。


HTML5 の新機能

このセクションでは、HTML5 が提供する優れた新機能のいくつかを紹介します。まず初めに紹介するのは、最近の Web ページの構成部分となっている見出し、フッター、ナビゲーション・バー、サイドバーなどに意味を持たせることを目的とした新しいセマンティック要素です。次に、形状や、テキスト、アニメーション、トランジションなどの作成を可能にする、重要な新規 <canvas> 要素および 2D 描画用 JavaScript API について説明します。続いて、Web がマルチメディアを提供するためのプラットフォームとして現在依存している Flash に対して、新たな <audio> および <video> 要素がどのように置き換わろうとしているのかを明らかにします。その後に紹介するのは、ローカル・ストレージ API とオフライン・アプリケーションのサポートです。このサポートにより、ネットワークやインターネットに接続していないとしても、Web アプリケーションはデスクトップ・アプリケーションの機能水準にますます近づくことになります。そして最後に、現在の HTML5 仕様で提案されているその他の新しい要素、属性、API の概要を説明してセクションを締めくくります。

このトピックに関するスキルを磨いてください

このチュートリアルは、漸進的にスキルを磨いていくナレッジ・パスの一部となっています。「HTML5 の基礎」を参照してください。

セマンティック要素

HTML5 仕様には、Web ページを構成するさまざまなセクションまたはパーツ (見出し、フッター、ナビゲーションなど) に意味を持たせるための新たなセマンティック要素を規定しています。HTML の以前のバージョンでこれらの構成部分を作成する場合には、<div> 要素を使用して、ID またはクラス属性によってそれぞれを区別するのが通常です。けれども、どのクラス名または ID を使用するかを指定する厳格なルールが定義されていないため、この方法ではセマンティックな意味がパーツに付与されません。したがって、ソフトウェアがその特定のエリアの内容を極めて判断しにくいという問題がありました。HTML5 では、Web ブラウザーが文書のセマンティックな構造を簡単に構文解析できるようになるため、この問題は軽減されるはずです。

ちなみに HTML5 で引き続き <div> 要素を使用してもまったく問題ありませんが、作成するコードを将来にわたって使用できるようにするためには、該当する箇所にセマンティック要素を使用することをお勧めします。その反面、これらの新しい要素を意図されている以外の目的で使用することは控えてください。例えば、あらゆるリンクのグループにむやみに <nav> 要素を使用するべきではありません。この要素は、ページ上のメイン・ナビゲーション・ブロックを囲むように意図されているためです。

HTML5 で導入されている主要なセマンティック要素には以下に挙げるものがあります。

<header>
この要素は Web ページのページ全体、あるいはページを構成する <article> 要素、<section> 要素などに対して見出しを定義するための要素です。
<footer>
<header> 要素と同じように、この新しい要素はページの特定の部分に対してフッターを定義します。フッターは必ずしもページ、<article> 要素、<section> 要素などの終わりに組み込む必要はありませんが、通常はこれらの場所に組み込みます。
<nav>
Web ページ上の主なナビゲーション・リンクのコンテナーとなります。この要素は、あらゆるリンクのグループに使用するように意図されているものではなく、主なナビゲーション・ブロックにのみ使用することができます。<footer> 要素にナビゲーション・リンクを含める場合には、これらのリンクを <nav> 要素でラップする必要はありません。<footer> 要素だけで十分です。
<article>
<article> 要素は、Web ページ上にニュース記事、ブログ投稿、コメントなど、単独で配布可能な独立したアイテムを定義するために使用します。このようなアイテムは一般に、RSS フィードを使用して配布されます。
<section>
この要素は、文書またはアプリケーションのセクション (記事またはチュートリアルの章や節など) を表します。例えば、皆さんが今読んでいるセクションは、HTML5 では <section> 要素に含めることができます。必須というわけではありませんが、通常、<section> 要素には見出しがあります。今読んでいるセクションを例にとると、その見出しは「セマンティック要素」というテキストになります。
<aside>
この新しい要素は、周りのコンテンツとは別のものとみなされる、サイドバーあるいはその他のコンテンツをマークアップするために使用することができます。そのようなコンテンツの例には、広告ブロックが挙げられます。
<hgroup>
場合によっては、ページ、<article> 要素、<section> 要素などに複数の見出しが必要になることがあります (例えば、タイトルとサブタイトルがある場合など)。このチュートリアルでこれに該当するのは、「HTML5 と CSS3を使用して時代に即した Web サイトを作成する」というタイトルと「HTML5 の canvas 要素と video 要素を実装する」というサブタイトルです。この場合、タイトルとサブタイトルを <hgroup> 要素でラップし、メイン・タイトルには <h1> 要素を、サブタイトルには <h2> 要素を使用することになります。

このチュートリアルの終わりでは、上記の新規セマンティック要素のいくつかを組み込んだサンプル Web サイトを作成します。その時点で、それぞれの構文と使用法について詳しく説明します。

<canvas> 要素

<canvas> 要素は当初、Apple が Mac OS X Dashboard ウィジェットと Safari で使用するために開発したものですが、その後、Mozilla と Opera がそれぞれの Web ブラウザーに導入しました。HTML5 仕様では <canvas> 要素を標準化し、この要素内に形状、テキスト、トランジション、アニメーションを作成するための一連の 2D 描画 API と併せて規定しています。

多くの人々は、<canvas> 要素は HTML5 の最も重要な側面の 1 つだと信じています。それは、この要素によって、Adobe Flash などの外部プラグインを使わずに、グラフ、インタラクティブなゲーム、ペイント・アプリケーション、その他のグラフィックなどをすぐさま簡単に作成できるようになるからです。

<canvas> 要素自体は、オブジェクトの幅、高さ、一意の ID を定義する、至って基本的な要素です。開発者が実際にこのキャンバス上にオブジェクトを描画するには、JavaScript API を使用しなければなりません。通常、これらのオブジェクトが描画されるのは、Web ページのレンダリングが完了したときです。JavaScript API を使用して開発者が行える操作には、形状と線の描画、色、不透明度、グラデーションの適用、テキストの作成、キャンバス・オブジェクトの変形、アニメーションの実行などがあります。さらに、JavaScript API では <canvas> 要素をインタラクティブにして、マウス・イベントやキー・イベントなどのユーザー入力に応答させることもできるので、キャンバス上で容易にゲームや Web アプリケーションを作成することができます。<canvas> 要素の使用例は、このチュートリアルの最後に紹介するサンプル HTML5/CSS3 Web サイトで紹介します。

<audio> および <video> による音声、動画の再生

ここ数年で、マルチメディア・ストリーミング配信を目的として Web を利用する人たちの間で、YouTube などの動画共有サイトと Hulu のようなコンテンツ配信プラットフォームの人気が爆発的に高まりました。しかし残念ながら、Web はマルチメディア・コンテンツを考慮して作られてはいなかったため、動画と音声を提供する場合は Flash Video (.flv) ファイル形式と Adobe Flash プラットフォームに大幅に頼ってきました。

HTML5 では 2 つの新しい要素、<audio> および <video> をサポートしています。これらの要素を使用すれば、Web 開発者はユーザーがブラウザーにプラグインを追加でインストール済みであることを前提とせずに、マルチメディア・コンテンツを組み込むことができます。Mozilla Firefox、Apple Safari、Google Chrome をはじめとするいくつかのブラウザーでは、すでにこの新しい要素のサポートを開始していて、ユーザーがこれらの要素を使用する選択をしていれば、ブラウザーの標準的な再生用コントロールが提供されるようになっています。さらに、開発者が独自の再生用コントロールを作成できるように、標準 JavaScript API も提供されています。ネイティブのマルチメディア再生を利用する主なメリットは、理論上必要とされる CPU リソースが減るため、エネルギー節約につながる可能性があることです。

一方で、これらの新しいマルチメディア要素を使用する際の主な問題として、各ブラウザーがサポートしているファイル形式に関する問題と、これらのファイルへエンコードする際に使用される各種コーデックの特許ライセンスに関する問題があります。Mozilla と Opera では、特許ライセンスなしで Web ブラウザーに組み込めるオープンソースの Theora を動画コンテナーおよびビデオ・コーデックとして使用するようにしています。その一方、Apple と Google では、特に YouTube のようなサイトの高解像度 (HD) コンテンツを配信するには Theora の品質では十分でないとしH.264 コーデック (通常、ファイル形式は MP4、MOV、または MKV) を使用しています。

この問題は動画だけに限られず、音声コーデックにも同じ問題が存在します。MP3 および AAC 形式は特許によって使用が制限される一方、Vorbis 形式には特許による制限がありません。しかし Vorbis 形式には、ポータブル・メディア・プレイヤーや多くのメディア・ソフトウェア・アプリケーションが Vorbis 形式をサポートしていないため、あまり広く使われていないという問題があります。

HTML5 の <video> および <audio> に関しては、近い将来、さまざまな決定がなされるはずです。最終勧告にどのコーデックとファイル形式が記載されるのかは興味深いところですが、それまでは、すべてのブラウザーに対応するように、さまざまなファイル形式の動画を用意する一方で、Flash 動画をフォールバック用として提供してください。今後、最終的な決定が下されること、そしてサポートする形式の決定がブラウザー・ベンダーに委ねられないようになることを祈りましょう。そうでない限り、これらの新しい要素は使えないものになってしまいます。

<video> 要素についても、チュートリアルの後のほうで使い方を紹介します。

ローカル・ストレージとオフライン・アプリケーション

従来から、Web 開発者は cookie を使用して、サイトの訪問者のローカル・マシンに情報を保存し、Web ページがこの情報を後で読み取れるようにしています。cookie は基本的なデータを保存するのに非常に役立ちますが、Web ブラウザーは 1 つの Web サーバーに対して 20 を超える cookie を保持する必要がなく、cookie ごとに 4KB を超えるデータ (名前と値の両方を含む) を保持する必要もないというところで、その有用性には限界があります。さらに、cookie は HTTP リクエストが行われるたびに Web サーバーに送信されるため、リソースの無駄になります。

このような問題を解決するために HTML5 が提供しているのが、ローカル・ストレージ API です。これらの API は、メインの HTML5 文書とは別の仕様で規定されています。ローカル・ストレージ API を使用することで、開発者はサイトの訪問者のコンピューターに情報を保存できるだけでなく、保存した情報がその後も残り続けることをある程度確信することができます。さらに、この情報は随時 (ページがレンダリングされた後でも) アクセス可能であり、HTTP リクエストのたびに自動的にロードされることはありません。この仕様では、同一生成元の制約が適用されるため、Web サイトが他の Web サイトで保存されているデータを読み取ることや、変更することはできません。

ほとんどのブラウザーは Web ページをローカル・キャッシュに保存し、ユーザーがオフラインになってもページを表示できるようにしています。この方法は静的なページに対しては上手く機能しますが、Gmail や Facebook、Twitter などの概してデータベース駆動型である動的コンテンツに対しては使用することはできません。そこで HTML5 が提供しているのが、オフライン・アプリケーションのサポートです。オフライン・アプリケーションでは、ブラウザーはアプリケーションをオフラインで使用するために必要なすべてのファイルをダウンロードし、ユーザーがアプリケーションをオフラインで使用できるようにします。そしてユーザーがオフラインで行った変更はすべて、インターネットに再接続されたときにブラウザーによってサーバーにアップロードできるようにします。

Web フォームの機能強化

Web アプリケーションを作成した経験がある読者の方は、HTML の一連のフォーム・コントロールには馴染みがあるはずです。ご存知のとおり、これらのコントロールのなかには、<input> 要素を使用して実装されるものがあります。HTML 4では、以下の入力タイプがサポートされていました。

  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • reset
  • radio
  • submit
  • text

<input> 要素の他にも、フォームで使用される要素には <select> や <textarea> などもあります。これらのフォーム・コントロールは、例えば連絡先フォームで一般的に使われている名前、電話番号、住所などの基本的なフォーム・フィールドにさまざまな機能を提供します。けれども、プラットフォームとしての Web は、連絡先フォームの送信手段として HTML フォームを使用するという段階を遥かに超えて進化しています。今や HTML フォームは、サーバー・サイドで処理するアプリケーション・データを送信するための手段としても使われています。このことから、Web アプリケーション開発者には、スピナー、スライダー、日付/時刻ピッカー、カラー・ピッカーといった、より高度なフォーム・コントロールが常に必要になっています。

このような高度なフォーム・コントロールを組み込む場合、これまでは UI コンポーネントを提供する外部 JavaScript ライブラリーを使用するか、さもなければ Adobe Flex、Microsoft Silverlight、JavaFX などといった開発フレームワークを代わりに使用しなければなりませんでした。HTML5 では、フォームの新たな入力タイプとして以下に挙げるような広範な種類を規定することで、前のバージョンではカバーしていなかった高度なフォーム・コントロールをある程度サポートすることを目指しています。

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

現時点では、新しいフォーム・フィールドのサポートはかなり限られてはいるものの、iPhone の Mobile Safari ブラウザーはこれらの新しいタイプをいくつか利用してユーザーに表示するキーボードのタイプを変えています (例えば、email タイプでは、@ 記号と .com のショートカットが表示されます)。また、Opera ではこれらのコントロールの多くに対応した新しいウィジェットを提供しています (number タイプに対応したスピナーや、日付関連のタイプに対応したカレンダー日付ピッカーなど)。これらの HTML5 で新しく規定された入力タイプのうち、最も広く使用できるのは range です。このタイプは、Opera、Safari、Google Chrome ではスライダーとしてレンダリングされます。

新しい入力タイプに加え、HTML5 はフォーム・フィールドを対象とした 2 つの主要な新機能もサポートするようになっています。その 1 つは、ページがレンダリングされたときに特定のフォーム・フィールドにフォーカスを置くようにブラウザーに指示するオートフォーカス機能です。この機能により、JavaScript コードでフォーカスを操作する必要がなくなります。もう 1 つの機能強化は placeholder 属性をサポートしたことです。開発者はこの属性を使用して、テキスト・ボックス・ベースのコントロールが空の場合にそこに表示するテキストを定義することができます。例えば、検索ボックスでは、開発者はボックスの外にラベルを使用することは避けようとするものです。その場合、placeholder 属性を使用することで、コントロールの値が空の場合、そしてコントロールにフォーカスが置かれていない場合に表示するテキストを指定することができます。図 1 に、一例を示します。

図 1. placeholder 属性の使用例
名前、e-メール・アドレス、電話番号、コールバックといったテキスト入力フィールド、そして優先度が示されています。名前のフィールドには「Joe Lennon」と入力されています。e-メール・アドレスおよび電話番号を入力するフィールドにはグレーのプレースホルダー・テキストが表示されています。一番下にあるボタンには、「Request Call (発信)」というテキストが示されています。

図 1 に示されているように、e-メール・アドレス (E-mail:) と電話番号 (Phone:) の入力フィールドは、まだ何も入力されておらず、フォーカスも置かれていないため、グレーのプレースホルダー・テキストが表示されています。このスクリーン・ショットには、Safari ブラウザーではスライダーとして表現される、range 入力タイプの例も示されています。このスクリーン・ショットは、後で説明するサンプル Web ページから撮ったものです。

その他の新機能

HTML5 は数多くの新機能を導入しており、このチュートリアルでそのすべてを取り上げることはできません。このセクションでは、この仕様に盛り込まれたその他の機能強化をいくつか抜粋して概要を簡単に説明します。

Web ワーカー
マルチスレッド・アプリケーションの開発を容易にするため、Web ワーカーによって、JavaScript コードがバックグラウンド・プロセスで実行されるように設定できるようになっています。Web ワーカーを利用することで開発者にもたらされる主なメリットは、ユーザー・インターフェースの速度に悪影響を及ぼすことなく、集中的な計算をバックグラウンドで処理できることです。
ジオロケーション
対象とする機器にジオロケーション情報の検出機能が備わっている場合 (携帯電話の GPS 機能など)、HTML5 で追加されているジオロケーション API を使用して、Web アプリケーションがユーザーの地理的な現在位置を判断できるようにすることができます。対象とする機器が、この機能をサポートしている機器 (iPhone や Android 2.0 ベースのスマートフォンなど) でない場合には、Firefox を使用して、手動で位置を設定するためのプラグインをダウンロードするという方法もあります。
ドラッグ・アンド・ドロップ
ドラッグ・アンド・ドロップ API が追加されていることも、興味深い点です。今までは、プラグインを使用せずにドラッグ・アンド・ドロップを実装するには、非常に複雑な JavaScript を使用するか、script.aculo.us などの JavaScript ライブラリーを使用するしかありませんでした。
クロスドキュメント・メッセージング
クロスドキュメント・メッセージングは、別々のウィンドウ (あるいは iframe) にある文書同士が互いにメッセージを送受信できるようにするための機能です。主要な Web ページのサーバーとは別のサーバーでホストされるウィジェットやアプリケーション (Facebook のようなアプリケーション) の開発には、この機能が大いに役立つことになるでしょう。
その他
HTML5 で導入しているその他の新機能には、MIME タイプとプロトコル・ハンドラーの登録 (Web アプリケーションを特定のファイル・タイプまたはプロトコルのデフォルト・アプリケーションとして登録することができます)、ブラウザー履歴管理 (これまでは、手動で実装するか、外部 JavaScript フレームワークを使用しなければなりませんでした)、そして Web 開発者の作業を楽にするその他多数の新規要素および属性があります。

CSS3 の新機能

このセクションでは、新しい CSS セレクター (構造擬似クラス、状態ベースの擬似クラス、否定擬似クラス、その他の新しいタイプなど) をはじめとする、CSS Level 3 仕様に見られる新機能を紹介します。また、CSS3 で追加された数々のエフェクトも紹介します。これらのエフェクトは、以前は必要な画像を別のアプリケーションを使用して作成し、GIF、JPG、または PNG として保存しなければならなかったものです。その例としては、テキストやボックスのドロップ・シャドウ、枠線の角丸、そして外観を半透明にするための不透明度の使用などが挙げられます。これらの機能の多くは (不透明度や角丸など) は、レガシー Web ブラウザーでは極めてグレースフルにデグレードすることから比較的普及しています。次に、CSS3 によって作成できるようになった段組みレイアウトについて説明します。段組みレイアウトでは、新聞のレイアウトのように、テキストが必要に応じて複数のカラムや特定のカラム幅に流し込まれます。このセクションでは、@font-face タグを使用して非標準 Web フォントを組み込むという課題についても説明します。そして最後に、その他の新しい CSS3 機能として、HSL (色相、彩度、輝度) および RGBA (赤、緑、青、アルファ・チャネル) カラー・モデルについて紹介します。

新しいセレクター

CSS セレクターとは、HTML 要素にどのようなスタイルを設定するのかをスタイルシートを使用して表すものです。例えば、すべての <div> 要素を枠線で囲むには、セレクターdiv を使用して、div { border: 1px solid #000; } とします。

highlight クラスのすべての要素に背景色を適用する場合には、セレクター .highlight を使用し、.highlight { background-color: yellow; } とします。

ID 属性の値が myDiv に設定された要素の幅を変更するとしたら、#myDiv { width: 250px; } を使用します。

もちろん、これらのセレクターは組み合わせて使用することができます。例えば、highlight クラスのすべての <div> 要素を選択するには div.highlight とし、ID が myDiv の <div> 要素を選択するには div#myDiv とするといった具合です。

このような単純なセレクターとは別に、CSS には (以前のバージョンでもそうでしたが) 一連の複合セレクターもあります。例えば、セレクター input[type="text"] を使用すれば、text という値を持つ属性タイプが含まれる入力要素だけを選択することができます。あるいは、要素にマウスが重なったときにその要素にスタイルを適用するために、擬似クラス :hover を使用して、a:hover { color: red; } とすることもできます。

この他にも、スタイルを適用する要素を簡単に選択できるようにするために多数のセレクターが提供されていますが、この豊富なセレクター群に、CSS3 ではさらに多くの新しいセレクターを追加しています。これらのセレクターによって開発者の作業はさらに楽になり、作成しなければならない HTML およびJavaScript の量が減ります。

属性セレクター

E[foo^="bar"]
E 要素の foo 属性の値がストリング “bar” で始まる場合に、その E 要素を選択します。
E[foo$="bar"]
E 要素の foo 属性の値がストリング “bar” で終わる場合に、その E 要素を選択します。
E[foo*="bar"]
E 要素の foo 属性の値にストリング “bar” が含まれる場合に、その E 要素を選択します。

構造擬似クラス

xxx

E:root
文書のルートが E 要素である場合に、その E 要素を選択します (HTML5 の場合は <html> タグ)。
E:nth-child(n)
親要素の n 番目の子が E 要素である場合に、その E 要素を選択します。
E:nth-last-child(n)
親要素の子のうち最後から数えて n 番目の子が E 要素である場合に、その E 要素を選択します。
E:nth-of-type(n)
兄弟関係にある E 要素のうち、n 番目の E 要素を選択します。
E:nth-last-of-type(n)
兄弟関係にある E 要素のうち、最後から n 番目の E 要素を選択します。
E:last-child
親要素の最後の子が E 要素である場合に、その E 要素を選択します (E:first-child はすでに CSS2 で定義されていることに注意してください)。
E:first-of-type
兄弟関係にある E 要素のうち、最初の E 要素を選択します。
E:last-of-type
兄弟関係にある E 要素のうち、最後の E 要素を選択します。
E:only-child
親要素の唯一の子が E 要素である場合に、その E 要素を選択します。
E:only-of-type
兄弟関係にある唯一の要素が E 要素である場合に、その E 要素を選択します。
E:empty
E 要素が子要素 (テキスト・ノードを含む) を持たない場合に、その E 要素を選択します。

ターゲット擬似クラス

E:target
参照している URI のターゲットが E 要素である場合に、その E 要素を選択します。

UI 要素状態擬似クラス

E:enabled
ユーザー・インターフェース要素 E が使用可能な状態である場合に、その E 要素を選択します。
E:disabled
ユーザー・インターフェース要素 E が使用不可能な状態である場合に、その E 要素を選択します。
E:checked
ユーザー・インターフェース要素 E (チェック・ボックスまたはラジオ・ボタン) がチェックを入れられた状態、あるいは選択された状態である場合に、その E 要素を選択します。

否定擬似クラス

E:not(s)
単純セレクター s と一致しない E 要素を選択します。

一般兄弟結合子

E ~ F
E 要素の後に続く F 要素を選択します。

新しい属性セレクターと一般兄弟結合子は、最近のほぼすべての Web ブラウザーで機能するため、これらのセレクターに対するブラウザーによるサポート状況は際立って優れています。新しい擬似クラスに関しては、ほとんどのブラウザーの最新バージョンでサポートされていますが、Internet Explorer 6/7 や Firefox 3.0 などの古いブラウザーのために、フォールバックを含める必要があります。

新しいエフェクト

新しいセレクターは、おそらく開発者の頭痛の種を最も減らすことになりますが、ユーザーが最も待ち望んでいる機能強化は、CSS3 で使用できるようになっている今までにない新しいエフェクトです。これらのエフェクトは、以下をはじめとする数々の新しい CSS プロパティーによって容易に実現できるようになっています。

  • background (複数の背景をサポートするようになりました。)
  • background-clip
  • background-origin
  • background-size
  • border-radius (角丸)
  • border-image
  • border-color (グラデーション付き枠線)
  • box-shadow (画像を使わずにボックスに適用するドロップ・シャドウ)
  • box-sizing
  • opacity
  • outline-offset
  • resize
  • text-overflow
  • text-shadow
  • word-wrap

チュートリアルの最後で作成するサンプル HTML5/CSS3 Web ページで、これらの新しいエフェクトのいくつかを実際に使用します。

段組みレイアウト

CSS3 の段組みレイアウトを使用すれば、新聞で目にするような、テキストを複数のカラムに流し込んだレイアウトにすることができます。それには 2 つの方法があります。1 つは、column-width プロパティーを使用して各カラムの幅を定義する方法です。この場合、カラムの数はコンテナーで使用可能なスペースによって決まります。もう 1 つの方法では、column-count プロパティーを使用してカラムの数を定義します。この場合には、各カラムで使用できるスペースに応じてカラムの幅が決まります。

段組みレイアウトには、column-gap プロパティーという機能もあります。column-width の方法を使用する場合、開発者は column-gap プロパティーを使ってカラムの間のスペースを定義することができます。また、column-rule プロパティーも有用な追加機能です。このプロパティーでは、カラムの間に border-style ルールを適用することができます。さらに、余ったスペースをカラムに配分する方法を決定する column-space-distribution プロパティーもあります。

段組みレイアウトは現在、Mozilla ブラウザーと WebKit ブラウザーでサポートされています。現時点では、それぞれ -moz、-webkit の接頭辞が付いた一時的な独自仕様プロパティーによって実装されていますが、仕様が最終的に確定される頃には、この 2 つのブラウザーは CSS の標準プロパティーに移行しているはずです。

Web フォント

Web フォントは実際には CSS2 で提案され、Microsoft Internet Explorer バージョン 5 以降で使用できるようになっています。けれども、Web フォントを使用するには独自仕様の .eot (Embedded Open Type) フォント形式を使用しなければならず、Microsoft 以外のブラウザー・ベンダーではその実装を見送ったため、Web フォントが CSS2 ベースの Web サイトで広く使われるようになることはありませんでした。

その一方、Firefox、Safari、Chrome、および Opera の最新バージョンでは、@font-face ルールを使用することで、あらゆるライセンス付き .ttf (TrueType) または .otf (OpenType) フォントを Web ページで使えるようになりました。@font-face ルールは、例えば @font-face { font-family: Alexa; src: url('Alexa.otf'); } のように使用します。

現在、上記のフォントは article p { font-family: Alexa, Arial, Helvetica, sans-serif; } のようにして、独自の CSS ルールで使えるようになっています。

フォントは画像のようなものであることを忘れないでください。つまり、自分で所有していないフォントを Web で使用するには許可が必要な場合があります。あるいは、Web ページに自由に組み込むことのできるロイヤルティー・フリーのフォントを気に入れば、代金を払うことも (または無料でダウンロードすることも) できます。

その他の新機能

CSS3 で追加されている多くの新機能には、新しい色の値に対するサポートもあります。そのうち注目すべきは、HSL (色相、彩度、輝度) のサポート、そしてアルファ・プロパティーを使用した 2 つのカラー・モデル、RGBA (赤、緑、青、アルファ・チャネル) と HSLA (色相、彩度、輝度、アルファ・チャネル) のサポートです。また、メディア・クエリーでは、機器のビューポート・サイズに応じて機器ごとに異なるスタイルを定義することができます。例えば、ビューポートが 500 ピクセル未満の機器 (スマートフォンや PDA、またはその他のモバイル機器) に特定のスタイルを指定するなどです。さらに、CSS3 には、スクリーン・リーダーの音声プロパティー (音量、バランス、速度、アクセントなど) を制御するための音声モジュールもあります。


サンプル HTML5/CSS3 ページの作成

この段階まで来て、皆さんは HTML5 と CSS3 が提供する素晴らしい新機能を使用したページを実際に作成してみたいと思っていることでしょう。そこでこれから、HTML5 と CSS3 の新しい機能の多くを盛り込んだ HTML ページを作成します。このセクションでは、以下のサブセクションに分けてサンプル・ページの開発方法を詳しく説明します。

  • HTML5 ページの基本構造
  • 新しいセマンティック要素の使い方
  • <video> 要素の紹介
  • Web フォームの機能強化
  • <canvas> 要素と 2D 描画 API

ソース全体は、index.html という名前の 1 つの HTML ファイルに組み入れられます (「ダウンロード」を参照)。このファイルはコンピューターの任意の場所から開くことができるので、Web サーバーにファイルをデプロイしてロードする必要はありません。一部のブラウザーは、ローカルでのスクリプト実行に対して警告メッセージを出すかもしれませんが、プロンプトが出されても、動的スクリプト機能を有効な状態のままにしておいてください。

開発プロセスのところどころで、ページの CSS ルールを外部スタイルシート・ファイルである styles.css に追加します。その時点で、サンプル・ページで使用されている border-radius、text-shadow、box-shadow などの新しい CSS3 のプロパティーの使用例を確認することができます。

背景情報はこれぐらいにして、早速 HTML5 の作業に取り掛かりましょう。

HTML5 ページの基本構造

おそらくご存知のことと思いますが、Web ブラウザーは HTML 文書に有効な doctype があるかどうかに応じて、異なるモードで動作することができます。有効な doctype が見つからなければ、ブラウザーは互換 (Quirks) モードで動作し、非標準機能がある場合でも後方互換のために維持されます。有効な doctype が見つかると、ブラウザーは標準 (Standards) モードで動作し、W3C および IETF 標準に準拠します。

HTML5 の doctype は、至って単純な <!doctype html> です。

HTML5 のページを作成する場合は、すべてのページの先頭に <!doctype html> を含める必要があります。この行を含めたら、早速 index.html ページの基本アウトラインの定義に取り掛かります。リスト 1 に、基本アウトラインを定義するコードを記載します。

リスト 1. HTML5 文書の基本構造
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Demo</title>
        <link rel="stylesheet" href="styles.css" />
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
        <![endif]-->
    </head>
    <body>

    </body>
</html>

お気付きかもしれませんが、HTML の最近の XHTML フレーバーとは異なり、開始 <html> タグに xmlns 属性または xml:lang 属性を含める必要はありません。lang 属性があれば十分なのです。同様に、<meta> 要素でも、新しい簡略属性 charset を使用してページの文字エンコードを定義できるようになっています。ここで 1 つ指摘しておきますが、これらの変更では単純なタスクを簡単に行えるように、必要なコードの量を減らしているに過ぎません。したがって、古い方法を使用するのでもまったく問題ありません。

<link> 要素に type 属性が含まれていないことについても、皆さんは首を傾げているかもしれません。現在サポートされている唯一のスタイルシートのタイプは CSS であり、最近のすべてのブラウザーはタイプが指定されていなければデフォルトで text/css を前提とします。そのため、この属性をわざわざ含める必要はないというわけです。ただしこの場合も同じく、お望みであれば type 属性を指定してもまったく問題ありません。

リスト 1 で最後に指摘する点は、<script> 要素です。この要素は、外部でホストされている JavaScript ファイル html5.js をロードします。Microsoft Internet Explorer ブラウザーは (バージョン 8 でさえも) 新しい HTML5 要素をサポートしていないため、ブラウザーは <article>、<section>、<header> といった類の要素を認識しません。これらの要素を認識しないだけではなく、これらの要素にスタイルを適用することもできないようになっています。この問題の回避策として知られている手段は、JavaScript 関数 document.createElement() を使用して、タグごとにダミー要素を作成することです。サンプル・スクリプトは、このダミー要素の作成操作を新しい HTML5 要素のすべてに対して行うため、この問題について心配する必要はありません。皆さんが作成するすべての HTML5 のコードに、このスクリプトを組み込むことをぜひともお勧めします。

次は、新しいセマンティック要素をページに追加して、ページの外観となる構造を作成します。また、ページの見栄えを良くするために、いくつかのスタイルシート・ルールも作成します。

新しいセマンティック要素の使い方

HTML5 の新しいセマンティック要素をどのように使用するべきかを説明するために、以下の要素を index.html ファイルに追加します。これらの要素の基本構造は、以下の概略図のようになります。

  • header
    • hgroup
  • nav
  • article
    • header
    • section
      • header
  • footer

ご覧のように、ページ自体は header 要素で始まり、その後に nav 要素と article 要素が続き、最後に footer 要素で終わります。header 要素には、hgroup 要素を使用して複数の見出しを含めます。article 要素には固有の header 要素および section 要素を持たせ、section 要素自体にも固有の header 要素を持たせます。この構造を作成するためのコードをリスト 2 に記載します。このコードを、リスト 1 の開始 <body> タグと終了 <body> タグの間に追加してください。

リスト 2. HTML5 セマンティック要素の使用
<header>
    <hgroup>
        <h1>Company Name</h1>
        <h2>An example of HTML5 and CSS3 in action</h2>
    </hgroup>
</header>

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

<article>
    <header>
        <time datetime="2010-01-12" pubdate>
            <span>Jan</span> 12
        </time>
        <h1>
            <a href="#" title="Link to this post" 
rel="bookmark">Article Heading</a>
        </h1>
    </header>
    <p>This is an article that demonstrates some of the new features 
that HTML5 and CSS3 has to offer. This article contains several sections, each 
with its own heading, as well as a video element which will play a video without 
Flash on browsers that support it.</p>
    <section>
        <header>
            <h1>This is a section heading</h1>
        </header>
        <p>This is an example of a basic section of a document. 
A section can refer to different parts of a document, application, or page. 
According to the draft W3C spec, HTML5 sections usually have headings.</p>
    </section>
</article>

<footer>
    <p>&copy; 2009 Company Name. All rights reserved.</p>
</footer>

リスト 2 のコードの内容は、ほとんど読めばわかるはずです。メイン <header> 要素に含まれる <hgroup> 要素は、2 つの見出しとして、<h1> 要素でタイトル、<h2> 要素でサブタイトルを設定しています。メインの <nav> 要素は 3 つの項目を持つ番号なしリストで、それぞれの項目はサイト上の架空のページへのリンクです。<article> 要素にも固有の <header> 要素があり、<time> 要素でこのコンテンツの公開日を設定しています。この <time> 要素に含まれている datetime 属性に注目してください。この属性は、投稿の日付をコンピューターが理解しやすいように標準化された日付形式で指定します。<time> 要素に含まれているコンテンツは、人間にとって理解しやすい「Jan 12」です。pubdate 属性は、この日付が当該 <article> 要素のコンテンツの公開日であることを示します。

見出しの下には標準の HTML パラグラフが続き、その後に新しい <section> 要素が続きます。この要素にはセクション・タイトルを設定した <header> 要素とパラグラフが含まれます。このチュートリアルの以降のセクションで作成するページの他のエリアには、それぞれに追加でセクションを作成します。

このページをブラウザーで開くと、あまり魅力的には見えません。この時点ではまだ、CSS によるスタイルが適用されていないためです。ページの見栄えを良くするために、これからいくつかのスタイルを追加します。リスト 3 のコードを styles.css ファイルに追加してください。

リスト 3. HTML5 の新しいセマンティック要素に適用する CSS スタイル
 * {
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
    width: 480px; margin: 0px auto;
}

header h1 {
    font-size: 36px; margin: 0px;
}

header h2 {
    font-size: 18px; margin: 0px; color: #888;
    font-style: italic;
}

nav ul {
    list-style: none; padding: 0px; display: block;
    clear: right; background-color: #666;
    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: #EFD3D3; text-decoration: none;
    font-size: 13px; font-weight: bold;
}

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

article > header time {
    font-size: 14px; display: block; width: 26px;
    padding: 2px; text-align: center; background-color: #993333;
    color: #fff; font-weight: bold; -moz-border-radius: 6px;
    -webkit-border-radius: 6px; border-radius: 6px; float: left;
    margin-bottom: 10px;
}

article > header time span {
    font-size: 10px; font-weight: normal;
    text-transform: uppercase;
}

article > header h1 {
    font-size: 20px; float: left;
    margin-left: 14px; text-shadow: 2px 2px 5px #333;
}

article > header h1 a {
    color: #993333;
}

article > section header h1 {
    font-size: 16px;
}

article p {
    clear: both;
}

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

上記の CSS ルールのほとんどは、これまでも CSS で使用可能だったプロパティーを使用していますが、article > header time では border-radius プロパティー (Mozilla および WebKit ベースのブラウザーに固有のプロパティーも含まれます) が使用されていることに注目してください。このルールにより、サポートされるブラウザー (Firefox、Safari、Chrome など) では日時ボックスに角丸が追加されます。

また、article > header h1 ルールでは text-shadow プロパティーが使用されています。最近のほとんどのブラウザーは、このプロパティーをサポートしています。

このセクションに導入されている以上の 2 つの CSS3 プロパティーには共通して、グレースフルにデグレードするという素晴らしい点があります。つまり、訪問者の Web ブラウザーがこれらの新規プロパティーをサポートしていない場合、新規プロパティーは単純に無視され、サポートされているその他すべてのプロパティーに従ったスタイルが要素に適用されるということです。コンテンツを組み込んだ現状のページは、図 2 に示すスクリーン・ショットのように表示されます (少なくとも、Mac OS X 上の Safari 4 ではこのように表示されます)。

図 2. HTML5 セマンティック要素の動作
HTML5 と CSS3 で作成された各種のテキスト・スタイルを示すスクリーン・ショット。下線、色付きのページ見出し、太字のセクション見出しなどが示されています。

次は、<video> 要素について紹介し、この要素を使用して HTML5 ページに Theora 形式の動画ファイルを組み込む方法を説明します。

<video> 要素の導入

これから、ブラウザーが提供する一連の再生用コントロールと併せて、動画を index.html ページに追加します。このサンプルに組み込む動画は、Firefox と Google Chromeでのみ再生可能な Theora 形式の動画であることに注意してください。Safari では現在、エンコード形式が H.264 の動画しかサポートしていません。リスト 4/ のコードを、リスト 2 の最後にある </section> タグとその下にある </article> タグの間に追加してください。

リスト 4. ページへの動画の追加
<section>
    <header>
        <h1>This is a video section</h1>
    </header>
    <p>
        <video src="http://www.double.co.nz/video_test/transformers480.ogg" 
controls autoplay>
            <div class="no-html5-video">
                <p>This video will work in Mozilla Firefox or Google 
Chrome only.</p>
            </div>
        </video>
    </p>
</section>

上記に示されているように、最初に作成するのは、ページ上で動画を表示するためのセクションです。このセクションに見出しを含め、その後に動画を指定します。ここで使用するのは、映画「トランスフォーマー」の第 1 作目のトレーラーの動画で、src 属性を使用して外部 Web サイトからロードします。controls 属性はブラウザーに対し、ブラウザーに標準装備された動画再生用コントロールを表示するように指示します。そして autoplay 属性が、ブラウザーに動画の再生を自動的に開始するように指示します。

<video> 要素の開始タグと終了タグの間には <div> 要素を作成し、そこに no-html5-video クラスを設定しました。これは、<video> 要素をサポートしていないブラウザー、または Theora 動画コーデックをサポートしていないブラウザーでユーザーが動画を表示しようとすると、エラー・メッセージが表示されるようにするためです。

ブラウザーでページを表示する前に、いつくかの新しいルールを styles.css に追加します。このファイルの最後に、リスト 5 のルールを追加してください。

リスト 5. 動画セクションの CSS ルール
article > section video {
    width: 480px; height: 200px;
}
article > section div.no-html5-video,
article > section div#no-canvas {
    width: 480px; height: 40px; border: 1px solid #993333;
    text-align: center; color: #993333; font-size: 13px;
    font-style: italic; background-color: #F7E9E9;
}

上記のルールは単に、動画コンテナーのサイズと、HTML5 動画または Theora 形式をサポートしていないブラウザーを使用している訪問者に対するエラー・メッセージのスタイルを定義しているだけです。このページを Firefox または Chrome で開くと、図 3 のように動画が表示されます。

図 3. HTML5 動画の動作
動画を再生しているウィンドウ。ウィンドウの下部にはタイム・トラッカーとボリューム・コントロールが表示されています。

見事な仕組みだと思いませんか?今度は、Internet Explorer または Opera などのブラウザーでページを表示してみてください。すると、図 4 に示すようなエラー・メッセージが表示されるはずです。Safari でこのページを表示すると、ブラウザーの動画プレイヤーは表示されても、動画は再生されないことに注意してください。

図 4. HTML5 動画がサポートされていない場合のエラー
前の図と同じ動画ウィンドウですが、今回は「This video will work in Mozilla Firefox or Google Chrome only. (この動画は Mozilla Firefox または Google Chrome でしかを再生することができません。)」というエラー・メッセージが表示されています。

次は、プレースホルダー・テキスト、オートフォーカス機能、range、datetime、email などの新しい入力タイプといった、Web フォームの新機能が組み込まれたフォームを作成します。

Web フォームの機能強化

比較的過小評価されている HTML5 の 1 つの側面は、新しいフォーム・コントロールが導入されていることです。これらのフォーム・コントロールは、開発者がフォーム・ベースの Web アプリケーションを作成する際の作業を遥かに容易にするものの、ブラウザーのウィジェットおよび機能に関して言うと、まだあまりサポートはされていません。けれども、これらの新規フォーム・コントロールは通常のテキスト・ボックスとしてグレースフルにデグレードするので、今からコードに組み込んでも安全に使用することができます。ブラウザーがこれらのフォームの機能強化をサポートするようになれば、新規コントロールが自動的に有効になります。

リスト 6 のコードを、リスト 4 で作成した動画セクションの終了タグ </section> の直後に追加してください。

リスト 6. Web フォームの追加
<section>
    <header>
        <h1>This is a feedback form</h1>
    </header>
    <p><form>
        <label for="contact_name">Name:</label>
        <input id="contact_name" placeholder="Enter your name" 
autofocus><br />
        <label for="contact_email">E-mail:</label>
        <input type="email" id="contact_email" placeholder="Enter 
your email address"><br />            
        <label for="contact_phone">Phone:</label>
        <input type="tel" id="contact_phone" placeholder="Enter your 
phone number"><br />
        <label for="contact_callback">Callback on:</label>            
<input type="datetime" id="contact_callback"><br />
        <label for="contact_priority">Priority:</label>
        <input type="range" min="1" max="5" value="1" 
id="contact_priority"><br /><br />
        <input type="submit" value="Request Call">
    </form></p>
</section>

リスト 6 の最初の <input> 要素には type 属性がないため、デフォルトでテキスト・コントロールに設定されます。「Enter your name」というプレースホルダー・テキストを持つこの要素は、autofocus に設定されていることに注目してください。したがって、これらの新機能をサポートするブラウザーは、ページのレンダリングが完了すると、フォーカスを自動的にこの要素に切り替えます。

次の <input> 要素には type 属性として “email” が指定されており、プレースホルダー・テキストも指定されています。このタイプの入力要素を特殊なものとして認識するブラウザーは唯一、Opera だけです。Opera では、このタイプのフィールドが e-メール・アドレスの入力フィールドであることを示すために、メール・アイコンをフィールド内に表示します。

その次の <input> 要素は、「Callback on:」というラベルの付いた日付/時刻 (datetime) タイプのフィールドになっています。このタイプのフィールドをサポートしているブラウザーでは、日時ピッカーが表示されます。Opera の場合には、このタイプに応じて 2 つのコントロールが表示されます。1 つは日付ピッカー付きのテキスト・ボックス、もう 1 つは時刻を選択するためのスピナーです。

さらに次の <input> 要素は、レンジ入力 (range) タイプのコントロールで、min、max、および value の各属性が設定されています。Safari、Chrome、および Opera では、このコントロールは最小値 1 (この値がデフォルトで選択されています) から最大値 5 までのスライダーとしてレンダリングされることになります。このコントロールをサポートしていないブラウザーでは、単に値が 1 に設定されたテキスト・ボックスとして表示されます。

続いて、このかなり平凡で退屈な外観のフォームに何らかのスタイルを加えるために、styles.css ファイルにいくつかのルール (リスト 7 を参照) を追加します。

リスト 7. Web フォームの CSS ルール
article > section form {
    border: 1px solid #888;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #eee;
    padding: 10px; margin-bottom: 30px;
}

article > section label {
    font-weight: bold; font-size: 13px;
}

article > section input {
    margin-bottom: 3px; font-size: 13px;
}

リスト 7 を詳しく見てみると、ボックスの角を丸くするために、form コンテナーに枠線の半径がプロパティーとして追加されていることがわかります。この要素には角丸が追加されているだけでなく、ボックス・シャドウ、そして明るいグレーの背景色とパディングも追加されています。

まず、新しい HTML5 Web フォームの入力タイプのサポートが最も充実しているブラウザーである Opera で、このフォームを表示してみましょう (図 5 を参照)。

図 5. Opera での Web フォームの機能強化
図 1 と同じようなフィードバック・フォームですが、「E-mail:」ラベルの隣には e-メール・アイコンが、「Callback on:」ラベルには日付/時刻フィールドが、そして「Priority:」ラベルにはスライダーが追加されています。

e-メール・フィールドの隣にはメール・アイコン、日時フィールドには新しいコントロールが示されています。スピナーのドロップダウン・フィールドをクリックすると、Opera のカレンダー・ウィジェットが表示されます (図 6 を参照)。

図 6. Opera のカレンダー・ウィジェット
Opera のカレンダー・ウィジェット。2020年 2月に設定されています。

上記の図には、Opera でレンダリングされたかなり不格好なスライダー・コントロールも表示されています。苛立たしいことですが、Opera では border-radius プロパティーも box-shadow プロパティーもサポートしていないため、これらのエフェクトはいずれもフォームに適用されていません。そこで、今度はこのフォームを Safari で開いて、これらの CSS3 のエフェクトがどのように表示されるのかを見てみましょう (図 7 を参照)。

図 7. Safari での Web フォーム拡張
図 1 と同様のフィードバック・フォームですが、角丸およびボックス・シャドウのエフェクトが適用されています。

WebKit ベースの Safari は、角丸とボックス・シャドウのエフェクトを正しくレンダリングしました。これは非常に魅力的でありながらも単純なビジュアル・エフェクトです。これらのエフェクトは、Mozilla Firefox と Google Chrome でも機能します。お気付きかもしれませんが、Safari はプレースホルダー・テキスト機能をサポートするだけでなく、<input> 要素のレンジ入力 (range) タイプに対してはスライダーを実装します (Opera よりもずっと魅力的なスライダーであると付け加えておかなければなりません)。このチュートリアルの最後のセクションでは、<canvas> 要素と 2D 描画 API を使用して単純なスマイリー・フェイスのビットマップ画像を作成する方法を説明します。

<canvas> 要素と 2D 描画 API

<canvas> 要素を使用するには、まず、この要素をページに追加する必要があります。前のセクションで index.html に追加した Web フォームのコードのすぐ下に、リスト 8 のコードを追加してください。

リスト 8. ページへの <canvas> 要素の追加
<section>
    <header>
        <h1>This is an 2D Canvas section</h1>
    </header>

    <p>
        <canvas id="my_canvas" width="480" height="320"></canvas>
        <div id="no-canvas">
            <p>You need a Canvas-compatible browser to view this area.</p>
        </div>
    </p>
</section>

このコードは比較的単純な内容で、<canvas> 要素を宣言し、width、height、および id 属性でキャンバスの幅、高さ、そして一意の ID を指定しているだけです。Mozilla ブラウザーと WebKit ブラウザーでは、 <canvas> タグが個別の終了タグを持つべきかどうかについて意見が分かれていますが、開始タグと終了タグの間にコードを入れない限り、どちらのブラウザーでも同じようにレンダリングされます。今のところ、<canvas> 要素をサポートしないブラウザーを使用しているユーザーに対して、この要素をサポートしていないことを伝えるエラー・メッセージを表示するには、JavaScript を使用することになります。

次に、2D 描画 API を利用してキャンバス上に画像を作成する JavaScript コードを追加します。index.html ファイルの先頭近くにある終了タグ </head> の直前に、下記リスト 9 のコードを追加してください。

リスト 9. canvas 要素のスクリプト
<script>
function loadCanvas() {
    var canvas = document.getElementById('my_canvas');
    if(canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(245,160,150,0,Math.PI*2,true);
        ctx.fillStyle = "rgb(255,255,204)";
        ctx.fill();
        ctx.stroke();

        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.arc(200,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(280,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(240,170,20,4,Math.PI*2,true);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(240,190,60,0,Math.PI,false);
        ctx.stroke();
    } else {
        document.getElementById('my_canvas').style.display = 'none';
        document.getElementById('no-canvas').style.display = 'block';
    }
}
</script>

ページの <head> 要素に追加するリスト 9 の JavaScript のブロックは、loadCanvas という名前の関数を定義します。この関数は、my_canvas という一意の ID を持つ要素を選択して canvas という変数をインスタンス化した後、if 文を使って、この要素からキャンバスのコンテキストを取得できるかどうかを判断します。取得できる場合、<canvas> 要素はブラウザーでサポートされるということです。取得できない場合には、ブラウザーでサポートされていないことになるため、キャンバスは非表示になり、代わりにエラー・メッセージが表示されます。この処理は、関数の終わりのほうにある if 文の else ブロックで行われます。

キャンバスがサポートされることが検出されると、この関数は ctx という名前の 2D コンテキストを取得します。すると、このコンテキストを使用してキャンバス上に形状が描画されます。この関数で作成される形状は、5 つあります。まず、ctx.beginPath() 関数が呼び出されてパスの描画が開始されます。次に、ctx.arc() 関数を使用して、キャンバスの中心近くに半径 150 ピクセルの円弧がひと周り描画されます。塗りつぶしスタイルが黄色に設定された後に ctx.fill() 関数と ctx.stroke() 関数が呼び出されるため、作成される円は黒い輪郭の大きな黄色の円になります。これが、メインの顔です。

次に描画される形状は目なので、塗りつぶしスタイルは黒色に設定されます。この完全な円を作成するために、今度は半径を 15 ピクセルに設定した ctx.arc() を使用し、ctx.fill() を呼び出して描画します。

次のコード・ブロックでは鼻を作成します。これは、完全な円ではない円弧で、先ほど作成した 2 つの目の下の中央に配置します。鼻を塗りつぶすことはしないので、代わりに ctx.stroke() 関数を使用します。

これで、鼻の下に大きな半円の弧を描いて口を作成すれば、スマイリー・フェイスの出来上がりです。このコードが作成するスマイリー・フェイスは、<canvas> 要素をサポートするブラウザーであれば、どのブラウザーでも同じように表示されます (Firefox、Safari、Chrome、Opera だけでなく、さらには Internet Explorer を含め、最近のほとんどのブラウザーは、賢い JavaScript ライブラリーの助けを借りてこの要素をサポートします)。

index.html に必要な最後の変更は、ウィンドウのロードが完了したときに、<body> 要素が loadCanvas() 関数を呼び出すようにすることです。それには、開始タグ <body> を <body onload="loadCanvas();"> で置き換えるだけの話です。

最後に、styles.css ファイルに以下のルールを追加すれば、canvas コンテナーに見栄えの良いボックス・シャドウが追加されます (リスト 10 を参照)。

リスト 10. キャンバスの CSS ルール
article > section div#no-canvas {
    display: none;
}

canvas {
    border: 1px solid #888;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #eee;
}

最終結果は図 8 のように表示されます。

図 8. スマイリー・フェイスのキャンバス
これまでのパラグラフで説明したスマイリー・フェイス

これで、このチュートリアルのサンプル・ページは完成しました。このセクションでは、HTML5 と CSS3 を使用して、新しい HTML5 セマンティック要素を扱う方法、CSS3 の魅力的な新しいエフェクトを利用する方法、Flash プラグインを使わずにブラウザーで動画を見る方法、新しいフォーム・ウィジェットを組み込む方法を学び、最後に JavaScript API を使用してスマイリー・フェイスのグラフィックをキャンバス上に作成しました。


まとめ

このチュートリアルを HTML5 および CSS3 開発の実践的入門ガイドとして役立ててください。HTML5 はまさに開発の初期段階にあり、その新しい機能を各ブラウザー・ベンダーがどのように採用するかは興味深いところです。現時点では、主要なブラウザーのうち、Opera、Safari、Firefox、および Chrome がそれぞれのリリースで、HTML5 および CSS3 で強化された Web フォームの機能のサポートを増やしています。2010年の終わりには HTML5 機能のほとんどがサポートされるようになるという期待もあります。

その一方、差し当たって HTML5 の普及を妨げる問題もいくつかあります。第一の現実的な問題は、Web ブラウザーのなかで最も広く使用されている Microsoft Internet Explorer に、HTML5 のサポートが欠如していることです。IE9 の最初のベータ版がリリースされるまでは、開発者は IE で HTML5 の機能をテストできそうにありません。少なくとも今の時点では、HTML5 用に開発されたサイトは IE8 で極めてグレースフルにデグレードします。さらに多少の作業を加えることによって、IE ユーザーのための次善策としてフォールバックを用意することもできます。

もう 1 つの重要な問題は、ビデオ・コーデックおよび動画コンテナーに関する問題です。現状のままでは、Web の動画標準として <video> 要素が Flash 動画に置き換わることはないでしょう。ブラウザーがそれぞれに異なるコーデックをサポートしていることを考えれば、動画を Theora や H.264 に合わせてエンコードするよりも、Flash を使用したほうがずっと簡単です。HTML5 動画に関しては、今年中に何らかのブレイクスルーが起こることが期待されます。最後のまとめとして、HTML5 と CSS3 は画期的な標準です。今からこれらの新しい仕様に準拠させることで、Web サイトが時代に取り残されないようにすることができます。このチュートリアルで概説したステップに従えば、HTML5 を使いこなせるようになるはずです。後は、この仕様が提供する他の興味深い機能をさらに調べてください。


ダウンロード

内容ファイル名サイズ
HTML5 exampleshtml5.examples.zip3KB

参考文献

学ぶために

  • HTML V5 と XHTML V2」(Adriaan de Jonge 著、developerWorks、2007年11月): HTML V5 と XHTML V2 はどちらも既存のバージョンを改善することを目的としていますが、その改善を行うために開発者が選択した方法は異なっています。この両標準の異なる設計思想がもたらす結果も明らかに違っており、ブラウザーの長い歴史の中で初めてのことですが、今後のブラウザーのバージョンの方向性が明確でなくなっています。この記事を読んで、2 つの標準の背景にある全体像を理解してください。
  • HTML5 の新要素」(Elliotte Rusty Harold 著、developerWorks、2007年8月): HTML 5 の新しい要素をいくつか抜粋してその概要を説明しています。
  • MathML の紹介」(David Carlisle 著、developerWorks、2009年12月): MathML は数式をマークアップするための XML 語彙を定義する W3C 勧告です。HTML 5 により、MIME タイプやサーバー構成を懸念する必要なく、MathML を Web に直接配置できるようになるかもしれません。
  • Android と iPhone のブラウザー戦争: 第 1 回 WebKit による救いの手」(Frank Ableson 著、developerWorks、2009年12月): この記事は、iPhone と Android に対応したブラウザー・ベースのアプリケーションを開発する方法を説明する 2 回シリーズの第 1 回です。
  • HTML の将来、パート 1: WHATWG」(Edd Dumbill 著、developerWorks、2005年12月): この 2 回シリーズでは、Edd Dumbill が、今後の HTML に関して Web 製作者、ブラウザー開発者、そして標準化団体が提案しているさまざまな方法を検討しています。
  • w3schools.com による HTML チュートリアルで、HTML のすべてを学んでください。
  • この CSS チュートリアルでは、CSS を使用して複数の Web ページのスタイルとレイアウトを一度にまとめて制御する方法を説明しています。
  • この JavaScript チュートリアルで Web のスクリプト言語を使用する方法を学んでください。
  • HTML5: A vocabulary and associated APIs for HTML and XHTML: Editor's Draft 13 January 2010: HTML5 仕様の最新の Editor's Draft を読んでください。
  • 近日中に公開予定の「Dive Into HTML5」(Mark Pilgrim 著、O'Reilly Media) からの抜粋を読んでください。
  • HTML5 gallery に、HTML5 マークアップを使用したサイトの数々が展示されています。
  • HTML5 Tag Reference: HTML5 タグのアルファベット順のリファレンスを参照してください。
  • HTML5 Doctor Web には、HTML5 を今すぐ実装する際に参考となる情報が満載です。
  • HTML 5 Cheat Sheet: 現在サポートされているすべてのタグとその説明、属性、HTML 4でのサポート状況が記載されています。
  • CSS 3 Cheat Sheet: CSS3 の主要な機能についての便利なチート・シートを印刷できます。
  • HTML5 デモの Web サイトには、さまざまな HTML5 の実験およびデモへのリンクが記載されています。
  • このデモでは、ブラウザーでのリッチでインタラクティブな 3D アプリケーションを作成するためのオープンソース API、O3D を使用してブラウザーでレンダリングできる 3D グラフィックを紹介しています。
  • lifehacker.com の「How HTML5 Will Change the Way You Use the Web」を読んでください。
  • Yes, You Can Use HTML5 Today」も、HTML5 の世界をわかりやすく紹介している優れた記事です。
  • css3.info.com: CSS3 を知るために必要なすべての情報が揃っています。
  • CSS3 の紹介: この近日公開予定の W3C Working Draft を読んでください。
  • Introducing the CSS3 Multi-Column Module」では、W3C のマルチカラム・レイアウト・モジュールについて検討しています。このモジュールは、要素内でコンテンツを複数のカラムに流し込めるようにすることを目的としています。
  • Mozilla.org で CSS3 のカラムについて学んでください。
  • CSS3 transitions and 2D transforms」: この記事では、Opera での CSS3 の遷移および変形について説明しています。SVG および SMIL での遷移と変形の結果についても参照してください。
  • Mozilla.org の「Canvas チュートリアル」で、独自に作成する HTML ページに <canvas> 要素を実装する方法を説明しています。
  • Apple Developer Central の「Using the Canvas」では、Safari、ダッシュボード、および WebKit をベースとしたアプリケーションで、HTML コンテンツ内に任意のコンテンツを容易に描画できるようにする JavaScript canvas オブジェクトのサポートについて検討しています。

製品や技術を入手するために

  • Theora は、Xiph.org Foundation が無料で提供しているオープンな動画圧縮ファイル形式です。
  • O3D AP: O3Dは、ブラウザーでのリッチでインタラクティブな 3D アプリケーションを作成するためのオープンソースの Web API です。
  • IBM 製品の評価版をダウンロードして、DB2、Lotus、Rational、Tivoli、および WebSphere のアプリケーション開発ツールとミドルウェア製品を使ってみてください。
  • IBM ソフトウェアの試用版を使用して、次のオープンソース開発プロジェクトを革新してください。ダウンロード、あるいは DVD で入手できます。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=778783
ArticleTitle=HTML5 と CSS3 を使用して時代に即した Web サイトを作成する
publish-date=12092011