CSS3の機能を試す!

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

セレクタで効率の良いCSS設定

 今度は表現手法とは少し違うのですが、CSS3から可能になる効率的な設定方法を紹介しましょう。CSSを記述していると、いつのまにかものすごい量のコードを書いていることがよくあります。多い時は何千行にもなってしまうことも・・・。

 それでいつも困るのが、後からの変更・修正です。長くなってしまったCSSコードのどれとどれが関連しているかわらなくなってしまい、それを検証しながらの修正は苦労します。筆者のコーディングが汚いということもあるかもしれませんが、「コードを短く、シンプルに書く」ということがCSS自体の機能にないというところも原因かもしれません(きっとそうだ!)。

 これを改善してくれるのが、CSS3から用意されている新しいセレクタです。これによって複雑な指定もできるようになり、効率的なCSSコードが書けるようになります。これでCSS自体のコード量も減らすことができて、見やすいコードを実現できそうです。

 CSS3で新たなセレクタでは「E[foo$="bar"]」のように正規表現のような指定が可能になっています。「ある要素の中で、指定した属性名、および属性値を持つ要素にスタイルを指定する」という書き方が可能になります。少しわかりづらいので、実際のコードで説明します。

 例えば、各ボックスにidがふられているHTMLがあったとします。このid名の最後が「t」で終わるボックスだけ、背景色を「赤」にするといった指定にする場合は、CSSに「div[id$="t"] {background: red;}」と書けば指定することができます。リスト5、6のように設定すると図3のように背景が赤になります。

 同じように行頭の文字にマッチさせるE[foo^="bar"]や、任意の文字にマッチさせるE[foo*="bar"]などが使えるようになっています。これらを組み合わせれば、間違いなく効率の良いスタイル指定ができそうですよね。ワクワクします。

まとめ

 いかがだったでしょうか、CSS3の可能性を感じていただけたでしょうか。もう本当に待ちきれないですよね、はやくすべてのブラウザに実装されることを切に望みます。

 ところでCSS3の現状なのですが、3月にはサンディエゴでCSS WGの主要メンバが集まり会議がありました。まだいつ頃に正式勧告になるかは未定のようですが、いろいろな話し合いが持たれたようです。このような会議が行われているということは、CSS3は動いていて、勧告に向かって進んでいると言るでしょう。Webデザインに関わるすべての皆さま、期待してその時を待ちましょう。

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

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

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