スタイルシートのPHP化（その１）

Blogをはじめとして、スタイルシートを使ってWebページをデザインすることが多くなってきました。

スタイルシートを作っていると、「ある箇所を変更すると、それに連動して他の箇所も変更する」ということがよくあります。
例えば、以下のようなスタイルシートを考えてみてください。幅700ピクセルの「container」の中に、幅200ピクセルの「left」と、幅500ピクセルの「contents」を、2段組で配置することを想定しています。

<style type="text/css">
<!--
#container { width : 700px; }
#left      { width : 200px; float : left; }
#contents  { width : 500px; float : left; }
-->
</style>

ここで、「left」の幅を100ピクセル増やして、300ピクセルに変えるとしましょう。すると、それに連動して、「container」の幅も100ピクセル増やすことが必要になります。
ただ、このような変更は、忘れたり間違えたりすることも多いです。それが原因で、Webページの表示が意図しないものになることも、よくあることです。

このような問題は、スタイルシートをPHPで出力することで、解決することができます。ある変更が他の箇所に影響する場合は、それらの箇所をすべてPHPのスクリプトで出力するようにすればOKです。
例えば、先程の例の場合だと、幅を出力する部分を、以下のようにPHPのスクリプトに置き換えます。

<?php
$left_width = 200;
$contents_width = 500;
$container_width = $left_width + $contents_width;
?>
<style type="text/css">
<!--
#container { width : <?php print($container_width); ?>px; }
#left      { width : <?php print($left_width); ?>px; float : left; }
#contents  { width : <?php print($contents_width); ?>px; float : left; }
-->
</style>

この状態で、「left」の幅を300ピクセルに変える場合、「$left_width = 200;」の文を「$left_width = 300;」に変えます。
「container」の幅（$container_width）は、「$container_width = $left_width + $contents_width;」の文で計算していますので、$left_widthを変更することで、$container_widthにも変更が反映されることになります。

スタイルシートが出来上がるまでにはいろいろと試行錯誤が必要ですが、上記のようにスタイルシートをPHP化することで、完成までの時間を短縮することができると思います。
また、1つのスタイルシートをベースにして、スクリプトで場合分けをして、複数のスタイルシートを作り出すようなことも考えられます。