ホームページの制作依頼をお考えなら、迅速で丁寧がモットーのホームページ制作会社「ウェブスポット」へ

ホームページの制作ならウェブスポット

  • >>CSSハック：2008/7/15
  • 今回は、CSSハックと呼ばれるもの（正式名称は知らない）をご紹介します。
  • ホームページ制作者の悩みの種、ブラウザごとの見え方の違い…。我々制作者からしたら永遠のテーマでよね（苦笑）。IE6に合わせたら、firefoxがきちんと見えない…ってやつです。
  • それを少し手助けしてくれるのがCSSハックと呼ばれる技法です。
  • 理屈はCSSを書くときに、チョコチョコした記号を入れることで、プログラムの条件分岐みたいにできるってやつです。CSS初心者＆初級者は意外と知らない人多いですよね。
  • 例えば
  • .hack{
  • 　　margin20px 0 0 0;
  • 　　_margin15px 0 0 0;
  • }
  • 上記のように半角のアンダーバーを入れると「IE6のみに有効」ってな感じです。
  • ほとんどのブラウザは上位に20pxマージンをとりますが、IE6のみ上位に15pxのマージンを取りますよってことになります。
  • 僕がよく使うハックは
  • html:not([lang*=""]) .hack{ margin20px 0 0 0; }　　　→firefoxのみ有効
  • html:not(:only-child:only-child) .hack{ margin20px 0 0 0; }　　　→safariのみ有効
  • html>body .hack{ margin20px 0 0 0; }　　　→IE6以外有効
  • * html .hack{ margin20px 0 0 0; }　　　→IE6のみ有効
  • まぁ数をあげたらキリがないのですけど…。
  • 機会があれば、まとめてみます。
  • CSSリファレンストップ