CSS3とは?

HTML5と共に話題になることの多いCSS3。今回はこのCSS3について調べてみました。
CSSは文書の論理構造を記述するHTMLに対し、視覚的構造を規定するための規格で、HTMLのスタイル(見栄え)を指示することが出来ます。これまでのCSSに新しく便利な仕様を加えた最新版がCSS3というわけです。2011年から段階的に公開されており、現在も仕様策定作業が進められています。

■これまでのCSSとCSS3との大きな違い
基本的な部分は特に変わりません。記述方法も以前のままです。
これまでのCSSとの大きな違いとしては、画像を使わなくても丸やグラデーションなどの表現ができるようになったという点に代表される、表現力が豊かになった点です。これまでは角丸にしたい場合は角が丸くなった画像を用意しておいて、といった処理をしていましたが、CSSだけで表現できるようになったのです。他にも影やグラデーションをつけたりすることもできるようになりました。このように表現力が豊かになり、便利な機能が増えました。
また、細分化して管理しようという考え方から、「セレクタ」や「フォント」、「テキスト」など、さまざまな機能がモジュール化され、モジュールごとの開発が進められています。つまりCSS3は、CSS2.1のような1つの仕様を指す呼称ではなく、モジュールの総称というわけです。

■HTML5と一緒に使わないとダメなのか?
冒頭でHTML5と共に話題になることが多いと書きましたが、HTML5+CSS3と表現されている事がとても多いのは事実です。しかしHTML5と組み合わせて利用しなくても、HTML4.01で作成したサイトであってもCSS3を使用することは可能です。
基本的には、HTML5でもHTML4でもXHTML1.0でも、関係なく使用できます。問題はブラウザが対応しているかどうかという事です。
また、従来のCSSとも互換性があるので、CSS3とCSS2.1の記述が混在していても問題ありません。

■ブラウザ対応~プログレッシブエンハンスメント
最新のブラウザではCSS3はほぼ実装されていますが、IE6~8は残念ながらほとんどサポートされていません。このような状況では、対応しているブラウザではよりリッチに、非対応ブラウザではそれなりに見ることのできる方法が必要になってくるでしょう。
この考え方を「プログレッシブエンハンスメント」と言います。
高度なブラウザ環境にあるユーザー(CSS3に対応しているブラウザを使用)に対しては、よりリッチなビジュアルデザインや機能を取り入れて提供、環境に恵まれていないユーザー(CSS3に対応していないブラウザを使用)には、それに合わせて最低限のビジュアルや機能を提供しようというものです。
もちろんWebサイトの情報としてはどちらでも過不足なく提供されることが前提となります。
どのブラウザでも同じように見せる「クロスブラウザ」という考え方もありますが、古いブラウザに合わせて制作されることが多く、新しい技術を取り入れることが難しくなります。昨今、デバイスが多様化してきた状況下では現実的ではないといった背景からプログレッシブエンハンスメントの考え方が普及しはじめました。

■事例
では実際どのように活用されているのかCSS3の事例をご紹介します。

1:1 pixel|サイバーエージェント公式クリエイターズブログ
『SPピグで見るCSS3活用事例』
http://ameblo.jp/ca-1pixel/entry-11215557737.html
あのアメーバピグのスマートフォン版ではCSS3を多用しているそうです。
丁寧な説明が書かれているのでとてもわかりやすいです。

2:noupe
『100 Great CSS Menu Tutorials(CSS3を使った かっこいいグローバルナビゲーションメニュー100事例と作り方。)』
http://www.noupe.com/css/100-great-css-menu-tutorials.html
CSS3で制作された(一部jQueryを併用)グローバルナビゲーション100事例と、その作り方が説明されています。ソースの解説もあるので便利ですね。

3: 裏技shop DD
『画像を一切使わずにCSS3だけでドラえもんを描いてみた! 』
http://shopdd.jp/blog-entry-932.html
すごいです、画像を使わずCSS3だけでここまで書けるとは驚きです。対応しているブラウザで見たドラえもんとIE8で見たドラえもんがありますので必見です。

これまで画像を使用して表現していた事が可能になったCSS3、画像の重さが懸念であったワンソースで制作するレスポンシブWebデザインには必要不可欠なものになっていくことでしょう。
既存のCSSソースに追加することも出来ますので、HTML5以前のHTMLでも使用出来るので、どんどん活用していきたいですね。