Web開発に携わったことがある方なら、CSS(カスケーディングスタイルシート)という言葉をお聞きになったことがあるはずです。ご存じない方のために説明すると、CSSとは、HTMLベースのコンテンツをWeb上に表示する方法を定義するための言語です。CSSは、レイアウト、間隔、色、フォントなどの制御に使用でき、1990年代半ばに普及し始めて以来、Webの世界に欠かせない要素の1つとなっています。

Webコンテンツのデザインや開発を専門とされる方なら、CSS3という言葉もお聞きになったことがあるでしょう。聞いたことはあっても、それがいったい何なのか、これまでのCSSの実装とどう違うのかはよくわからないという方もおられるかもしれません。

すべてのテクノロジーは時間とともに成熟するので、バージョン番号や「ベータ」といった呼び方が一般的に採用されています。このようなラベルによって、特定のテクノロジーのどのバージョンを使用しているかを明確に知ることができ、使用中のソフトウェアがどのような機能をサポートするかを高い信頼度で予測できます。CSS3とは、CSS規格の3つ目のイテレーションであり、HTML内のコンテンツのよりリッチな表現を可能にする新機能を定義した、カスケーディングスタイルシート言語の成熟形です。

新機能

当初からCSSは、HTMLコンテンツ内の情報の表現方法を様々に調整することを可能にしてきました。フォント、色、背景画像、境界線などは、既存のCSSスタイルで簡単に設定できます。CSS3の機能も、これまでのWebの機能から大きく逸脱するものではなく、ブラウザーの機能を強化・拡大して、HTMLコンテンツに対するよりリッチな機能とリッチな表現をサポートすることが目的です。

CSS3のモジュール

CSS仕様のこれまでのイテレーションは、CSS言語の構成要素すべての包括的な定義になっていました。これに対してCSS3では、仕様はモジュールと呼ばれるより小さな仕様の集合に分割されています。各モジュールは、機能の特定のサブセットに関連するアスペクトを定義しています。例えば、メディアセレクターに関するモジュール、色に関するモジュール、SVGに関するモジュールなどがあります。このようなモジュール化によって、CSS仕様の特定の側面が規格として承認・実装されるまでの時間を短縮できます。すべての機能が1つの大きな仕様に含まれている場合は、規格としての承認までにもっと長い時間がかかることは明らかです。つまり、CSS3はまだ策定途上の規格であり、特定のアスペクトが他のアスペクトよりも先に規格化されることがありうるわけです。CSS3仕様のモジュール式設計について詳しくは、W3Cを参照してください。

CSS3の機能

当初からCSSは、HTMLコンテンツ内の情報の表現方法を様々に調整することを可能にしてきました。フォント、色、背景画像、境界線などは、既存のCSSスタイルで簡単に設定できます。CSS3の機能も、これまでのWebの機能から大きく逸脱するものではなく、ブラウザーの機能を強化・拡大して、HTMLコンテンツに対するよりリッチな機能とリッチな表現をサポートすることが目的です。

Web 2.0の動きは、Webベースのインターフェイスに新しいレベルのデザインをもたらしました。これによって、Webページは、単色や画像や正方形のみによって構成されるものではなくなりました。HTMLベースの高度なインターフェイスを備えつつ、非標準のフォント、複雑なカラーグラデーション、角の丸みといった、洗練された高度な表現を持つものが現れてきました。このようなインターフェイスの作成に使用されるHTMLとCSSの組み合わせは、複雑で扱いにくく、管理も難しくなる傾向がありました。CSS3では、このような洗練されたインターフェイスの表現を容易に管理できる新しいスタイルが導入されました。

CSS3で定義されているスタイルを使うと、divやspanといったHTML要素のコーナー半径を制御することで、丸みのついたボックスを作成できるので、ネストした複数のHTMLコンテナや角を切り落とした画像アセットを使用する必要はありません。単純なCSS定義を使用して、1つのHTMLコンテナで指定できるようになりました。

HTMLコンテナの角の丸み付けの他に、CSS3ではHTMLコンテナ要素の境界の新しいスタイルも定義されています。デベロッパーやデザイナーは、シンプルなCSSスタイル定義を使用して、単純な点線や破線だけでなく、画像アセットを並べたり伸張したりした複雑な境界を簡単に作成できます。これにより、比較的単純なコードを使用して、複雑なビジュアルインターフェイスを短時間で容易に開発することができます。

シンプルなコードを使用したビジュアルな変更の一環として、CSS3では、HTMLコンテナテキストセグメントの両方へのドロップシャドウの追加、複数の列からなるテキストレイアウトの定義、Webフォントのサポート(HTMLインターフェイスでのカスタム非標準フォントの使用)といった機能が導入されています。

CSS3では、HTMLのコンテンツの色と不透明度を制御する強力な新しい方法も導入されています。CSS3では、HSL(色相、彩度、明度)、HSLA(HSLとアルファ)、RGB(赤、緑、青)、RGBA(RGBとアルファ)のカラースペースのサポートが導入されました。これにより、表現のより精密な制御が可能になり、HTMLドキュメント内のコンテンツのアルファの制御が容易になります。サポートされるカラースペースの追加に加えて、CSS3では複雑なカラーグラデーションもサポートされています。グラデーションには任意のカラースペースが使用でき、アルファのグラデーションも可能です。

CSS3の重要な追加機能の1つは、メディアクエリーのサポートです。デザイナーやデベロッパーは、CSS3のメディアクエリーを使って、特定の画面サイズに適用されるスタイルシートを作成できます。メディアクエリーを使用することで、1つのHTMLドキュメントに、画面やデバイスの種類に応じた様々な表現を与えることができます。デザイナーやデベロッパーは、コンテンツが表示される画面のサイズに基づいて、選択的に適用されるスタイルを作成できます。これにより、同じHTMLドキュメントに対して、タブレットデバイスのインターフェイス、携帯電話のインターフェイス、デスクトップのインターフェイスといった異なるレイアウトと表現を適用することができます。

CSSを通じてHTMLコンテンツに条件付きでスタイルを適用する方法は、メディアクエリーだけではありません。セレクターはCSS3で初めて登場したわけではありませんが、CSS3では多くの新しい種類のセレクターが追加されています。セレクターとは、HTML要素にスタイルシートを適用するための条件付きルールのことです。リンクスタイルに:hoverスタイルを使用したことがあれば、それがセレクターです。CSS3の新しいセレクターを使えば、特定の要素、最初の子要素、最後の子要素、兄弟要素、その他様々な条件に基づいてスタイルを適用できます。すべてのセレクタールールについて詳しくは、W3C仕様を参照してください。

CSS3のもう1つの重要な追加機能は、変形の導入です。変形とは、特定のオブジェクトの視覚的表示の変形を制御するスタイルです。2次元変形は次元空間に適用され、X軸またはY軸上の平行移動、水平または垂直方向の拡大縮小、原点周りの回転、X方向とY方向の両方でのコンテンツの傾斜などを実現できます。CSS3をサポートするブラウザーはすべて、2次元変形をサポートします。一方、CSS3の3次元変形は、一部のブラウザーがサポートしています。3次元変形は、2次元変形で使用できるものと大体同じで、第3軸が追加されています。3次元変形では、3次元空間内での、X(水平)軸、Y(垂直)軸、Z(奥行き)軸上の拡大縮小、平行移動、回転が可能です。2次元変形3次元変形について詳しくは、W3Cのサイトを参照してください。

もう1つの非常に強力な追加機能として、CSS3ではCSSスタイルを使用したアニメーションとトランジションが導入されています。アニメーションとトランジションは、CSSにとってかなり大きな進化です。これらの機能を使用することで、特定のコンテンツのアニメーションや、1つのビジュアルステートから別のビジュアルステートへのトランジションを定義するスタイルシートを作成できます。Webデザイナーやデベロッパーは、JavaScriptとタイマーイベントだけに頼らなくても、ブラウザーでコンテンツのアニメーションを実現できるようになります。CSS3のアニメーションとトランジションでは、スタイルシートを使ってアニメーションのロジックを実際のHTML構造から抽象化できるため、スクリプトの使用は一切不要です。さらに、一部のブラウザーではハードウェアアクセラレーションがサポートされるため、再生とアニメーションの品質を最適化できます。W3Cのサイトでは、CSSアニメーショントランジションの詳細な情報が提供されています。

CSS3の新しい機能はこれですべてではありませんが、CSS3で何ができるのか、CSS3を使うことでHTMLコンテンツをいかにシンプルにできるのかは、ここまででおわかりいただけたのではないかと思います。

CSS3 != HTML5

CSS3はHTML5の機能のサブセットであるという誤解が一般に見られます。CSS3とHTML5は一緒に使われることが多いものの、同じものを指しているわけではありません。HTML5はHTML(Hyper Text Markup Language)仕様の5つ目のイテレーションであり、HTMLドキュメント内の構造、コンテンツ、機能の定義に用いられます。HTML5では新しいタグが使用でき、よりリッチなメディアがサポートされます。一方、CSS3は、ユーザーインターフェイスの表現をカスタマイズするための新しいルールを定義します。CSS3は、HTMLコンテンツがブラウザー内に実際に表示される方法を定義するものです。

CSS3の採用

CSS3の一般的な概要がわかったら、今度は実際にどこで使用できるかを知っておくことが重要です。CSS3の機能の多くは、主要なすべてのデスクトップブラウザー(Internet Explorer、Chrome、Firefox、Safari、Opera)でサポートされています。ただし、これらのCSS3機能のほとんどは、ブラウザーの最新バージョンだけでサポートされます。一般的なブラウザーの旧バージョンでは、CSS3機能の一部がサポートされない可能性があります。自分のコンテンツでCSS3のスタイルを利用する場合は、ターゲットとするユーザーが実際にその機能をサポートできることを、事前に確かめておいたほうがよいでしょう。各ブラウザーでのCSS3機能の互換性を検証するために役立つリソースとして、www.caniuse.comがあります。ここには、個々のCSS3機能に対するブラウザーのサポートの一覧が記されています。

モバイルブラウザーをターゲットとする場合は、事態はもっと容易です。最新のスマートフォンのオペレーティングシステムのほとんどは、CSS3をサポートしているからです。これには、iOS、Android、BlackBerry、および最新世代のWindowsデバイスが含まれます。実際に、CSS3の機能を最もよくサポートしているのはモバイルブラウザーだと言える場合もあります。問題は、デスクトップとモバイルのブラウザーが、すべての機能を同じようにサポートしているとは限らないことです。

すべてのブラウザーがすべてのCSS3機能を同じレベルでサポートするとは限らないのに加えて、いくつかの機能は、「サポート」されているブラウザーの間でも、パフォーマンスに差がある場合があります。特に、ハードウェアアクセラレーションを利用するブラウザーと利用しないブラウザーの間では、パフォーマンスの差が大きくなる傾向があります。

さらに複雑なことに、一部のCSS3機能に関しては、ブラウザーによってサポートするシンタックスが異なる場合があります。CSS3仕様はまだ標準化されていないため、多くのブラウザーベンダーは、CSS3スタイルにブラウザー固有の接頭辞を付けています。例を挙げると、CSS3スタイル"-webkit-border-radius"は、webkitエンジンに基づくブラウザーのみで動作します。一方、他のブラウザーは、CSS3の境界半径についてそれぞれ独自の実装をサポートしている可能性があります。CSS3仕様が最終的に規格として実装されるまでは、このような不一致が現れる可能性があり、回避策が必要です。

次のステップ

CSS3は、CSS言語に対する強力な追加機能です。CSS3を使うことで、Webデザイナーやデベロッパーは、高度で複雑なレイアウト、表示される画面に合わせて変形する動的なレイアウト、高度なアニメーションやトランジションシーケンスなどを容易に作成できるようになります。このような機能は、従来はプラグインを利用したコンテンツでなければ実現できないと考えられていました。

CSS3の入門としては、以下のリソースが役立ちます。

最後に、Chrome Experimentsを参照してみてください。これは、CSS3およびその他のWebテクノロジーによって構築されたWebプロジェクトのサンプルです。