CSSをPHPで

beanz (2008年11月 5日 11:42) | コメント(0) | トラックバック(0)

2年ほど前だがWebページの制作をしている時cssファイルを動的に書き出せないものかと考えた事があった。
書き出すというよりはcssファイル自体をPHPファイルとして記述してHTMLのヘッダ部分で

<link href="styles/css.php" rel="stylesheet" type="text/css" />

として読み込む。
PHPファイルにはページ全体の横幅やメインのカラー等を変数として定義しておき、実際のCSSの宣言部分にPHPスクリプトを断片として埋め込むかそれが面倒くさければヒアドキュメントで一気に出力してしまう。
例えば、変数の定義部分は

$page_width = 700;
$left_width = 200;
$padding = 10;
$right_width = $page_width - $left_width - $padding;
$main_color = "#b3d3ff";
$sub_color = "#48fa65";

こんな感じにしておき
出力部分は(ちょっと長いが)

echo <<<EOT
* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 75%;
  font-family: sans-serif;
}

#wrapper {
  margin: ${padding}px auto;
  width: ${page_width}px;
}

#header {
  height: 80px;
  background-color: $main_color;
  position: relative;
}

#header h1 {
  position: absolute;
  left: ${padding}px;
  top: ${padding}px;
  font-size: 2em;
}

#content {
  padding: ${padding}px 0;
  zoom:1;
}

#content:after { 
  content:"."; 
  display:block; 
  height:0; 
  clear:both; 
  visibility:hidden; 
} 

#content #leftBox {
  width: ${left_width}px;
  float: left;
  background-color: $sub_color;
  margin-right: ${padding}px;
}

#content #rightBox {
  width: ${right_width}px;
  background-color: $sub_color;
  float: left;
}

#footer {
  clear: both;
  text-align: center;
  background-color: $main_color;
}

EOT;

とする事によって変数の値を変えていきながらデザインをあれこれいじる。
みたいな事がしたかった。
ただ拡張子がPHPになるとCSSエディタのおいしい機能(自動補完だったり)がうまく動かなくなったりして「なんだかなあ]という気はしてた。
ファイル編集後、各ブラウザでチェックしていたらFirefoxだけが動かなかった(cssファイルとして認識していないような感じ)。
SafariやOpera、WindowsのIEではうまく動いてたのに残念。

結局そのときはたいして深追いもせずにFirefoxでは駄目なんだな、じゃあ使えないという事にしてあきらめていたが、つい先日webを眺めていたら解決方法が見つかった。
ただ単にPHPファイルに

header("Content-type: text/css");

と記述すればいいだけだった。
めちゃめちゃ簡単な話だった。

カテゴリ:

トラックバック(0)

トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/15

コメントする