Main | February 2006 »

December 14, 2005

2段組レイアウト

コンテナを用意してその中に2段組にしたいブロックレベル要素を格納する。

div#container {
	width: 100%;
}
div#left {
	width: 30%;
	float: left;
}
div#right {
	width: 70%;
	float: right;
}
<div id="container">
	<div id="left">
		メニューとか
	</div>
	<div id="right">
		コンテンツとか
	</div>
</div>
<div id="next">
	まだまだ続くよ
</div>

コンテナの次にブロックレベル要素が続くなら

div#next {
	clear: both;
}

と指定する。

December 12, 2005

HTTP圧縮

HTTP圧縮はまだまだ十分に使われていない。

Compression is one of the best supported and yet underutilized technologies available on the Web today. By using the deflate and gzip data compression algorithms, HTTP compression optimizes files for delivery across the Web, leading to faster page loads and reduced bandwidth costs.

port80 software

Apacheのmod_gzipとかPHPのzlib.output_compressionで圧縮できるけど
圧縮処理でCPU喰うので、バックボーンの太さとCPUの余力をトレードオフにかけて考えないとダメだと思います。

December 07, 2005

ctype関数

バリデートを楽にしてくれる関数群を発見。

ctype_alnum -- 英数字かどうかを調べる
ctype_alpha -- 英字かどうかを調べる
ctype_cntrl -- 制御文字かどうかを調べる
ctype_digit -- 数字かどうかを調べる
ctype_graph -- 空白以外の印字可能な文字かどうかを調べる
ctype_lower -- 小文字かどうかを調べる
ctype_print -- 印字可能な文字かどうかを調べる
ctype_punct -- 空白、英数字以外の出力可能な文字かどうかを調べる
ctype_space -- 空白文字かどうか調べる
ctype_upper -- 大文字かどうか調べる
ctype_xdigit -- 16進数を表す文字かどうかを調べる


かなり使えそう。さらに

ctype関数は、正規表現よりもつねに好ましく、さらに str_* および is_*のような いくつかの等価な関数よりも好ましいことに注意してください。 これは、ctype関数がネーティブなCライブラリを使用しており、処理が著しく 高速であるためです。

PHPマニュアル

らしい。

December 04, 2005

Strictでブロックレベル要素をセンタリング

div#block {
	margin: 0 auto;
	width: 300px;
	border: 1px solid #00f;
}

のようにmargin: 0 auto;と指定してやれば良いけど、これだとIEはバグのせいでセンタリングされない。
text-alignプロパティはインライン要素の位置揃えを指定するものだが、IEだとブロックレベル要素まで影響を受けてしまう。
このバグを逆手にとってblockを包むようなラッパーを用意して、そこにtext-align: center;と指定してやれば良い。

div#wrapper {
	text-align: center;
	border: 1px solid #f00;
}