株式会社ネーブルス 社長のブログ
株式会社ネーブルス 代表取締役 福田一成のブログです。アメーバブログはこちら
ダイナミックスタイルシート
スタイルシートを動的に扱う事ができる
Lessという方法があるのですが、
少々ハマったのでメモしておきます。
ハマり事
全くスタイルシートが当たってない状態になってしまいました。
(レイアウトをしていない、文字の羅列状態)
1、日本語の設定はクォーテーションで囲む
まあ、当然と言えば当然でしょうか。
フォント名に日本語を使用した場合、
フォント名をクォーテーションで囲わないと動作しませんでした。
2、CSSキャッシュクリア(IE)
他のブラウザはlessの変更を即反映してくれるのですが、
IE(IE9です。)は、変更した事を認識させないと
その通りには読んでくれませんでした。
キャッシュをクリアするか変更したlessを読み込ませないと
変更前の状態で表示されてしまいます。
最終的に、やりたかった事ができたので、これもメモします。
lessファイルの拡張子を変えてしまいPHPファイルにしてしまいます。
色、サイズ、等の変数部分の値をPHPで出力できるようにします。
Lessを呼び出すHTML側は、下記の様に記述します。
<link rel="stylesheet/less" href="css/test.php" type="text/less" />
<script src="js/less.js" type="text/javascript"></script>
何がしたいか分かりますよね。期待した通りの動作をしてくれました。
どちらかのサイトでLessは、拡張子を変えると
動作しないと書いてありましたが、ちゃんと動作をしましたよ。