HTML5、CSS3、および関連技術

新たな Web 標準を次々と紹介するガイド

「HTML5」という旗印の下には、非公式ながらも数々の技術がひとまとめに扱われています。この記事では、HTML 仕様に含まれる技術とそうではない技術についての誤解を解くとともに、各種の CSS3 モジュールをはじめ、技術そのものに光を当てます。

Rob Larsen, Interface Architect, Isobar

Rob Larsen photoRob Larsenは Web サイトや Web アプリケーションの構築や設計に 11 年を超える経験があります。彼は現在、Isobar のインターフェース・アーキテクトであり、世界最大のブランドの何社かに対し、HTML5、CSS3、その他の新興技術を扱う業務を行っています。彼は「HTML + CSS + JavaScript」というブログで Web や Web 技術について書いています。



2011年 6月 03日

Web 標準の開発とマーケティング

今や、Web 開発者にとって素晴らしい時代がやって来ました。長かった冬眠期間を経て、標準化団体とブラウザー・ベンダーはこの数年間、極めて活発にエキサイティングな技術を次々と生み出しています。開発者たちはこの機会を少しでも逃すものかと、着々とデモや本格的なアプリケーションを作り続けています。この動きに煽られるとともに、標準対応モバイル・ブラウザーの成長が後押しとなって、Google や Apple などの企業ではこれらの新しい標準を使用した製品とサービスを売り込んでいます。さらに、さまざまなメディアでも時代の波に乗ってこの新しい標準を大々的に取り上げており、通常このような技術を話題にする Web 開発者やブラウザー・ベンダーにとどまらず、幅広い人が話題にするようになっています。

このように大々的に話題にされていることには、もちろん明らかなメリットがあります。人々が Web 標準に熱い視線を注ぐようになれば、この業界の誰にとっても望ましい展開となります。この点から考えると、「新たな Web 技術」を表すための簡潔な表現として、広範囲に及ぶ技術を包含する用語 (特に「HTML5」) を使用するのは手っ取り早い方法です。このような漠然とした総称を使っていれば、技術系ではない人々でも、標準の世界で今まさに画期的な作業が行われていることを (一般的な知識として) 理解することができます。

面白いことに、W3C でさえもこの動きに乗じて、HTML5 という用語とこれに関連付けられたロゴ (図 1 を参照) を使用して「Web プラットフォーム」を広めています。

図 1. HTML5 のロゴ
W3C による HTML5 のロゴ

一方、マイナス面としては、標準化の作業が行われているさまざまな仕様に関して、手っ取り早くて大まかなラベルが付けられることによって、開発者のコミュニティーのなかでさえも、仕様そのものについて多少の誤解が生じていることです。仕様に関して行われている膨大な作業に十分な注意を払っていない限り、次々と作り出される標準の頭字語のなかで途方に暮れてしまう可能性があります。

この記事では、現在進行中の標準化作業にまつわる誤解を解消するべく、主要な標準化作業について概説し、すぐに役立つガイドとしてそれぞれの技術を紹介します。


HTML5、ブランドとしての「HTML5」、標準としての HTML: 生きている標準

新しい仕様のなかで最も重要なのは、間違いなく新しくなった HTML です。良くも悪くも、「HTML5」は新しく登場したすべての技術を一切合切含む言い回しとなっています。JavaScript 開発者の Peter Paul Koch 氏はこうした現象を、2010年 1月のブログ・ポストで次のように簡潔に説明しています。「新しくて素晴らしいものである限り、何でも HTML5 とすることができます」。

この一文は多くの人々の気持ちを表わしていて、この数年の間に発展した HTML5 という「ブランド」の本質を捉えてはいるものの、Web サイトを構築する人々は漠然とした総称から抜け出して、この誇大宣言の元となっている実際の技術仕様を深く探る必要があります。

ちなみに、現在の HTML 標準の取り組みを先導しているワーキング・グループである WHATWG (Web Hypertext Application Technology Working Group) は、長い間 W3C が行ってきた「スナップショット標準開発プロセス」から抜け出しています。WHATWG は W3C と密接に連携して HTML5 スナップショット仕様の作成に取り組んでいますが、このワーキング・グループ自体の標準への取り組みでは、単純に HTML を「生きている標準」として前進させることに大きな努力が注がれています。

名前の意味はさておき、HTML5 スナップショット仕様に実際に含まれる技術を 1 つひとつ見ていきましょう。これらの技術に関する標準文書を深くまで完全に探るには、この記事で取り上げる HTML5 およびその他すべての標準文書へのリンクを記載している「参考文献」セクションを参照してください。HTML5 仕様については、ありがたいことに、最近 WHATWG が Web 開発者向けのバージョンをリリースしました。このバージョンではブラウザー・ベンダーを対象とした数百ページもの情報が取り除かれているので、遥かに理解しやすい文書となっています。


HTML5 スナップショット仕様に含まれる技術

各コンポーネントの詳細を探る前に、WHATWG は冗談を抜きに、HTML を「生きている標準」と呼んでいることを考慮しておく必要があります。HTML は動く標的です。Canvas 2D API などの一部の技術は、コア仕様の一部として始まり、その後、独立した標準文書になりました。

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

この仕様に新しく追加された要素のなかで、最も急速に導入が進んでいるのは、HeaderFooterSectionAside などの新たなセマンティック要素です。その多くは、編集者の Ian Hickson 氏が行った Web 調査の間に見つかった共通使用パターンに基づいています。これは、HeaderFooter に明らかに現れていて、この 2 つの要素は Web 全体で共通して見られる id="header" および id="footer" パターンをエコー出力します。他の hgroupasidefigure などは、既存の HTML 要素に当然追加されるべき、もしくは既存の HTML 要素を拡張するべき要素です。

新しい要素に対する明確なブラウザー・サポートは限られていますが (例えば、ブラウザーは header に対して何か特別な処理を行うわけではありません)、新しいセマンティック要素はかなり一般的に使用されるようになってきています。開発者たちは、これらの新規要素の使用方法に関するベスト・プラクティスに取り組み、共通パターンを作り出しているところです。例えば、古いバージョンの Windows Internet Explorer では不明な要素によって問題が生じるものの、Modernizr などのライブラリー、または HTML5Shiv スニペットによって、どのブラウザーでも新規要素を使用できるように障害が取り除かれます。

新しいアウトライン化アルゴリズム

新しいセマンティック要素に同調して、より柔軟な文書のアウトラインを生成するために、新しいアウトライン化アルゴリズムが用意されています。H1 から H6 までの標準 header 要素に加え、HTML5 にはセクション関連の新しい要素がいくつか導入されています。具体的に言うと、sectionarticleasidefooterheadernav などの要素です。これらの要素によって、文書のアウトラインは新しいセクションに生まれ変わります。使い慣れた header 要素と組み合わせて、ページ上に複数の H1 要素を追加できることから、今では充実したセマンティクスによる構造化文書を作成するための一層強力な方法を使えるようになっています。

新しいアウトライン化アルゴリズムを理解するには、開発中に HTML5 アウトライナー (h5o) ブックマークレットなどのツールを使用すると役立ちます。アウトライン化の新しい方法に慣れるまでには時間がかかるため、開発サイクル全体を通して文書をアウトライン形式で確認することで、この新規アルゴリズムが明らかになるはずです。

動画と音声

ブラウザーで音声や動画を再生することは Web ではかなり一般的なイベントとなっているので忘れがちですが、Web の歴史の大半では、音声および動画を再生するためのネイティブなメソッドはありませんでした。そこで新しく登場したのが、HTML5 の audio および video 要素です。

仕様の観点からすれば、ブラウザーにネイティブな音声および動画の再生用 API を組み込むのが、単刀直入で適切な設計となります。IMG などの置換された要素が機能する仕組みを十分に理解していれば、誰でも動画および音声を組み込む方法を理解できるでしょう。また、関連する API は単純なものです (リスト 1 を参照)。

リスト 1. 単純な動画の例
<-- the HTML -->
<figure>
<video src="_assets/video/sample.webm" controls autoplay
	width="400"
	height="300"
	id="video-sample"
	data-description="sample web video">
	your browser does not support the video tag </video>
<legend>This is a nice, sample web video</legend>
</figure>
//the JavaScript
var video = document.getElementById("video-sample"),
	toggle = document.getElementById("video-toggle");
toggle.onclick = function() {
	if (video.paused) {
		video.play();
		toggle.className="playing"
	} else {
		video.pause();
		toggle.className="paused"
	}
};

残念ながら、上記のコードが主要なすべてのブラウザーでたった 1 つの動画ソースを使って機能するようになるまでは、まだ長い道のりがあります。ブラウザー・ベンダーが二手に分かれて、それぞれのコードで対決するなか、事態は必要以上に複雑化しているからです。WebM などの無料でオープンなロイヤルティー・フリーの動画フォーマットを支援する Google、Opera、および Mozilla に対し、特許で守られた h.264 を頑なに支持する Apple と Microsoft から私たちが離れるまでは、Web 上の動画はその複雑さが軽減されるどころか、Adobe Flash しかなかった時代よりもさらに複雑になっていくことでしょう。

フォーム要素と入力タイプ

HTML5 には、一般的な入力タスクをより適切に反映する新規フォーム要素が用意されています。EmailURL などのフォーマットは、意味のある方法でブラウザーに指示できるようになりました。まったく新しいフォーム入力には、range (スライダー用)、date (日付ピッカー用)、color (カラー・ピッカー用) などがあります。

あいにく、Peter Paul Koch 氏による調査で示されているように、Opera と Research In Motion 以外のブラウザー・ベンダーでは、これらの技術の採用がなかなか進んでいません。これは残念なことです。

canvas などの要素は確かに目を引く「クール」な要素ですが、多くの Web サイトの収入源となるのはフォームです。これらの Web サイトにとって、優れたフォームは優れたサイトを意味します。HTML5 でのフォームの拡張のいくつかがユーザーに提示されたとすれば、Web サイトにとって真のメリットとなるはずです。

オフライン Web アプリケーション

オフライン Web アプリケーションの仕様では、サイトやアプリケーションの開発者がネットワークに接続しなくてもアプリケーションを実行するために必要なファイル一式を指定するためのアプリケーション・キャッシュ・マニフェストを定義しています。この仕様を Web ストレージ仕様のデータ・ストレージ機能と組み合わせることで、強力なオフライン機能が可能になります。

インライン・コンテンツの編集

HTML5 では、コンテンツの編集を容易にする新しい API を定義しています。目新しい JavaScript 実装もありますが、ネイティブ API は、より一貫性のある効果的なユーザー・エクスペリエンスを提供するのに役立ちます。

ドラッグ・アンド・ドロップ

新しく加えられたドラッグ・アンド・ドロップ API では、ドラッグ・アンド・ドロップ操作によってデスクトップから Web にファイルをアップロードすることができます。この機能の実際の動作例は、Mozilla Firefox か Google Chrome を使用している場合に、Google Gmail で見ることができます。

History API

Ajax の時代に続いているユーザビリティーの問題の 1 つは、Ajax を駆使するアプリケーションが標準的な履歴スタックを破壊してしまうことです。今では動的な状態に対処するために、スクリプト・ベースのソリューションや共通スキームを使用できるようにもなっていますが、HTML5 のHistory API はその場しのぎの解決策を改善するものとして待ち望まれていました。HTML5 は、ブラウザーの履歴にエントリーを追加するメソッドを組み込み、ユーザーが戻るボタンをクリックすると適切に応答するようにして、これまでの履歴ナビゲート機能を拡張します。

マイクロデータ

HTML5 では、HTML 文書の本体でメタデータをマークアップするための標準化した方法を定義しています。hCard や hCalendar などのマイクロフォーマットを扱った経験があれば、マイクロデータには親しみを感じると思いますが、いくつかの重要な違いがあります。最も重要な違いは、マイクロデータは、以前はマイクロフォーマットによって取り去られていたクラスの関連情報を itemprop 属性という新しい属性に移すことです。

さらに、この標準ではマイクロデータのフォーマットをより厳密に定義するその他の属性と、マイクロデータにプログラムで簡単にアクセスするためのメソッドを追加しています。具体的には、以下の属性とメソッドです。

  • itemscope では、マイクロデータ・セグメントのスコープを設定します。
  • itemtype では、使用する特定のマイクロデータ・フォーマットを定義する URL を指定します。
  • document.getItems() では、最上位のマイクロデータ項目へアクセスします。このメソッドは、オプションの itemType 引数に対応する項目が含まれる NodeList を返します。引数が指定されない場合には、すべてのタイプを返します。

HTML5 に含められている技術のうち、独立した仕様およびワーキング・グループで扱われている技術

いくつかの技術は HTML5 仕様から独立して、その技術独自の文書となっています。HTML の取り組みとは常に切り離される他の技術は、「Web プラットフォーム」という旗印の下にまとめられています。

SVG

HTML5 という包括的な表現に含めるには最も奇異に感じられる技術は、おそらく SVG (Scalable Vector Graphics) でしょう。SVG は XML で定義されたベクター・グラフィックス文法です。SVG 仕様は 1999年から W3C によって開発が進められているので、SVG を「新しい技術」あるいは HTML5 の一部として含めるのは拡大解釈です。

そうは言っても、この標準がまさに必要とされている今、SVG に新たな注目が集まっているのはもっともなことです。現在、Internet Explorer の古いバージョン用に Raphael.js などのライブラリーが提供している API や、主要なすべてのブラウザーの最新バージョンでは、SVG がある程度サポートされるようになっています。

Canvas 2D Context

HTML5 時代の早くから注目を浴びていた Canvas 要素とこれに関連する API は、HTML に対する Apple 拡張として生まれました。前述のように、当初はメインの HTML5 仕様の一部として標準プロセスが始まりましたが、今では W3C で独立した文書として扱われています。

Canvas 2D Context が提供するインターフェースは、ブラウザーで 2 次元の画像およびビットマップを描画するためのスクリプトを使って記述可能なインターフェースです。この仕様はすでに、グラフ作成ライブラリーからゲーム・エンジン、そしてカスタム・フォントを実現するためによく使用されているシステムや、Processing プログラミング言語の JavaScript への移植に至るまで、あらゆるものに利用されています。Canvas の研究に取り組む人々のおかげで、今ではレガシー・バージョンの Internet Explorer でも、 ExplorerCanvas ライブラリーによって Canvas 2D Context がサポートされるようになっています。

Geolocation

Geolocation API は、機器の地理的位置を取得するための標準インターフェースです。この API が提供する window.geolocation オブジェクトは、位置情報サーバーを使用して機器の位置を突き止めるためのメソッドを提供します。位置情報は、例えば IP アドレス、機器の GPS、Wi-Fi および Bluetooth の MAC アドレス、RFID (Radio-frequency ID)、Wi-Fi 接続位置などの各種ソースから抽出されます。

Web Storage

Web Storage 仕様では、Web ブラウザーでのキー・バリュー型の永続データ・ストレージの API を定義しています。この仕様は、現在 cookie が提供している機能に似ていますが、大幅な改善が加えられています。

Web Storage には sessionStoragelocalStorage という 2 つの形があり、このそれぞれが、項目を管理するためのメソッド (setItem()removeItem()、および getItem()) とストレージ全体をクリアするためのメソッド (clear()) として似たようなメソッドを提供しています。セッション・ストレージの目的は、現行のブラウズ・セッションに限定して情報を保持することです。一方、ローカル・ストレージはサイトの設定やその他のユーザー・データを長期間保管することを目的としています。ストレージ・アクティビティーを監視し、そのアクティビティーに応答するためにリッスンすることができるストレージ・イベントもあります。

この機能を今すぐ試してみたいとしたら、Persist.js ライブラリーが堅実なクロスブラウザー・ソリューションを提供しています。このソリューションでは、あらゆる主要なブラウザーで Web ストレージ、あるいは Web ストレージに相当するものを使用することができます。

Web Storage と密接に関連する仕様には、以下の 2 つがあります。

  • IndexedDB: 関係してはいるものの、未完成の仕様です。データベースに対してクエリーを実行する機能や、さらに重要な機能として、単純なストリングだけでなく複雑なオブジェクトについても格納する機能を提供するこの仕様は、ブラウザーでの長期間にわたるデータ保存に一層大きな可能性をもたらします。
  • Web Workers: この驚くほど強力な仕様は、アプリケーション開発者がメイン・ページの JavaScript と並行してスクリプトを実行するバックグラウンド「ワーカー」を生成できるようにする API を定義しています。この機能により、開発者は長時間続く処理タスクをバックグラウンド・プロセスに任せ、メイン・コンテキストで続行される対話動作にブラウザーを解放することができます。

File API

この仕様は、Web アプリケーションでファイルを操作するための API を提供します。XMLHttpRequest やドラッグ・アンド・ドロップ、そして Web Workers などの新しく確立された他のいくつかの技術と組み合わせることで、File API は Web とデスクトップとの間で現在よりも遥かに強力な対話機能を実現します。ファイルを Web サーバーに渡して処理させるための単純なファイル・アップロード入力要素や複雑な Flash インターフェースを使用する代わりに File API を使用すれば、ブラウザーからファイル・データに直接アクセスすることができます。

WebSocket

WebSocket API は、単一の TCP ソケットで Web ブラウザーと Web サーバーとの間の双方向の同時通信ができるように作られています。最新バージョンの Firefox、Opera、Chrome、および Apple Safari でのサポートにより、WebSocket の実装は進められていくはずですが、セキュリティーの脆弱性が見つかったことから、Firefox および Opera では現在のところ、サポートはデフォルトで無効に設定されています。

Server-Sent Events

この仕様が定義しているのは、HTTP 接続を開いてサーバーからプッシュされた通知を DOM イベントの形で受け取れるようにするための API です。この仕様は、サーバーを定期的にポーリングして更新の有無を確認するという現在のパターンを逆にすることで、数え切れないほどの不要なリクエストとそれに伴うプロセッサー時間および帯域幅を節約します。

WebGL

WebGL (Web-based Graphics Library) は、ブラウザーでインタラクティブな 3 次元グラフィックスを作成する機能によって JavaScript を強化します。WebGL は、canvas HTML 要素のコンテキストです。2011年 3月 3日にバージョン 1.0 に進化したこの仕様は、非営利の Khronos Group によって管理されています。

XMLHttpRequest Level 2

XMLHttpRequest Level 2 仕様は、コアとなる XMLHttpRequest オブジェクトを新しい機能によって強化します。なかでも最も興味深い新機能と言えるのは、Cross-Origin Resource Sharing です。これは、XMLHttpRequest がサード・パーティーのサーバーとやりとりすることを防ぐ同一生成元ポリシーを安全に回避する方法となります。現在、XMLHttpRequest による通信は、XMLHttpRequest を提供しているサーバーとの間で同じプロトコルを使用する場合にのみ許可されています。

JSON と JSONPの普及により、ドメイン間の共有はかつてのように緊急に必要とされてはいないかもしれませんが、それでも、これまで同一生成元のポリシーによってブロックされていたサイトおよびマッシュアップ・アーキテクチャーに多くの可能性が広がることになるでしょう。


CSS3 のモジュール方式

CSS の最新バージョンを機に、ワーキング・グループは単一の巨大な仕様から脱却し、モジュールと呼ばれる複数の別個の文書に仕様を分割することを決定しました。モジュールごとに、新機能の追加、あるいは CSS2 (CSS, Version 2) に定義された機能の拡張が行われています。

モジュールのなかには、5 年から 10 年 (あるいはそれ以上) の間、開発が続けられている成熟したものもあります。これらのモジュールは、W3C 勧告に至る段階の勧告候補または勧告案のいずれかにあります。つまり、基本的には完成しているということです。ここからは、なかでも特に興味深くて重要なモジュールのいくつかを紹介します。

Selectors

CSS はセレクターなしでは機能しません。セレクターは、HTML 文書でスタイルを適用する要素を選択するために使用されます。

Selectors モジュールは、CSS1 (CSS, Version 1) および CSS2 のセレクターを継承し、それに新しい機能のセレクターを追加して拡張しています。この拡張では主に、空の要素に適用する E:empty () や、要素の n 番目の子に適用する E::nth-child(n) といった構造擬似クラスのグループに重点が置かれています。その他の新しいセレクターとしては、シンプル・セレクターを適用しない E:not(s) という否定擬似クラスや、有効または無効になっている UI 要素に適用される E:enabledE:disabled のような UI 要素状態擬似クラスなどがあります。

jQuery、Dojo、YUI といった、よく使われている JavaScript ライブラリーの CSS セレクター・エンジンには、新しい CSS3 (CSS, Version 3) のセレクターは以前から組み込まれているため、これらのライブラリーを使用している人にとって CSS3 セレクターはお馴染みのはずです。

Color

Color モジュールは、透明度や色の値の表記など、CSS の色に関連する側面を指定します。新しい色の値には、RGBA (Red Green Blue + an Alpha channel)、HSLA (Hue, Saturation, Lightness + an Alpha channel) があります。

Backgrounds and Borders

Backgrounds and Borders モジュールで定義しているのは、background-colorbackground-image などの背景プロパティー、そしてボーダーのスタイルです。このモジュールには、背景画像を引き延ばす機能、ボーダーに使用する画像を指定する機能、ボックスに影をつける機能の他、Web の歴史のなかで最も望まれていた機能の 1 つでもある、ボックスに角丸を指定する機能が新しく追加されています。

Multi-column Layout

Multi-column Layout モジュールは、開発者が柔軟に定義したカラムにコンテンツを流し込めるようにします。

Media Queries

CSS の @media 規則および HTML での media 属性を強化した Media Queries は、表示サイズ、色の濃度、アスペクト比などのパラメーターを追加します。このモジュールを使用することで、開発者は機器のサイズおよび機能に合わせて、クラス内でより具体的にコンテンツを調整することができます。

人気の高い「A List Apart」の記事として取り上げられ、まもなく本として出版される予定である Ethan Marcotte 氏による「Responsive Web Design」では、Media Queries が大きな役割を果たしています。


開発中の新しいモジュール

成熟したモジュールには、画期的な上に実用的で大いに役立つ部分がありますが、CSS の分野で最もワクワクする作業は、そのほとんどが現在提案されている一連の (比較的) 新しいモジュールで行われています。なかでも特に注目に値する新規モジュールを以下に紹介します。

CSS Fonts Module Level 3

Fonts Module Level 3 は、CSS に当初から用意されていたお馴染みのフォント・プロパティーを拡張するモジュールです。よく使用されている @font-face 規則が含まれる Level 3 では、CSS 規則に従って文書にカスタム・フォントを直接埋め込めるようにすることによって、Web 上でフォント・タイプを今まで以上に大幅に制御できるようにしています。

CSS 2D Transforms Module Level 3

この 2D 変形モジュールは、ボックスに対して回転、変換、拡大/縮小などの変形機能を適用するための新しいプロパティーを導入します。

CSS 3D Transforms Module Level 3

この 3D 変形モジュールは SVG と連動して開発されており、2D 変形モジュールを遠近効果による変形機能によって拡張します。

CSS Animations Module Level 3 および CSS Transitions Module Level 3

このアニメーション・モジュールでは、アニメーションを要素に割り当て、アニメーションのプロパティー、タイミング、そしてアニメーションが変化する際の単位を指定することができます。この遷移モジュールは、擬似クラス間の遷移をアニメーションにするためのプロパティーを定義します。遷移の一般的な例は、要素が :hover 状態に入ってからこの状態から抜け出るまでの遷移です。


未来を見てください

図 2. 未来はここに見えます
未来はここに見えます。未来は、ブラウザーのなかにあります。

これで、Web 標準の世界の現状を案内する旅は終わりです。Web 標準の世界は、実にエキサイティングな時代を迎えています。それは特に、現在非常に多くの技術が急速に、デモとしてあるいは本番コードとしても使えるようになってきているからです。開発者たちが精力的にこれらの新しい技術の奇抜さをドキュメントにし、レガシー・ブラウザーのサポートの隙間を埋めるライブラリーを作成しているなか、新しい技術を直接試してみる機会は溢れています。このように直接試してみることが、Web の未来を経験する最善の方法であることは間違いありません。今後の動向に興味があるとしたら、Web 標準の世界を取り巻く騒動に今すぐ飛び込んで、その全容を調べてください。

参考文献

学ぶために

  • HTML5 ロゴ: この Web プラットフォームに関する情報を読んで、HTML5 ロゴをダウンロードしてください。
  • HTML5 means whatever you want it to mean」(QuirksBlog、2010年1月): Peter-Paul Koch 氏が、HTML5 仕様の真相に関する誤解を取り上げています。
  • HTML is the new HTML5」(The WHATWG Blog、2011年1月): このブログ投稿では、「HTML5」向けの新しい開発モデルについて説明しています。この新しい開発モデルでは、技術のバージョン管理を行う代わりに、生きた文書が技術をその進化に併せて定義していきます。
  • HTML5 specification for web developers」(WHATWG、2011年2月): この仕様が目的としているのは、読みやすさとアクセスのしやすさです。完全な HTML 仕様とは異なり、この「Web 開発者向けエディション」ではブラウザー・ベンダーだけに必要な情報が取り除かれています。
  • The new input types」(QuirksBlog、2011年3月): 新しい入力タイプの互換性が一覧されています。
  • HTML Canvas 2D Context」(W3C、2011年2月): HTML canvas 要素の 2D Context について詳しく学んでください。
  • cufón: cufón で表示するカスタム・フォントについて学んでください。
  • Web Storage」(W3C、2011年4月): Web クライアントにキーとバリューのペアでデータを保管するための API について詳しく学んでください。
  • Web Workers」(Apple Computer, Inc.、Mozilla Foundation、Opera Software ASA、2011年4月):Web アプリケーションの作成者がメイン・ページと並行してスクリプトを実行するバックグラウンド・ワーカーを生成できるようにする API について読んでください。この API により、メッセージの受け渡しを調整メカニズムとして使用したスレッド式の操作が可能になります。
  • File API」(W3C、2010年10月): Web アプリケーションでファイル・オブジェクトを表現するとともに、プログラムによってオブジェクトを選択し、そのデータにアクセスするための API について詳しく学んでください。
  • The WebSocket API」(W3C、2011年4月): Web ページが WebSocket プロトコルを使用してリモート・ホストと通信することを可能にする API について詳しく学んでください。
  • Experiment comparing Upgrade and CONNECT handshakes」(IETF、2010年11月): WebSockets のサポートを制限する原因となっているセキュリティー問題について読んでください。Chromium Code Reviews では、このセキュリティー問題をさらに詳しく解説しています。
  • Server-Sent Events」(W3C、2011年4月): HTTP 接続を開いてサーバーからプッシュされた通知を DOM イベントの形で受け取れるようにするための API について詳しく学んでください。
  • WebGL Specification」(Khronos Group、2011年2月): WebGL 仕様では、HTML 5 canvas 要素、[CANVAS] の追加レンダリング・コンテキストとサポート・オブジェクトについて記述しています。このコンテキストにより、OpenGL ES 2.0 API とぴったり適合した API を使用してレンダリングできます。
  • XMLHttpRequest Level 2」(W3C、2011年3月): XMLHttpRequest Level 2 仕様は、ドメイン間リクエスト、進行イベント、送受信両方のバイト・ストリームの処理などといった新機能によって XMLHttpRequest オブジェクトを拡張します。
  • Selectors Level 3」(W3C、2009年12月): CSS1 と CSS2 の既存のセレクター、および CSS3 やその他の言語の必要を満たす新しいセレクターについて詳しく学んでください。
  • CSS Backgrounds and Borders Module Level 3」(W3C、2011年2月): ボーダーおよび背景に関する CSS レベル 3 の機能について読んでください。
  • CSS Multi-column Layout Module」(W3C、2011年4月): この仕様では、Web のスタイルシート言語である CSS での複数カラムからなるレイアウトについて記述しています。この仕様で記述されている機能を使用することで、間隔と区切り線で仕切られた複数のカラムにコンテンツを流し込むことができます。
  • Media Queries」(W3C、2010年7月): Media Queries は、スタイルシートにより正確なラベルを付けられるようにすることによって、メディア・タイプの機能を拡張します。
  • Responsive Web Design」(A List Apart、2010年5月): Web 上でのさまざまなユーザー・コンテキストによって自分たちのデザインが崩されることを嘆くデザイナーたちは、デザインしたレイアウト通りの出力を切望してきました。Ethan Marcotte は、これらの制約に適応するようにデザインに対する考え方を改め、流動性のあるグリッド、柔軟な画像、そしてメディア・クエリーを使用することを主張し、臨機応変な Web デザインによって「物事の盛衰」に応じる方法を紹介しています。
  • CSS Color Module Level 3」(W3C、2010年10月): この仕様では、表示色とグループ不透明度のための色の値とプロパティーについて記述しています。記述内容には、CSS Level 2 のプロパティーと値、および新しい値が含まれます。
  • CSS Fonts Module Level 3」(W3C、2011年3月): この CSS3 モジュールでは、フォントのプロパティーを指定する方法、フォントのリソースを動的にロードする方法を記述しています。
  • CSS 2D Transforms Module Level 3」(W3C、2009年12月): CSS 2D Transforms が、CSS でレンダリングした要素を 2 次元に変形できるように仕組みを理解してください。
  • CSS 3D Transforms Module Level 3」(W3C、2009年3月): CSS 3D Transforms が CSS でレンダリングされた要素を 3 次元に変形できるように、CSS Transforms をどのように拡張するかを理解してください。
  • CSS Animations Module Level 3」(W3C、2009年3月): CSS Animations が CSS プロパティー値を時間の経過と併せて変更できるようする仕組みを理解してください。
  • CSS Transitions Module Level 3」(W3C、2009年12月): CSS Transitions を使用して、期間を指定して CSS 値のプロパティーをスムーズに変更する方法を学んでください。
  • Geolocation API Specification」(W3C、2010年9月): この仕様では、ホスティング・デバイスに関連付けられた地理的位置情報にスクリプトによってアクセスする API を定義しています。
  • HTML5 Cross Browser Polyfills: 新しい標準をすぐに扱えるようにするライブラリーおよびその他のコードについて学んでください。
  • Session history and navigation」(WHATWG、2011年4月): 新しい History API について学んでください。
  • Twitter での WHATWG: Twitter で WHATWG をフォローしてください。
  • Twitter での W3C: Twitter で W3C をフォローしてください。
  • Twitter でのRob Larsen: Twitter でこの記事の著者、Rob Larsen をフォローしてください。
  • Twitter での developerWorks: Twitter で developerWorks をフォローしてください。
  • Web development ゾーンでは、多種多様な Web ベースのソリューションを話題にした記事を揃えています。
  • developerWorks Technical events and webcasts で最新情報を入手してください。
  • developerWorks オンデマンド・デモ: 初心者向けの製品のインストールおよびセットアップから熟練開発者向けの高度な機能に至るまで、さまざまに揃ったデモを見てください。

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

  • Processing.js: Processing.js をダウンロードしてください。これは Web 用に設計された人気の高いビジュアル・プログラミング言語、Processing の姉妹プロジェクトです。
  • Explorer Canvas: Explorer Canvis で Internet Explorer に Canvas サポートを追加してください。
  • PersistJS: クライアント・サイドの JavaScript 永続ストレージ・ライブラリー、PersistJS をダウンロードしてください。
  • Modernizr: Modernizr の詳細を調べてダウンロードしてください。Modernizr が HTML 要素に追加するクラスによって、特定のブラウザー機能をスタイルシートの中でターゲットにすることができます。
  • HTML5Shiv: HTML5Shiv をダウンロードしてください。
  • HTML5 アウトライナー (h5o): HTML5 アウトライナー・ブックマークレットをダウンロードしてください。現行の HTML5 ドラフトでは、HTML 文書のアウトラインを生成するための極めて正確なアルゴリズムを定義しています。
  • Raphael.js: Raphaël をダウンロードしてください。この小さな JavaScript ライブラリーによって、Web 上でのベクター・グラフィックスの操作が容易になるはずです。

議論するために

コメント

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=665019
ArticleTitle=HTML5、CSS3、および関連技術
publish-date=06032011