CSS の値に変数を使用する

例えば、サイトに使用しているカラーとかが決まっていたとして、CSS で色を要素等に指定していくわけだけど、指定する値に変数が使えれば便利じゃね?ってのを実現したのが CSS-SSV 。

上記サイトより css-ssv.php をダウンロードして、CSS ファイルを置いてあるディレクトリにアップ。.css の拡張子でも php と認識させられるように .htaccess で下記のように設定。

AddType application/x-httpd-php .css
php_value auto_prepend_file /CSS ファイルを置いてあるディレクトリへのローカルパス/css-ssv.php

準備はこれで完了。変数を定義するには下記のような感じにする。

@server variables {
        BaseColor: #86B933;
}

これで BaseColor には #86B933 という値が代入されることになる。

div {
        background: BaseColor;
}

CSS 内に同じ値を複数設定するような場合には重宝しそうな感じ。値を一括管理できるんで、変更する箇所とか最小限に抑えられる。もちろん使える変数名には CSS 内で使われる名称( padding とか em )は使用できない。と言うことで、誰か人柱になってみませんか(ぉ

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/113

mersy's - CSSで変数 (2005年8月 8日 21:01)

cssの値に変数あれば楽だよな〜と思ってたところにちょうどこのエントリ。 Lucky bag::blogさんはすべての記事が有用でほんと目から鱗もんです。 Lu... 続きを読む

blog.tokyoace4.com - CSS の値に変数を使用する (2005年8月 9日 17:09)

Lucky-bag blog : CSS の値に変数を使用する PHPを使ってCSSの値に変数を適用する方法。 メモ。... 続きを読む

dot-station::blog - CSSで変数を使う (2005年8月10日 12:43)

オレンジニュースさんとこで発見。 CSS の値に変数を使用するサイトに使用してい... 続きを読む

richeceratopsのひとりごと - CSS の値に変数 (2005年8月11日 16:19)

◆CSS の値に変数を使用する おそらく、みなさま同じようなことを考えていたはず!こんなの欲しかったでしょ♪... 続きを読む

Comments

MT4989 said:

MovableTypeで試してみました。IE6ではstyle-site.phpでも読み込んでくれたのですが、Firefoxでは読み込んでくれませんでした。原因を見つけるまえにやめちゃいました。他に試した人の意見が聞きたいですね。
ただ、MovableTypeはMTSetVar、MTGetVarタグを使いスタイルシートに変数が書けるというのもやめちゃった要因のひとつですが。
Learning Movable Type: Colors - Experimenting With, Using MTSetVar and MTGetVar
http://www.elise.com/mt/archives/000810colors_experimenting_with_using_mtsetvar_and_mtgetvar.php
Ogawa::Memoranda: MTSetVar/MTGetVar and MTSetVarBlock Plugin
http://as-is.net/blog/archives/000917.html

海賊たろ said:

> php の拡張子でも CSS と認識させられるように .htaccess で下記のように設定。

「CSS の拡張子でも php と認識させられるように.htaccess で下記のように設定。」の間違いでは?

要するに、スタイルシートを PHP スクリプトとして実行して、変数代入処理をしてからクライアント PC に出力するって事ですよね。

e-luck said:

>>MT4989 さん
検証ありがとうございます。
そうか、MT であれば MTSetVar、MTGetVar タグが使えるんでしたね。

>>海賊たろ さん
ぐわっ、何書いてんだ俺は。
ご指摘ありがとうございます。修正しておきました。

M said:

質問です。
CSS-SSV // ShaunInman.com
上記サイトより css-ssv.php をダウンロードして・・・・と、ありますが、どの辺りにダウンロードのリンクがあるのでしょうか?

e-luck said:

M さん
現在、CSS-SSVはなくなり、CSS-SSCがダウンロードできるようになっています。

http://www.shauninman.com/archive/2005/08/09/css_constants

ページ中程のInstallationの所にダウンロードできるリンクがあります。
変数(variables)ではなく定数(constants)という形に変わりましたが、基本的には同じです。