スマートフォン・デスクトップなど要件に合わせたMedia Queriesの実装方法のまとめ

Post on:2011年8月16日

スマートフォン・デスクトップをはじめ、IE6などのレガシーブラウザ対応といった要件に合わせたMedia Queriesの実装方法を紹介します。

サイトのキャプチャ

Techniques For Gracefully Degrading Media Queries

[ad#ad-2]

下記は各ポイントを意訳したものです。

テクニック1：スマートフォンユーザーがメイン

最初に紹介するテクニックは、Media Queriesをそのまま使うものです。

CSS

#container {
 _width: 460px; /* IE6用 */
 max-width: 460px;
}

@media only screen and (width) { /*Media Queriesサポートブラウザ用 */

#container {
  max-width: 1200px; /* Media Queriesでの最大幅を指定 */
 }

}

これは主にスマートフォンをメインにしたサイトを作成する利用する方法です。

対象

  • スマートフォンユーザーをメインターゲットとしている場合
  • デスクトップユーザーは戦略上、あまり想定していない場合

テクニック2：レガシーブラウザは非対象

IEの条件付きコメントを併用して、Media Queriesを指定します。

外部スタイルシートの指定

<link rel="stylesheet" href="/css/global.css" media="all">
<link rel="stylesheet" href="/css/layout.css" media="all and (min-width: 30em)">
<!--&#91;if (lt IE 9)&(!IEMobile)&#93;>
<link rel="stylesheet" href="/css/layout.css" media="all">
<!&#91;endif&#93;-->

参考：Windows mobile media queries

この方法はCSS3 Media Queriesをサポートしないブラウザでは動作しません。しかし、古いレガシーブラウザのサポートを必要としないサイトでは充分利用できるテクニックです。

対象

  • Media Queriesは一つのスタイルシートファイルにまとめる場合
  • デスクトップ用のIEでマルチカラムのレイアウトなどが必要な場合
  • レガシーブラウザのサポートを考慮しなくてよい場合

テクニック3：スマートフォンユーザーのみ

モバイルファーストのアプローチです。

CSS

@media screen, all and (min-width: 300px) {
	div {
		background: blue;
	}
}

同じ内容のものを必要としない、シンプルなスタイルシートです。

対象

  • スマートフォンユーザーのみの場合
  • モバイル用にサイトを構築し、IEではデスクトップレイアウトを必要とする場合
  • ローディング時間やメンテナンスビリティを最小限にしたい場合

[ad#ad-2]

テクニック4：デスクトップユーザーがメイン

これはIE6/7/8でもMedia Queriesと同じ効果が得られるようにする「Respond.js」を使用します。

JavaScript

<script src="respond.src.js"></script>

emベースのクエリはサポートしませんが、IE6/7/8でブラウザの幅と高さを取得し、最適なスタイルシートを適用することができます。

対象

  • デスクトップのサポートがメインの場合
  • ブラウザの幅と高さのみが必要な場合
  • emで幅を想定しない場合
  • JavaScriptがオフなユーザーを考慮しない場合

テクニック5：レガシーブラウザも含める

さらに古いブラウザをサポートする場合は、IE5+, Firefox1+, Safari2にも対応した「css3-mediaqueries.js」を使用します。

JavaScript

yepnope({
test : Modernizr.mq('@media only screen and (width)'),
yep  : '',
nope : 'css3-mediaqueries.js',
});

「Yepnope」と「Modernizr」でMedia Queriesをサポートしているブラウザかチェックし、サポートしてないブラウザの場合のみ「css3-mediaqueries.js」を読み込むように利用します。

もし非IEのデバイスのサポートを必要としないなら、下記の条件付きコメントで軽量化することもできます。

<!--&#91;if (lt IE 9) & (!IEMobile)&#93;>
 <script src="css3-mediaqueries.js"></script>
 <!&#91;endif&#93;-->

対象

  • ピクセルベースの幅で設定するMedia Queriesの場合
  • 超軽量（15KB）
  • スマートフォンユーザーを含まない場合

sponsors

top of page

©2024 coliss