スマートフォン・タブレットからインターネットサーバーオペレーション HTML5.x

APPW.jp HTML5.x

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

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

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

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

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

この APPW.jp サイトでも、記事表示部分にメディアクエリを利用しています。その設定の一部を例としてあげてみます。例では、メディアタイプ screen の メディア特性 width に応じて、スタイルシートをそれぞれ設定しています。実際には、min-widthmax-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 検索するとみられます。

@supports ルールを設定してみます

CSS3 columns プロパティを試します

flexbox でも要注意の word-break プロパティ

Chrome 27 で flexbox の寸法と軸を試します

Chrome 27 で Flexbox の寸法の混在を試します

Flexbox の寸法とラインの組み合わせを試します

Chrome 27 で inline-flex を試します

CSS3 角丸とドロップシャドウを確認

CSS3 グラデーションの最新仕様を確認

Chrome 24 でフレキシブルボックスの軸を試します

via IPv4

カテゴリー

アーカイブ