CSS3のMedia Queriesを使ったレスポンシブレイアウト

Media Queriesを使ったレスポンシブレイアウトの例

少し時間が空いてしまいましたが、今年に入ってkudox.jpのWordpressテーマをCSS3のMedia Queriesを使ったレスポンシブレイアウトでリニューアルしました。私自身、Media Queriesを使うのは初めてだったこともあり、いろいろと勉強しながら作業を進めました。そこで学んだことや私なりに考えたことをレポートしていきたいと思います。

metaタグ viewportの指定

まず、Media Queriesを使用する事前準備として、HTMLのmetaタグでviewportの指定をしておきましょう。viewportとは、スマートフォンやタブレットのWebブラウザにおける仮想的なスクリーンのようなもので、スクリーンの幅や拡大/縮小率などを指定することができます。下記の例では、widthにデバイスの横幅、拡大/縮小率の初期値に1.0を指定しています。

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queriesの記述方法

それでは、Media Queriesの記述方法を見ていきましょう。Media Queriesは、CSS2のMedia Typeを拡張したもので、スタイルシートを適用する範囲をより限定することができます。下記の例では、Mediaタイプがscreenで且つ横幅が820px以下の場合にのみ、スタイルシートを適用させています。andで連結することにより、複数の条件を指定して対象を絞り込むことができます。

冒頭のonlyは省略可能ですが、IE8以下のようにMedia Queriesに対応していない古いブラウザを除外するために記述しています。また、onlyの位置にはnotを指定することもできます。冒頭にnotを指定した場合は、後ろで指定した条件でない場合にスタイルシートが適用されるようになります。

CSS

@media only screen and (max-width:820px) {
  #container {
    max-width:85%;
  }
}

ネガティブマージンを使ったカラム構成

Media Queriesを使ったレスポンシブレイアウトでは、デバイスの幅に応じてウィンドウの幅が変化することを考慮してカラムを構成する必要があります。カラムの幅をパーセントで指定すると簡単ですが、私の場合は右側のカラムを250pxで固定したかったので、ネガティブマージンを使ったカラム構成にしました。

まず、HTMLの構成を見てみましょう。left-columnが左側のカラム、right-columnが右側のカラムになります。left-columnの中に本文を内包するmain-contentsを配置しています。

HTML

<div id="container" class="clearfix">
  <div id="left-column">
    <div id="main-contents">
      本文
    </div><!-- /#main-contents -->
  </div><!-- /#left-column -->
  <div id="right-column">
    サイドバー
  </div><!-- /#right-column -->
</div><!-- /#container /.clearfix -->

続いて、CSSを見てみましょう。ポイントは、left-columnでwidth:100%; margin-right:-290px;を指定し、内包するmain-contentsでmargin-right:290px;を指定している点です。このようにネガティブマージンを使用することにより、本文を内包するmain-contentsの幅を100% – 290pxとすることができ、且つサイドバーを内包するright-columnの幅を250pxで固定することができます。

CSS

#container {
  width:960px;
  margin:32px auto 0;
  padding-bottom:30px;
  text-align:left;
}

#left-column {
  float:left;
  width:100%;
  margin-right:-290px;
  padding-top:16px;
}

#main-contents {
  margin-right:290px;
}

#right-column {
  float:right;
  width:250px;
  padding:16px 0 0;
  position:static;
}

max-widthの有効活用

Media Queriesを使ったレスポンシブレイアウトでは、max-widthを有効に活用したいところです。ボックスや画像にmax-widthをパーセント値で指定しておくことにより、ウィンドウの幅に追随してwidthを変化させることができます。

CSS

.entry-content .img-box img {
  max-width:100%;
  height:auto;
}

@media only screen {
  #header-inner,
  #header-nav,
  #container,
  #footer-scroll-top,
  #footer-inner {
    max-width:96%;
  }
}

@media only screen and (max-width:555px) {
  .entry-content .side-img-box {
    width:48.25%;
  }
  
  .entry-content .side-img-box img {
    max-width:100%;
    height:auto;
  }
}

Retinaディスプレイ対応

Media Queriesを使うことにより、画像をRetinaディスプレイに対応させることもできます。device-pixel-ratioの値は端末により異なるため、今回はdevice-pixel-ratioが1.25以上であれば縦横2倍のサイズの画像に差し替えるようにしました。

また、Media Queriesは、CSSのセレクターと同様にカンマで区切ることにより、複数の条件を並列に指定して、いずれかの条件を満たす場合にスタイルシートを適用することができます。

CSS

@media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-device-pixel-ratio:1.25) {
  #search-text {
    background-image:url(../images/header/search_bg_retina.png);
    -webkit-background-size:28px 21px;
    -moz-background-size:28px 21px;
    -ms-background-size:28px 21px;
    -o-background-size:28px 21px;
    background-size:28px 21px;
  }
}