2008.07.31

CSS Variablesで値を一元管理

イメージ：CSS Variablesで値を一元管理

一歩先のWeb標準 ♯15
ゆう（我的春秋）

梅雨が明けて、いよいよ夏本番ですね。今年もどうやら暑い日が続きそうですが、皆さんも熱射病やクーラー病にはくれぐれもご注意ください。さて、ここ数ヶ月、将来有望なCSS仕様を取り上げてきましたが、今月もその流れです。

頻出する値を変数で管理するCSS規格

先月、SafariのエンジンであるWebKit（ナイトリービルド）が、CSS Variablesを実装しました。CSS Variablesとは、W3C CSS Working GroupのDaniel Glazmanや、AppleのDavid Hyatt氏らが提案している、CSSで変数を扱う仕様（提案書）です。

変数（variables）とは？

JavaScriptやPerlなど、日頃からプログラムやスクリプトに触れている方には、すでにお馴染みでしょうけど、変数（variables）とは、不定の値（数値であったり、文字列であったり）を一時的に格納しておく場所のことです。プログラムに馴染みのない方でも、誰もが昔かじった（はずの）数学で出てくる「消費税率χ=0.05」といった場合の"χ"のようなもの…といえば何となくイメージできるのではないでしょうか。（変数名は原則自由につけられます。）代入される値は、その時々に応じて0.03、0.05、0.1などと変化します。

なお通常、静的なCSSは手続き型言語（プログラム言語）ではないので、基本的に変数の値は一定で動きません。ですから実際には変数というより定数（constants）といった方が一見適切なように思えますが、CSS VariablesではDOM（CSS Object Model）などで動的に値を操作するケースを踏まえて、より広く変数（variables）と称しているのでしょう。

CSSで変数を使うメリットは？

CSS Variablesによって変数（変数名とその値）を定義しておけば、頻繁に再利用する値の管理を一元化できるようになります。たとえば、下のCSSソースのように、配色を管理する場合など、色の値を1か所で管理できるので、とりわけ問題発生時の原因究明や、コード共有、メンテナンス性などの面でとても便利です。

@variables {
corporateColor: #39873d;
}
strong {
background-color: var(corporateColor);
}
h2 {
color: var(corporateColor);
background-color: var(corporateColor);
}

なおCSS Variablesは、@import越しに定義した変数を適用することもできます。

では、今後の展望はどうなのでしょうか。次ページをご覧下さい。