ページを作っていてちょっと気になることがあったのでメモ。
このブログもそうだが、ページ内にやたらとプログラムコードやHTMLコードを記述することが多くなる。
で、その部分はpreタグでくくって書体は等幅フォントを使うようにしているんだが例えば
Webページを構成する各要素はドキュメントの流れに従い通常は上から下へ、左から右へと配置されていく。
そして要素の種類によって改行が入ったり入らなかったりする。
CSSを使う事でこの流れに逆らったレイアウトを実現する事が出来る。
どんな要素も（表示されている以上は）ドキュメント上でのX座標とY座標を持っているが、CSSでの'positionプロパティ'を'static'以外にする事でこれら座標を変える事が出来るようになる。
Javascriptから（prototype.jsを使い）要素をドラッグ可能にするスクリプトを書いてみた。
ソースは以下のような感じだ。
Webページ内である要素に透明効果を適用したい場合、CSSで調整する事が出来る。
ただし、ブラウザによってCSSのプロパティ名が異なってくるためそれらを考慮して記述していかなければならない。
Javascriptを使って同じように透明度を調節する事が出来るが、これらも結局はCSSの"opacity"プロパティや"-moz-opacity"プロパティ、もしくは"filter"プロパティをいじっているにすぎない。
prototype.jsを使うと同じ関数でこれらプロパティを操作できる。
RGBカラーを表現する時
CSSで"position"というプロパティがあるが、これはボックスを配置する時の基準位置を決める為のプロパティだ。
'static'、'relative'、'absolute'、'fixed'というプロパティ値がある。
ここを'static'以外の値にした時に今度は'top'、'right'、'bottom'、'left'というプロパティを指定できるようになる。
Safariでは"-webkit-box"、Firefoxでは"-moz-box"というCSSプロパティが利用できるようになっている。
これらは「ボックスレイアウト」と言われる手法に対応し、簡単に2段組や3段組のレイアウトを実現できる。
ただしプロパティ名の通りwebkitはSafariとChrome、mozはMozilla系（FirefoxやCamino等）のブラウザでしか使えないため当然これらがまともに使えるようになるにはまだまだ数年はかかるだろう。
2年ほど前だがWebページの制作をしている時cssファイルを動的に書き出せないものかと考えた事があった。
書き出すというよりはcssファイル自体をPHPファイルとして記述してHTMLのヘッダ部分で
