IEのみCSS適用テクニック完全網羅！条件付きコメント、CSSハック、Modernizr、プリプロセッサ、Autoprefixer徹底解説
Internet ExplorerにのみCSSを適用する方法
条件付きコメントは、HTMLコメントを使用して特定のブラウザにのみCSSを適用する方法です。IEのみスタイルを適用するには、次のように記述します。
この方法は、シンプルでわかりやすいですが、メンテナンスが難しくなる場合があります。また、すべてのIEバージョンで動作するとは限りません。
CSSハックは、ブラウザの独自プロパティを利用して特定のブラウザにのみスタイルを適用する方法です。IEのみスタイルを適用するには、次のようなプロパティを使用できます。
*htmlハック：IE5～IE8のみ適用\9ハック：IE9のみ適用
/* IE5～IE8のみ */
*html body {
background-color: #F0F0F0;
}
/* IE6～IE7のみ */
_ \* body {
background-color: #E0E0E0;
}
/* IE9のみ */
\9 body {
background-color: #D0D0D0;
}
Modernizrは、JavaScriptライブラリを使用してブラウザの機能を検出する方法です。IEのみスタイルを適用するには、次のように記述します。
<script>
if (Modernizr.ie) {
document.body.classList.add('ie');
}
</script>
.ie body {
background-color: #F0F0F0;
}
Modernizrは、CSSハックよりもメンテナンスが容易で、すべてのIEバージョンで動作します。ただし、JavaScriptライブラリをロードする必要があるという欠点があります。
プリプロセッサを使う
SassやLessなどのCSSプリプロセッサは、条件分岐や変数などの機能を使用して、IEのみスタイルを適用するコードをよりわかりやすく記述することができます。
// Sassの場合
@if IE {
body {
background-color: #F0F0F0;
}
}
// Lessの場合
.ie {
body {
background-color: #F0F0F0;
}
}
プリプロセッサは、複雑なCSSコードを整理するのに役立ちますが、導入にコストがかかります。
Autoprefixerは、CSSコードを自動的にベンダープレフィックス（ブラウザごとに必要な独自のプロパティ）を追加してくれるツールです。IEのみスタイルを適用するには、次のように設定します。
body {
background-color: #F0F0F0;
}
Autoprefixerは、手動でベンダープレフィックスを追加する必要がなく、メンテナンスが容易です。ただし、すべてのベンダープレフィックスに対応しているわけではありません。
- シンプルでわかりやすい方法が必要な場合: 条件付きコメントを使う
- 簡潔に記述したい場合: CSSハックを使う
- メンテナンスが容易で、すべてのIEバージョンで動作する必要がある場合: Modernizrを使う
- 複雑なCSSコードを整理したい場合: プリプロセッサを使う
- ベンダープレフィックスを自動的に追加したい場合: Autoprefixerを使う
注意事項
- IEは2022年にサポート終了しており、新しいWebサイトでは使用するべきではありません。
- 上記の方法は、あくまでも古いIEブラウザをサポートする場合の暫定的な対策として使用してください。
- できる限り、最新のWeb標準を使用してCSSを記述し、すべてのブラウザで同じように表示されるようにすることをお勧めします。
- [CSSハックを使わずIEのバグに対処する方法 - All About](
<!DOCTYPE html>
<html>
<head>
<title>IEのみCSSを適用</title>
<style>
body {
background-color: #FFF; /* 全てのブラウザで白色 */
}
</head>
<body>
<p>このページは、Internet Explorerのみ背景色が灰色になります。</p>
</body>
</html>
CSSハックを使う
<!DOCTYPE html>
<html>
<head>
<title>IEのみCSSを適用</title>
<style>
body {
background-color: #FFF; /* 全てのブラウザで白色 */
}
*html body { /* IE5～IE8のみ灰色 */
background-color: #F0F0F0;
}
_ \* body { /* IE6～IE7のみ灰色 */
background-color: #E0E0E0;
}
\9 body { /* IE9のみ灰色 */
background-color: #D0D0D0;
}
</style>
</head>
<body>
<p>このページは、Internet Explorerのみ背景色が灰色になります。</p>
</body>
</html>
Modernizrを使う
<!DOCTYPE html>
<html>
<head>
<title>IEのみCSSを適用</title>
<script src="https://modernizr.com/docs/"></script>
<style>
body {
background-color: #FFF; /* 全てのブラウザで白色 */
}
.ie body { /* IEのみ灰色 */
background-color: #F0F0F0;
}
</style>
</head>
<body>
<script>
if (Modernizr.ie) {
document.body.classList.add('ie');
}
</script>
<p>このページは、Internet Explorerのみ背景色が灰色になります。</p>
</body>
</html>
プリプロセッサを使う（Sassの場合）
// style.scss
body {
background-color: #FFF;
}
@if IE {
body {
background-color: #F0F0F0;
}
}
<!DOCTYPE html>
<html>
<head>
<title>IEのみCSSを適用</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>このページは、Internet Explorerのみ背景色が灰色になります。</p>
</body>
</html>
Autoprefixerを使う
body {
background-color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<title>IEのみCSSを適用</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>このページは、Internet Explorerのみ背景色が灰色になります。</p>
</body>
</html>
- 上記のサンプルコードはあくまでも例であり、状況に合わせて適宜変更する必要があります。
Internet ExplorerにのみCSSを適用するその他の方法
フィルタを使う
Internet Explorerは、他のブラウザでは非推奨となっているfilterプロパティをサポートしています。このプロパティを使用して、IEのみスタイルを適用することができます。
/* IEのみ灰色 */
body {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* 半透明 */
}
プロパティの値を指定する
/* IEのみボーダーを表示 */
body {
border: 1px solid #F0F0F0; /* IEでは黒、その他ブラウザでは透明 */
}
ベンダープレフィックスを使う
CSSベンダープレフィックスは、特定のブラウザ専用のCSSプロパティを指定するために使用されます。Internet Explorer専用のベンダープレフィックスを使用して、IEのみスタイルを適用することができます。
/* IE9のみボックスサイズを変更 */
body {
-ms-box-sizing: border-box; /* IE9 */
box-sizing: border-box; /* その他のブラウザ */
}
Internet ExplorerにのみCSSを適用するには、様々な方法があります。それぞれの方法には長所と短所があるので、状況に合わせて最適な方法を選択する必要があります。
IEは2022年にサポート終了しており、新しいWebサイトでは使用するべきではありません。古いIEブラウザをサポートする必要がある場合は、上記の方法を参考に、適切な対策を講じてください。
css internet-explorer
