Media Queriesでレスポンシブ


Media Queriesはcss3で画面サイズや解像度などに応じて、スタイルを切り替える機能でrす。
これは端末の種類に応じてスタイルの適用対象を限定すMedia Typeの使用を拡張したもの。

以下のように細かな条件指定ができます。

<link rel="stylesheet" href="phone.css" type="text/css"
 media="screen and (max-width: 320px)">
 <link rel="stylesheet" href="phone.css" type="text/css"
 media="screen and (min-width: 321px) and (max-width: 767px)">
<link rel="stylesheet" href="pc.css" type="text/css"
 media="screen and (min-width: 768px)">

また単位はpxだけではなくて、em等も利用ができます。

@media screen and (max-width: 30em) {
   /* 1行の文字数が30文字以下の場合に適用する */
   div#sideArea { width: 20%; }
}

1つのCSSソース内で分岐させたい場合には以下のように記述できます。

/* 全てに適用 */
div#sideArea { width: 20%; }

/* 横幅が321px以上で767以下に適用 */
@media screen and (min-width: 321px) and (max-width: 767px){
   div#sideArea { width: 40px; }
}

/* 横幅が768px以上に適用 */
@media screen and (min-width: 758px) {
   div#sideArea { width: 100px; }
}

また適用する範囲の指定には2種類方法があります。
これまでご説明したようにandを使用して条件を絞る方法とカンマ「,」を使用して複数の条件を一括で指定する方法です。

/* 横幅が321px以上で767以下に適用 */
screen and (min-width: 321px) and (min-width: 767px)
 
 /* 横幅が321px以上または767以下に適用 */
screen and (min-width: 321px) , screen and (max-width: 767px)

Media Queriesで条件分岐に利用できる指定方法ですが、以下になります。

  • width
  • height
  • device-width
  • device-height
  • orientation

widthheightに関しては問題ないと思いますし、device関連もPCならディスプレイの幅や高さ、スマホならブラウザの下層的な解像度の幅や高さになります。

ではorientationとは何でしょうか。

こちらは端末の向きを条件にした制御になります。
指定できる値は2種類で、縦置きがportrait、横向きがlandspaceとなります。

例えば以下のような使い方になります。

@media screen and (orientation: portrait) {
   /* 縦置き */
}
@media screen and (orientation: landscape) {
   /* 横置き */
}

PCに関して注意点ですが、IE8以下では、基本的にMedia Queriesを利用することはできません。
しかし、Google Codeで公開されているJavaScriptを利用することで使用できるようになります。

css3-mediaqueries-js

以下のように記述しておけば、IE9未満限定でスクリプトを読み込むことができます。

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

またRetinaディスプレは解像度が2倍になります。なので、もし実装の時にちょうどの大きさの画像を用意してしまうと荒く表示されてしまうのです。

下記はメディアクエリ用の記述になります。

@media screen and (-webkit-min-device-pixel-ratio:2),
                  (min-resolution: 2dppx){
/* Retina ディスプレイ */
}

是非このMedia Queriesを活用してレスポンシブサイトを構築していきましょう。

SNSでもご購読できます。

スポンサーリンク

コメントを残す

*