システム屋さんが喜ぶ？更新楽々な組み方

floatとclassを用いた良くある組み方

下の図のような横並び3つのブロックで、複数行のデザインなんてのが弊社ではよくあります。

新人時代はそれぞれの要素にmargin-rightを指定して、3つめの要素にだけclassを付けmargin-right:0;指定してました。
ソースはこんな感じ↓

.sample {
	width:580px;
}
ul {
	width:580px;
}
li {
	margin:0 20px 10px 0;
    width:180px;
	float:left;
}
li.third {
	margin-right:0;
}

でもそれだと、クライアントから「2番目削除して詰めてください！」なんて依頼が来たとき、classの位置を書き換えないといけません。

さらに、システム屋さんに「出来れば動的に同じ記述を繰り返し吐き出したいんだけど…途中でclassとかつけないとダメ？」なんてことを言われたりするかもしれません…。

余計なclassを使わない組み方

さて、上にあげたような要望をあっさりクリアする方法があります。
さっそく出来上がり図を見てみましょう。

.sample {
	width:580px;
}
ul {
	margin-right:-20px; /* ←　ここがみそ！　*/
	width:600px; /* ←　ここがみそ！　*/
}
li {
	margin:0 20px 10px 0;
    width:180px;
	float:left;
}

floatさせてる要素にclassは不要。
代わりに親要素をチョコチョコっといじくりました。

全体の幅を580とした場合、親要素の幅を600pxと指定します。
一見違和感がありますが、margin-rightにマイナスの値を指定することで結果的に580pxとなるのです！
そう！無かったことになるのである！

この方法なら何番目の要素を削除して詰めても、途中で要素を追加しても特にclassを書き換えることもナッシング！

さらにはシステム屋さんは気にせず<li>の塊を繰り返し処理で吐き出すだけ！

今はnth-childなんかの記述もあって、ほとんどのブラウザも上記の方法を使わずとも対応可能ですが、古いブラウザの対応が必要なサイトの場合などに使ってください。