亜細亜ノ蛾 - Weblog

styles.cssをhack！

方法は簡単で、styles.cssに一箇所追加するだけ。

#list-blog .shortcuts {
	clear:both;
	float:left;
	width: 100%; /* この行を追加 */
	margin-left: 2px;
}

すると、IEでもこんな感じに表示される。

IEでも表示が崩れない

要するに、floatした（div）.shortcutsにwidthを設定するといいみたいだ。

.body-nav {
	float: right;
	width:80%; /* 85 => 80 */
	margin: 0 15px;
}

floatにはwithを

では何故これで直るのか──というのは、実はよく解っていなかった。以前ねこめしにっきで話題になっていたのを中途半端に覚えていたので、「floatとwidthはセットで」と思い、実際にテストしてみたらうまく行った──というのが実際の所。

画像とかの「あらかじめタテヨコ幅を持っている」ものではないモノを float させる時は、必ず width の値を具体的に明示しませう～。

ねこめしにっき（2001年8月下旬）

調べてみると、CSS（2）のリファレンスにも、下記のようにはっきりと書かれていた。

（floatの項目）

このプロパティの対象となる要素には，何らかの方法で幅を明示しなければなりません（widthプロパティなどで割り当てるか，置換要素の場合は内在する幅が流用される）。CSS2仕様では，幅が明確ではないフロートの幅は '0' とみなされます。

視覚整形モデル - CSS2 リファレンス

また、floatを使ってデザインをする時は、下記の記事もかなり参考になるので、一緒に紹介。

ADP: floatレイアウトでつまづかないためのTips

styles.cssはインデックステンプレートにすると便利

今回のようにstyles.cssを自分好みに変更する場合、いちいち「エディタで変更→FTPで転送→確認→エディタで変更──」とするのは（自分の環境では）かなり面倒。そこで、styles.cssは「新しいインデックス・テンプレートを作る」を利用して、MTの「テンプレート」画面から編集するのがお手軽だと思う。

さて、エントリーしやすい環境も整えたし、サクサク記事を書いていきたいな──。