PR

CSS3では何ができるのか?

2008年4月21日(月)
吉田 光利

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のようになります。

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

BRIANS PET TOKYO主催者 WebデザインからRuby on RailsでのWebアプリ構築までをトータルに行うWebコンテンツデザイナ。現在はBRIANS PET TOKYOにてWebアプリケーション「DORIBAR(ドリバー) 」を開発中 http://brianspet.com

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

CSS3では何ができるのか? | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。