岡崎でホームページ制作ならファーストステップ

Web制作に役立つＣＳＳハックの主要的なものを書き記しておきます。

Windows版 InternetExplorer 5.0

スタイルシート内で、

@media tty {
  i{content:"\";/*" "*/}}; @import 'win-ie50.css'; {;}/*";}
}/* */

              

この場合、win-ie50.cssというファイルを別に用意し、そのファイルはInternetExplorer 5.0だけが読み込むようになる。つまり、InternetExplorer 5.0で表示が崩れている部分は、このファイルにＣＳＳを書き込んで修正すれば良い。
しかし、InternetExplorer 5.0だけでなくInternetExplorer 5.5も同じように表示がすれている場合は下記のハックでまとめて修正したほうが効率的である。

Windows版 InternetExplorer 5.0、InternetExplorer 5.5

スタイルシート内で、

@media tty {
 i{content:"\";/*" "*/}} @import 'win-ie5x.css'; /*";}
}/* */

              

この場合、win-ie5x.cssというファイルを別に用意し、そのファイルはInternetExplorer 5.0とInternetExplorer 5.5だけが読み込むようになる。つまり、InternetExplorer 5.0とInternetExplorer 5.5で同じように表示が崩れている部分は、このファイルにＣＳＳを書き込んでまとめて修正すれば良い。
しかし、InternetExplorer 5シリーズだけでなくInternetExplorer 6も同じように表示がすれている場合は下記のハックでまとめて修正したほうが効率的である。

Windows版 InternetExplorer 5.0 ～ InternetExplorer 6

* html (例：p{ font-weight : bold; })

InternetExplorer 5シリーズとInternetExplorer 6で同じように表示が崩れている場合は、上の記述のように* htmlをＣＳＳのセレクタの前に記述する。これはスターハックと呼ばれる方法であるが、このように記述されたＣＳＳはInternetExplorer 5シリーズとInternetExplorer 6だけで適用される。

Windows版 InternetExplorer 7

*+html (例：p{ font-weight : bold; })

InternetExplorer 7で表示が崩れている場合には、上の記述のように*+htmlをＣＳＳのセレクタの前に記述する。このように記述されたＣＳＳはInternetExplorer 7だけで適用される。

Mac版 InternetExplorer 5

スタイルシート内で、

/*\*//*/
  @import "mac-ie5x.css";
/**/

              

この場合、mac-ie5x.cssというファイルを別に用意し、そのファイルはMac版 InternetExplorer 5だけが読み込むようになる。つまり、Mac版 InternetExplorer 5で表示が崩れている部分は、このファイルにＣＳＳを書き込んで修正すれば良い。

これら以外にも多くのハックが存在しますが、実務的にはこれらのハックの使用だけで各ブラウザとも表示に問題ないと思います。

しかし、ハックを使う以前に大事なことは、元になるＣＳＳが正しく的確に記述されていることが重要です。Web標準に準拠しているブラウザで表示に崩れがないことをきちんと確認し、その後にハックを使うべきです。

つまり、Web標準に準拠している度合いの高いSafari、Opera、Firefox、Chromeのようなブラウザで、表示に崩れがないようにページを制作することを最優先してください。ハックを使うのはあくまでも最後の緊急手段ということです。

参考までに、このFIRSTSTEPのサイトでどのようにハックを使用しているか直接見てみてください。

• このサイトのＣＳＳファイル