小技集

IEでのみ解釈される属性値

どのブラウザでもバクや非対応のプロパティは付き物ですが、IEの非対応プロパティの多さとバグの多さは他の追従を許さず抜きんでています。IEにはアンダースコアハックと言い、IEでのみ有効になるプロパティの指定方法があります。

span.test {
	color: blue;
	_color: red;
}

としたとき、span.test は IEでは赤く、IE以外では青く表示されます。IEではすべてプロパティにおいて「_(アンダースコア)」を付けることでIEにだけ読み込ませることができます。この方法を利用する際は、アンダースコア付きの属性を後に書くことに注意してください。

人によって、本来は記述する必要はないがIEのためだけに記述しなければならないプロパティを書く際に _ を付けたりします。

divなどの配置を確認する

テーマを開発していると、要素の配置状況かよく分からなくなることが多々あります。また厳密な境界位置が知りたいことも少なくありません。こんなときは

div.sidebar { border: 1px solid red; }

などとすることで、枠線を表示させてどこがブロック(や要素)の境界なのか簡単に知ることができます。むしろCSSをいじって配置を行うときは、border表示をさせたままの方が便利です。

完全に配置が終わり、いざborderを外すとでたらめな位置にレンダリングされることがありますが、これはマージンの相殺によるものです(またborderで使用していた1px分だけ位置がずれるます)。そのときは「border: 1px」→「padding: 1px」に書き換えると良いでしょう。