<< そろそろ次のテンプレート | main | ココア＆アーモンドと抹茶クッキー >>
段組とwidth解釈の違いとCSSハック
Web(Website) | 2004-12-08 (Wed) 23:59
らーよさんちの図書館台帳が teeter tooter から sb に移行されました。ふふふ、「 MT いやなら sb イイヨー」とそそのかしたかいがありましたヨ（笑）
その際テンプレートのカスタマイズに頭を悩ませていたらーよさんのお役に立てればと、html と CSS のカスタマイズ（というかデザイン移行）がしやすいように Tab つけて整理したり、CSS に解説を入れたりしていたのですが、気がつけば本気になって台帳のデザインを移行している自分がいたり。だって以前さんざん悩んだはずの段組の不具合にまたもや遭遇するんだものー。悔しいじゃないですか！ 一度はここの段組のやり方とは少し違う組み方にしてみたのですが、やっぱりどーやっても崩れやがるので、結局 CSS ハックを使いました。IE でも崩れないやり方っていうとやっぱりこれが一番いいのかな。
CSS ハックって怪しい響きだけど何Σ(゜Д゜;≡;゜Д゜)！？ という方のために、参考になるサイト。
- JUGEM CSS講座-テンプレートを作ってみよう1
わかりやすい解説 - <!-- Traduttore, traditore -->
マニア向け
IE5.x や 6.0 にあるよく知られたバグに「ボックスの幅（width）の解釈が間違っている」というものがあります。詳しくはADPさんの記事を参照していただきたいのですが（説明が面倒だからじゃないよ！）、えー長文読むのマンドクセな方に要点だけかいつまむと、つまり「 CSS の正しい解釈的にはボックスの幅ってのはpaddingやborderを除いた内容のみの幅で、Opera とか Firefox とか N7 あたりはほぼ正しく表示するんだけど、IE は padding と border を含めて width として扱っちまうので、そこを考慮しないで作ると幅がずれる（＝幅固定の段組が崩れる）」ということ。参考先の画像を見ていただけると明解です。解決方法も解説されておられるのでぜひ。
で、ADPさんの記事の「外側のブロック要素で width を指定し、中身のブロック要素で padding を指定する」という方法で解決してもいいのですが（ float を使った段組の Tips も解説されてます。こちらの Tips はどれもこれも参考になりますな）、ブロックをあんまり入れ子にしたくない場合に使うのが前述の CSS ハックです。ハックとか言われると怪しい響きに感じますが、一応は間違った記述方法ではないらしいので、固定幅の段組が崩れやがるんだよムキー！となっている方は一読してみるといいかも。
