Web標準にアプローチ　〔まいまいのお宿。〕

2007/06/24

余白（margin／padding）にマイナスの値を使うべきではないのか

テーマ： Web標準(117)

カテゴリ： Web標準

これならわかるWeb標準サイトの作り方入門の入門

CSSによるWebデザインカスタマイズガイド

CSSビジュアルデザイン・メソッド

「CSSには、マイナス値は使うべきではない？」

久しぶりに、CSS濃度の高いサイト作りをしています。
あーれや、こーれやと、ボックスを上下左右していて
なーんとなく、marginの値にマイナスを入れたら簡単そうな場面に出くわしました。

そこで、ちょっと疑問。
マージンって、余白って、マイナスの値OKなんだろうか？

困ったり、自信がなかったりした時、開く本が Web標準の教科書。
それによると、マイナスの値はＯＫであると書かれている。

どーも、気持ち悪くてね。
余白にマイナスってどーよ？現実問題ありえないわね～

W3C CSS 検証サービスでチェックしてみても
問題ないですよ～ＯＫですよぉ～って結果が出たにはでました。

ネットで調べてみると、WinIE6などでレイアウトが崩れる～とか
できるなら、そうすべきでない！とか、強行手段だ！
みたいなことも載っているのね。

んならば、マージンで、あーだこーだすることを避けてみるか。

どーしよっかな？と思って、思いついたのがfloatを使うやり方ね。
ちょっと自分メモ。

<div id="header">ヘッダー部分</div>
<div id="contents">
<div id="menu">メニュー部分</div>
<div id="main">コンテンツ本体部分</div>
</div>
<div id="footer">フッター部分</div>

こんな感じだったと思う（汗）

あってるよな？

#menu { width:200px; float: left; }
#main {width:600px; float: left; }
#footer { clear: left; }

今日は、float に助けられた一日でした。
リスト要素を使っていて、メニューを作るのに
画像を使ったらWinIEでヘンテコ不可解マージンが登場してね。
その時も、float:left で流し込んだら余白が消えて、オオ！素晴らしい

本日の教訓。
力技CSSレイアウトはやっぱりよくないんだ！
場数を踏まないとねぇ～なかなかですが（笑）