トップページ > TIPS > CSSハック

CSSレイアウト[TIPS]

CSSハック

「CSSに記述ミスは無いのに、何度変更してもIEでうまくいかない。FirefoxはOKなのに！」こんなときの最後の手段が、CSSハック。

これは、ブラウザが持っているバグを利用して、特定のブラウザだけに専用のCSSを読み込ませる方法。
あるブラウザはなぜか読み込んでしまうけど、他のブラウザには意味不明で読み込めない、といったかんじで、 バグを使うので、あまり良い方法とは言えないらしい。
個人的には、フォントサイズを統一するなど、限られた範囲で使う分にはアリかなと思う。

IE6以下用、IE7用のCSSハックと、 どんな時に使用するかをまとめておく。
IE6以下のためのCSSハック
IE6以下とは、IE4〜6、MAC IE4〜5。
* html をセレクタの前に付ける。

（例）
* html #container {
font-size : 75%;
font-family : san-serif, Verdana , "MSPゴシック"
}
IE7のためのCSSハック
*:first-child+html をセレクタの前に付ける。

（例）
*:first-child+html #container {
font-size : 75%;
font-family : san-serif, Meiryo, "メイリオ"
}
ページの最上部へ

CSSハックを、どんな時に使用するか
ユーザーがサイトを閲覧する環境は、ブラウザや、ブラウザのバージョン、プラットフォームによって異なる。中でもサイトの見た目に大きく影響するのは下記の点。
(a) WIN IEでは、font-sizeを「px」指定すると、ユーザが拡大縮小できない。
(b) デフォルトのフォントサイズが、WINは16px、MACは14px。
(c) WINは字間がMACより詰まるので、1行の文字数が多く収まる。

このうち、(a)(b)を解決するために、次の指定が必要になる。
●まずはフォントサイズを「px指定」
●WIN IE用にフォントサイズを「％指定」
このふたつの指定で、フォントサイズを同じにする。
例えば文字サイズを12pxで見せたいなら、標準の指定で「font-size : 12px;」とし、IE6以下、およびIE7用に「font-size : 75%;」とする。WINのデフォルト16pxの75%は12px。そして%指定することによって、IEユーザーも文字サイズの変更ができる。

そのために、本サイトでは下記のようにCSSハックを使用している。

body {
font: 12px/1.6 Arial, Helvetica, sans-serif;
}

/* for WinIE6*/
* html body {
font-size: 75%;
font-family: Verdana, "MS P ゴシック", sans-serif;
}

/* for WinIE7*/
*:first-child+html body {
font-size: 75%;
font-family: 'メイリオ', Meiryo, sans-serif;
}

これで(a)(b)は解決。
残る(c)の「WINは字間がMACより詰まる」問題について。、
これに関しては、「フォントの指定について」の「字間に関する違い」で詳しく。

ページの最上部へ