
HTMLはWebページ構築に使用される標準言語です。HTMLは今後も使用され続けるでしょうが、HTML5やCSS3といった新しいテクノロジーは、Webサイトとのインタラクション方法に既に変化をもたらしています。ここでは、これらのテクノロジーとは何か、何ができるのか、そしてなぜ注目すべきなのかを説明します。
HTMLとCSS:基礎
インターネットの黎明期には、ウェブサイトを構築するためのツールはHTMLだけでした。しかし、HTMLだけでサイトをデザインしようとすると、面倒で制限が多くなります。そこでCSSの出番です。
カスケーディング・スタイル・シート(CSS)は、WebブラウザにHTMLページの表示方法を指示するファイルです。基本的に、HTMLページはWebページの骨組み、つまり基本的な枠組みとして機能し、CSSドキュメントはページ内の特定の要素の外観を指定します。CSSを使用すると、HTMLページのフォント、フォント色、背景スタイルなどを制御できます。
CSSはウェブサイトの設計と構築を容易にします。CSSが登場する前は、ページの個々のヘッダーやコンポーネントの外観と動作を指定するにはHTMLを使用する必要がありました。これを回避する方法はいくつかありましたが、HTMLはしばしば誤用され、ウェブ開発者は各ページのすべてのページ要素を個別に変更する必要がありました。CSSの導入により、ウェブページのスタイル変更の複雑さと時間が大幅に軽減されました。1つのドキュメントに変更を加えるだけで、サイト全体にその変更を適用できるようになりました。
次は何か: HTML5とCSS3
HTML5とCSS3は、マークアッププログラミングの最新版です。Webページへのビデオの追加を容易にするHTML5のビデオ要素は注目を集めていますが、HTML5には、ユーザーとWeb開発者の両方にとって優れた、他社を凌駕する多くの機能が備わっています。
Flashフリーのビデオとアニメーション
HTML5 を使用すると、Flash や Silverlight などのプラグインを使用せずにビデオを視聴できます。
では、HTML5の新しいビデオ機能の何がそんなにすごいのでしょうか?まず、無料で使えて、Adobe Flashプラグインも不要です。次に、Flashはコンピュータの速度を低下させる可能性があります(ただし、ハードウェアアクセラレーションに対応したFlash 10.1(現在ベータ版)は速度向上に役立つはずです。Flashの影響はハードウェアとOSによって異なります)。結局のところ、Flashはシステムリソースを消費するソフトウェアがもう一つ増えるだけです。HTML5には、ビデオ機能が組み込まれています。
この新しいビデオ機能は、もちろんApple iPhoneユーザーにとって大きな助けとなるでしょう。なぜなら、AppleはiPhoneに対するいかなる制御も他のアプリケーションに委ねることを事実上拒否しているからです(この種の制御は通常、絶対君主制と呼ばれます)。しかし、HTML5がBlackberryスマートフォンにも役立つことを期待しています。BlackberryスマートフォンのほとんどはFlashをサポートしていないからです。実際、AppleはHTML5ビデオを非常に積極的に推進しており、「iPad対応」ウェブサイトを特集したページも用意しています。

HTML5ビデオに関して注目すべき重要な点は、まだ流動的であるということです。例えば、Safari、Chrome、そして近々リリースされるInternet Explorer 9は、H.264形式を使用した埋め込みHTML5ビデオをサポートします。一方、Firefoxは現在、Ogg Vorbis形式を使用したHTML5ビデオのみをサポートしています。Firefoxの開発陣は、H.264がクローズドソースであるため、将来的にライセンス上の問題が発生する可能性があると主張しているため、この問題が解決するまでにはもう少し時間がかかるかもしれません。
また、HTML5とCSS3により、WebデザイナーはFlashを一切使わずにアニメーションやインタラクティブゲームを簡単に作成できるようになります。HTML5、CSS3、そしてJavaScriptを少し活用することで何ができるのかを示した素晴らしい例として、Akihabara Gamesやこのアニメーション化されたスター・ウォーズAT-ATウォーカーをご覧ください。Design Shackにも、他にもCSS3アニメーションの例がいくつか掲載されています。
まだ Flash を完全に置き換えるわけではありませんが、この分野では HTML5 と CSS3 に大きな期待が寄せられています。
オフラインストレージ:Webアプリが次のステップへ
Webアプリはますます洗練されつつあり、HTML5の新機能によってさらなる進化が期待されます。HTML5は、Webアプリにオフラインでも使用できる情報やインターネットユーティリティを保存できる機能を提供します。この機能により、メール、カレンダー、その他のユーティリティなどのデータをオフラインでもWebアプリから保存・アクセスできるようになるため、Webアプリはより優れた、より便利なものになります。
オンラインに再度ログインすると、ページの構造がブラウザのキャッシュに保存されているため、これらのアプリの読み込みが速くなります。理論的には、オフライン中にWebアプリに加えた変更は、再度ログインしても保持されるはずです。
オフライン ストレージ機能を使用すると、各ページを個別に保存せずに、ブラウザで継続的にキャッシュするサイトまたはサイトの種類をブラウザで指定できるようになります。つまり、これまでは、オフライン中に保存したいページを「ファイル - 名前を付けて保存」する必要がありましたが、新しいシステムを使用すると、特定の種類のページ (たとえば、すべて 1 つの Web サイトに属するページ) を自動的に保存するようにブラウザを設定できるようになります。
これにより、ページの一部がすでにメモリに保存されているため、ページ全体が更新されるまで待つ必要がなくなり、オンライン時の読み込み時間も短縮されます。
Google は 12 月に、自社の Google Gears フレームワークの代わりに、Web アプリで HTML5 の利用を開始すると発表しました。
新しいデザインツール
HTML5とCSS3は、WebアプリやWebサイトの魅力をさらに高めます。HTML5には、Webアプリケーションの構築をはるかに容易にし、よりカスタマイズしやすくする新機能が追加されました。例えば、色やグラデーションのサポート強化、影の適用、丸みのある角(Webデザイナーが丸みのある角を模倣するために画像を使用する必要がなくなります)、そしてもちろんオフラインストレージなどです。これらはすべて、より見栄えの良いWebページを実現し、作成者が当初思い描いていたものに近いものを実現します。
HTML5 互換性の現状

HTML5とCSS3はまだ最終決定されていませんが、既にWebの様相を変えつつあります。SafariやChromeの最新バージョンなど、一部のブラウザでは、HTML5とCSS3のドラフト版の機能の一部が既に実装されています。また、これらのブラウザを利用することで、CNN.com、The New York Times、YouTube(ベータ版)、Vimeoなど、多くのウェブサイトがHTML5とCSS3を採用していることがわかります。これらのウェブサイトはすべて、新しい動画プレーヤーを使用しています。
Internet Explorer の現在のバージョンである IE 8 では HTML5 のサポートが非常に限られていましたが、IE 9 では h.264 ビデオ、埋め込みオーディオ (プラグインは不要)、スケーラブル ベクター グラフィックス、CSS3 がサポートされます。
また、HTML5 はまだ「ワーキングドラフト」の段階です。一部のテクノロジはすでにブラウザーや Web ページに取り入れられていますが、仕様が最終決定されるまでにはまだしばらく時間がかかります。
HTML5とCSS3は、JavaScriptなどの他のWebテクノロジーと組み合わせることで、正しく使用すれば、あらゆるWebページのスタイル、フォーマット、そして動作速度に非常に役立ちます。この2つの言語は、高度なオールインワン機能を備えており、多くのサードパーティ製アプリケーション(Flashなど)の使用を排除できるため、プログラミングとインターネットの閲覧方法に革命をもたらすでしょう。
これはHTML5とCSS3が提供する機能のほんの一部に過ぎません。両者のより詳細な技術情報については、World-Wide Web ConsortiumのHTML5とCSS3の概要をご覧ください。
Geek 101は、複雑なテクノロジーを分かりやすく解説する定期シリーズです。専門家でなくても理解できます。Geek 101で取り上げてほしいトピックがあれば、ぜひ下のコメント欄にご記入ください。
Twitter または Facebook で GeekTech をフォローしてください。