株式会社ネーブルス 社長のブログ

社長のブログ

株式会社ネーブルス 代表取締役 福田一成のブログです。アメーバブログはこちら

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

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

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は、拡張子を変えると

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


 

● 開発費用のオンライン見積り、お問い合わせはこちらから

システム開発費用の概算を、オンライン上でご提示いたします。(所要時間:3分/無料)
お問い合せする事なく、費用感をお確かめいただけます。お気軽にご利用ください。
↓↓↓

システム開発費用のオンライン見積はこちら システム開発のご相談はお気軽にご連絡ください