Lucky bag::blog: 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 ）は使用できない。と言うことで、誰か人柱になってみませんか（ぉ

このリストは、次のエントリーを参照しています: CSS の値に変数を使用する:

mersy's さんからのトラックバック: CSSで変数; cssの値に変数あれば楽だよな〜と思ってたところにちょうどこのエントリ。 Lucky bag::blogさんはすべての記事が有用でほんと目から鱗もんです。 Lu... [続きを読む]; 2005年08月08日 21:01

blog.tokyoace4.com さんからのトラックバック: CSS の値に変数を使用する; Lucky-bag blog : CSS の値に変数を使用する PHPを使ってCSSの値に変数を適用する方法。メモ。... [続きを読む]; 2005年08月09日 17:09

dot-station::blog さんからのトラックバック: CSSで変数を使う; オレンジニュースさんとこで発見。 CSS の値に変数を使用するサイトに使用してい... [続きを読む]; 2005年08月10日 12:43

richeceratopsのひとりごとさんからのトラックバック: CSS の値に変数; ◆CSS の値に変数を使用するおそらく、みなさま同じようなことを考えていたはず！こんなの欲しかったでしょ♪... [続きを読む]; 2005年08月11日 16:19

MT4989 さんからのコメント: 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; 2005年08月08日 23:39

海賊たろさんからのコメント

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

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

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

2005年08月09日 11:04

e-luck さんからのコメント

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

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

2005年08月09日 12:03

M さんからのコメント: 質問です｡
CSS-SSV // ShaunInman.com
上記サイトより css-ssv.php をダウンロードして・・・・と、ありますが、どの辺りにダウンロードのリンクがあるのでしょうか？; 2007年10月31日 12:41

e-luck さんからのコメント

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

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

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

2007年11月01日 09:07

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。