Webブラウザの検証！

CSSハックとは

　CSSコーディングを行い、Webブラウザのバグに対して個別対処を行う手法の1つにCSSハックと呼ばれるものがあります。CSSハックとは、WebブラウザのバグやCSSの解釈の違いを逆に利用して、特定のWebブラウザにのみ、CSSのセレクタレベルで個別指定を行う方法です。

　CSSハックを記述する場合には、まずモダンWebブラウザを基準にコーディングしていき、IEで表示がおかしい箇所（セレクタ）に対して、CSSハックを後に併記します。通常のセレクタの後から併記することで、まずモダンブラウザは前のセレクタを解釈し、後ろのCSSハックの記述はIEで再読み込みするという順番になります。

　注意したいのはあくまでもCSSハックは裏技に過ぎません。Webブラウザのバージョンアップで使えなくなったハックも過去には存在していますので、使い続けるためにはハックの最新情報にアンテナを張る必要があります。また、CSSハックを使用する際には、コード内にコメントを書いておくと複数人でファイルを扱う場合にミスを軽減することができます。

使用頻度の高いCSSハック「clearfix」

　「clearfix」と呼ばれるCSSハックはIEを含むすべてのWebブラウザ向けハックです。これはfloatプロパティの仕様がデザインのレイアウトに適さないケースがあり、その問題を解決する方法として、一般的に使われています。

　floatを指定して、その後の回り込んだボックスの要素量が少ない場合、背景が表示されないCSSの仕様があります。例えば、左側に写真を配置してfloatを指定し、右側に説明文を流し込む場合などです。

　この場合に説明文の縦幅が写真よりも長ければ、背景を表示できるのですが、説明文の縦幅が短い、もしくは説明文がない場合に、背景を指定した親ボックスの高さが0になってしまいます。

　これは、CSSの正しい仕様ですからこの解釈自体はバグではありません。しかし、回り込みを行ったボックスの背景を表示させるシチュエーションはデザイン上頻繁にありますので、その際の対処法として「clearfix」を使うのが有効的な方法です（図2）。