ネットで検索をすると 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
初めまして。
スレ違いかと思うのですが、よろしければひとつ教えていただけませんでしょうか。
CSS で margin:0 の指定をしているのに
余白ができてしまい、困っています。
index.css を使わないページは問題ないようなのですが、
index.css のどこが問題なのかがわかりません。
お忙しいかとは思いますが、
どうかよろしくお願いいたします。
てんちょ | 2010年03月16日 10:02
＞てんちょさん
コメントありがとうございます。
すみません、ご提示の情報だけではどの部分でお困りなのかがわからないです！（x _ x）
お手数ですが、もう少し具体的に現象をお知らせいただけますでしょうか。
よろしくお願いいたします！
sakai | 2010年03月16日 10:08
早々にお返事をありがとうございます。
えとですね、
index.html
xmas.html
などでは index.css を使っていまして、
たとえば
126716.html などでは index.css を使っていません。
それで、これを比較してみますと、
前者ではページの上の方を見ればわかるのですが、
margin;0 にもかかわらず左側と上側に余白ができてしまっています。
この余白がなぜできているのかがわからなくて、
それでご相談いたしました。
どうぞよろしくお願いいたします。
てんちょ | 2010年03月16日 10:32
＞てんちょさん
ソースを拝見しました。
index.css の一番上に
* {
margin: 0;
padding: 0;
}
を入れれば解決かと思われます。お試しください。
よろしくお願いいたします！
sakai | 2010年03月16日 10:48
解決しました。
どうもありがとうございましたm(_ _)m
てんちょ | 2010年03月16日 10:56
追伸
上記サイトは趣味程度ではありますが、
一般的には営利目的といわれるものですので、
私のコメントはすべて削除していただければ幸いです。
（宣伝効果を狙ったものと思われるのは不本意ですので、、）
いろいろとお手数をおかけしてすみませんが、
よろしくお願いいたします。
てんちょ | 2010年03月16日 14:31
＞てんちょさん
解決されてなによりです。
コメント全文消してしまうのは残念なので、失礼ながらURLのみ削除いたしました。これであれば、他者にいらぬ誤解を与えてしまうことはないかと。
今後ともどうぞよろしくお願いいたします。
sakai | 2010年03月16日 15:58