CSS3でできること

CSS3でできること

　CSS3では、1つで構成するのではなく、細分化して管理しようという考え方から、全体がモジュール化されています。そのため、ユーザエイジェントがどのモジュールに対応し、どのモジュールに対応しないかを自由に選択できるようになりました。では、なぜこのようにモジュールに分ける必要があるのでしょうか。

　それは、「中途半端な実装を避けるため」です。仕様を1つにまとめてしまうと、大きくなりすぎて、実装する際に中途半端なものになる可能性があります。これを避けるためにモジュールで分散させておけば、各ユーザエイジェントが必要なものだけを実装でき、中途半端な実装は起こりません。

　例えば、PCと携帯のWebブラウザでは実装するモジュールは違ってくるでしょう。このようにPCの世界というよりも、さまざまなメディアを想定した上でのモジュール化と言った方がよいかもしれません。

　モジュールの例としては、テキストに関するエフェクトを定義した「Text Effects」や、背景やボーダーに関する「Backgrounds and Borders」、HTMLのレンダリングを指定するための「Advanced Layout」、グリッドレイアウトを実現する「Grid Position Module」、印刷表示用のページをレイアウトするための「Generated Content for Paged Media」などがあります。なお現在、どのモジュールも勧告には至っていません。

　CSS3はモジュールが特徴ということはわかりましたが、一体何ができるようになるのでしょうか。

　これから、ほんの一例ですが、CSS3でできることについて見ていきましょう。今まで苦労していたことも、CSS3さえ実装されればかなり簡単になったり、面白い表現が可能になったりします。FirefoxやSafari 3.1を使用すれば、表示可能なものが多いので、ぜひそれらをインストールして、CSS3で実現される表現を確かめてみてください。

プロパティ

　CSS3で追加されたプロパティはたくさんあります。代表的なプロパティとしては、ボーダーにグラデーションをつけたり、角丸を簡単に作ったり、画像を使うことができる「ボーダー」、背景画像のサイズを変えたり、複数画像を指定する「背景」、透明度を変えたりできる「カラー」、テキストに影をつける「テキストエフェクト」、入力用フォームのリサイズができる「ユーザインターフェース」、正規表現を使って要素を指定できる「セレクタ」などがあります。

　ここでは「これぞ新機能」と言える「ボーダー」のプロパティを紹介しましょう。

　これはすごいプロパティです。今まで面倒であきらめていたようなボーダー作りが可能になり、オリジナリティのあるものができそうです。例えば、「花びらを使った囲み」を作ろうとした場合に、固定幅、高さの囲みであれば、背景に画像を読み込み、その上に文字を乗せればよいのです（図2）。コードはリスト1のようになります。

　しかし、固定なので文字数が増えるとはみ出てしまいます。ならば「可変の囲みを作るぞ！」とした場合、制作者にとっては大変な苦労が待っています。ボックスをいくつか組み合わせて、その背景に繰り返し可能な画像を読み込んで、といった面倒な作業を強いられました。で、大半は「面倒だからそんなデザインはやめよう」というネガティブな理由によりデザインをあきらめてしまいます（これは筆者だけではないと思うのですが）。そのようにクリエイティブを殺ぐようなことは、このプロパティさえ実装されればなくなりそうです。