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

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

これならわかる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>こんな感じだったと思う（汗）こういうHTMLで、CSSは以下のように設定するタイプね。あってるよな？#menu { width:200px; float: left; }#main {width:600px; float: left; }#footer { clear: left; }今日は、float に助けられた一日でした。リスト要素を使っていて、メニューを作るのに画像を使ったらWinIEでヘンテコ不可解マージンが登場してね。その時も、float:left で流し込んだら余白が消えて、オオ！素晴らしい余白の設定値をゼロにしたり、高さを与えたり、色々弄くったけれど、floatで解決！本日の教訓。力技CSSレイアウトはやっぱりよくないんだ！場数を踏まないとねぇ～なかなかですが（笑） ･････つづく東京２３区中心・駅近ホテルズ｜散文誌・３６５*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方@importを使って外部スタイルシートを読み込む