CSSメディアクエリで Internet Explorer 10/11 を指定する - CSS

CSSのメディアクエリで、Internet Explorer 10, Internet Explorer 11 の場合を指定するコードを紹介します。

概要

CSSで Internet Explorer 10, Internet Explorer 11 の場合に限り、スタイルを変更したい場合があります。ユーザーエージェントを判定してプログラムで出し分けすることもできますが、メディアクエリを利用することで、CSSの記述のみで Internet Explorer 10, Internet Explorer 11 でのスタイルを指定できます。

書式

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
...(IEで適用するスタイル)
}

記述例

Internet Explorer 10/11 に適用させるメディアクエリ

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
  h1{
    font-size: 32px;
  }
}

コード例

下記のコードを記述します。

intenet-explorer.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="internet-explorer.css" /> 
</head>
<body>
  <h1>タイトルです。</h1>
  <p>ページの記述です。コメントコメント。</p>
</body>
</html>

intenet-explorer.css

h1{
  font-size:24px;
  font-family:'MS Mincho';
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  h1{
    font-size:32px;
    font-family:'MS Gothic';
  }
}

解説

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none)

の指定により、ページ表示するWebブラウザが Internet Explorer の場合にメディアクエリ内のスタイルが適用されます。メディアクエリ内では、

  h1{
    font-size:32px;
    font-family:'MS Gothic';
  }

を指定しているため、Internet Explorerの場合はH1タグのフォントが「MSゴシック」で表示される動作になります。他のWebブラウザの場合はメディアクエリ外のH1タグのスタイルが適用されるため「MS明朝」のフォントで表示されます。

実行結果

上記のHTMLファイルをWebブラウザで表示します。

Internet Explorer での表示

Microsoft Edge での表示

Google Chrome での表示

Internet Explorer以外のWebブラウザでは、H1タグは明朝体で表示されていますが、Internet Explorerの表示ではH1タグの表示は、フォントサイズが若干大きくなりゴシック体で表示されることが確認できます。
CSSのMediaクエリでInternet Explorer のみ表示スタイルを変更できました。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

掲載日: 2017-10-19

目次