CSS3 メディアクエリをおさらい

レスポンシブ・ウェブ・デザインで利用されているテクニックのうちのひとつ、メディアクエリを簡単におさらいしてみます。

「Media Queries W3C Recommendation 19 June 2012」が最終仕様となっています。

メディアクエリは、メディアタイプと、メディア特性から、適用するスタイルシートを切り替えるように設定することができます。

メディアタイプには、screen や print などがあり、メディア特性には、width（幅）、resolution（解像度）、aspect-ratio（アスペクト比）などがあります。

この APPW.jp サイトでも、記事表示部分にメディアクエリを利用しています。その設定の一部を例としてあげてみます。例では、メディアタイプ screen の メディア特性 width に応じて、スタイルシートをそれぞれ設定しています。実際には、min-width、max-width というキーワードで width の範囲を条件として設定します。

@media screen and (min-width:1030px) {
  .fixedInlineBoxTop720Wrapper {
    width: 1030px ; 
  }  .fixedInlineBoxTop470Wrapper {
    width: 640px ; 
  }
}

@media screen and (min-width:960px) and (max-width:1029px) {
  .fixedInlineBoxTop720Wrapper {
    width: 960px ; 
  }
  .fixedInlineBoxTop470Wrapper {
    width: 570px  ;
  }
}

@media screen and (min-width:910px) and (max-width:959px) {
  .fixedInlineBoxTop720Wrapper {
    width: 910px ; 
  }
  .fixedInlineBoxTop470Wrapper {
    width: 520px  ;
  }
}

@media screen and (min-width:840px) and (max-width:909px) {
  .fixedInlineBoxTop720Wrapper {
    width: 840px ; 
  }
  .fixedInlineBoxTop470Wrapper {
    width: 450px  ;
  }
}

@media screen and (min-width:450px) and (max-width:839px) {
  .fixedInlineBoxTop720Wrapper {
    width: 450px ; 
  }
  .fixedInlineBoxTop470Wrapper {
    width: 450px  ;
  }
}

@media screen and (max-width:449px) {
  .fixedInlineBoxTop720Wrapper {
    width: 380px ; 
  }
  .fixedInlineBoxTop470Wrapper {
    width: 380px ;
  }
}

一般的には、iPhone や iPad の幅を基準に設定をはじめていくと、その効果がわかりやすそうです。

さて、Internet Explorer 9 以前のバージョンに向けて、以下のような記述を HTML に設定しておくことも一般におこなわれています。Internet Explorer 9 以前のバージョンを利用されている方も多いようです。

<!--[if lt IE 9]>
<script type="text/javascript" src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

これにより Internet Explorer 9 以前のバージョンでも Media Queries が有効になります。

ただし、このとき、@import で読み込んだ CSS では動作しなかったり、メディアクエリの条件式は省略せずに構文通りにしなければならないなどの報告が Google 検索するとみられます。