ダイナミックスタイルシート

スタイルシートを動的に扱う事ができる

Lessという方法があるのですが、

少々ハマったのでメモしておきます。

ハマり事

全くスタイルシートが当たってない状態になってしまいました。

（レイアウトをしていない、文字の羅列状態）

１、日本語の設定はクォーテーションで囲む

まあ、当然と言えば当然でしょうか。

フォント名に日本語を使用した場合、

フォント名をクォーテーションで囲わないと動作しませんでした。

２、CSSキャッシュクリア（IE）

他のブラウザはlessの変更を即反映してくれるのですが、

ＩＥ（ＩＥ９です。）は、変更した事を認識させないと

その通りには読んでくれませんでした。

キャッシュをクリアするか変更したlessを読み込ませないと

変更前の状態で表示されてしまいます。

最終的に、やりたかった事ができたので、これもメモします。

lessファイルの拡張子を変えてしまいPHPファイルにしてしまいます。

色、サイズ、等の変数部分の値をPHPで出力できるようにします。

Lessを呼び出すHTML側は、下記の様に記述します。

<link rel="stylesheet/less" href="css/test.php" type="text/less" />
<script src="ｊs/less.js" type="text/javascript"></script>

何がしたいか分かりますよね。期待した通りの動作をしてくれました。

どちらかのサイトでLessは、拡張子を変えると

動作しないと書いてありましたが、ちゃんと動作をしましたよ。