sakai 22:32 PM
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。
ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！
IE6 でも min-height を使う
例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。
IE6 に min-width（相当）を適用するのは、今のところ難しい？（使いどころもさほどないですが…）
IE6 で float したボックスの margin の値が2倍になるバグの対処方法
このバグはコーダーなら誰もが一度は遭遇するのではないでしょうか。
IE6 のバグの中でもかなり有名な部類のものですが、回避方法さえ知ってしまえば怖くないです！
以前は margin ではなく padding を使うことでバグを回避していましたが、最近では IE6 にだけ display:inline を適用して回避することが多いです。
float したオブジェクトをセンタリングする
float したオブジェクトが float した方向に揃ってしまってセンタリングできない、というのも悩みどころです。
float を諦めて display:inline にした経験がある方も多いのではないでしょうか。
以前にご紹介した「CSS を使った見栄えの良いページャー」も、上記のテクニックでセンタリングすることができます。
オブジェクトを上下中央揃えにする
渡されたデザイン・カンプを見たら「写真の横のキャプションが上下中央揃えになってる！」なんてことがあります。
キャプションの上方向に margin を指定してなんとなく中央っぽくするか、諦めて table で組むか… という感じで頭を抱えたものでした。
上記のテクニックなら、CSS でスッキリいけます。
ただ、凝ったデザインで HTML が複雑になってくると IE6 で上手くいかないケースも多いです。その場合は諦めて素直に JavaScript でなんとかします。
ブロック要素の段組み
親ボックスの横幅ピッタリにボックスを段組みしたい… というデザイン要件って意外と多いです。
そこで、手前味噌ではありますが
上記のテクニックを知っておけば、HTML に余計な ID や class を付与しなくても、サクッとコーディングできます！
以上、お仕事で個人的によく使うテクニックの BEST 5 でした。
コメント
やはりIE6関連が多いですね・・・
とても参考になります。
早くIE6消えれば良いのに；；
tsuki | 2009年06月19日 14:47
＞tsuki さん
コメントありがとうございます。
IE6 は比較的最近のブラウザシェア率の発表を見ても 18% 近くのシェアがありますし、なかなか要件から切り捨てられなくて辛いところですね。
sakai | 2009年06月22日 19:50