タグ「CSS」が付けられているもの

去る4月8日に、「CSS Variables」という提案が公開されています。
これが現実になれば、CSSの中で変数を使うことができるようになります。

こもりまさあき氏の「gaspanik weblog」で、「自分を表すCSS」という記事が出ていました。
自分の情報を、スタイルシート風に記述しようというものです。
面白かったので、私もやってみました。

Webページの一部を折りたたんで表示する際に、JavaScriptで要素のdisplayプロパティを書き換えることがよく行われます。
divなどのブロックレベル要素の場合、「要素.style.display = 'none';」でその要素が非表示になり、「要素.style.display = 'block';」で表示されます。

ところが、この手法を使って、表のある行（tr要素）の表示／非表示を切り替えようとしたところ、はまってしまいました。
Internet Explorerでは希望通りの動作になりましたが、その他のブラウザでは表が崩れてしまいました。

この動作の例と、解決方法を紹介します。

以前に「スタイルシート本を書く」というエントリーを書きましたが、その本がまもなく発売になります。
「スタイルシート ポケットリファレンス」という本で、技術評論社から発売になります。
定価は2,080円（税抜）です。

先日のエントリーで書いたように、現在スタイルシートのリファレンス本を書いています。
その際に、W3CのCSSのサイトを参考にしていますが、そこには次期CSSの「CSS3」の情報も出ています。

MT本の作業は一段落しましたが、休む暇もなく次の仕事に突入です。

次に書く本は、スタイルシートのリファレンス本です。
MTなどの影響でスタイルシートを扱う機会が非常に増えましたので、リファレンス本の企画を提案したところ、企画が通って書くことになりました。
スタイルシートはブラウザによって動作が違うところがあったりして、チェックに手間がかかりそうなのが厳しいところですが、何とかがんばって書きたいと思います。

7月～8月頃に出すことを予定しています。
スタイルシートのリファレンス本を買おうと思っている方は、それまでお待ちいただけると幸いです（笑）。

前回のエントリーに続いて、スタイルシートのPHP化を紹介します。

前回のエントリーでは、PHP化したスタイルシートをHTMLファイルの中に組み込む形になっています。
しかし、linkタグを使って、スタイルシートをHTMLファイルと別ファイルにすることも多いです。

そのようにしたい場合、以下のような手順を取ります。

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つのスタイルシートをベースにして、スクリプトで場合分けをして、複数のスタイルシートを作り出すようなことも考えられます。