Robert’s talk

モバイルデバイス、ディスプレーサイズ、解像度、ブラウザの種類など、Webブラウザからの閲覧は多種多様な状況が想定される。こうした多種多様な閲覧状況に対してそれぞれ適切なデザインを提供するための要となる機能が、CSS3とともに導入されるメディアクエリとなる。メディアクエリを使うことでブラウザやデバイスの情報を取得することができ、それぞれに対応したスタイルの適用が可能になる。

CSS3 Media Queries and creating adaptive layouts - Robert's talkにおいて、メディアクエリを使ってデザインを変更する基本的な方法が紹介されている。サンプルつきで紹介されており、どういったコードがどういった出力になるのかがわかりやすく参考になる。次に、CSS3 Media Queries and creating adaptive layoutsで紹介されている処理を、それぞれ単体のHTMLファイルとして試しやすくしたものと、その実行例を掲載する。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>CSS3 media query demo 01</title>
  <style type="text/css">
  .box {
    width: 300px;
    height: 300px;
    background: #f00;
  }
  @media screen and (min-width: 400px) {
    .box {
      background: #00f;
    }
  }
  </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

ブラウザ/デバイスの幅を検出して適用するスタイルシートを変更する方法の基礎

@media screen and (min-width: 400px)の指定でブラウザ/デバイスの横幅を検出。サイズの違いによって適用するスタイルを変更する基本的な記述例。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>CSS3 media query demo 02</title>
  <style type="text/css">
  * {
    padding: 0px;
  }
  .box {
    border: 3px solid #222;
    padding: 5px;
    -webkit-box-sizing: border-box; /* Chrome, Safari */
    -moz-box-sizing: border-box;    /* Firefox */
    box-sizing: border-box;         /* IE8+, Opera */
  }
  .navigation {
    float: left;
    width: 100px;
  }
  .main-content {
    float: right;
    width: 300px;
  }
  @media screen and (min-width: 800px) {
    .navigation {
      width: 200px;
    }
    .main-content {
      float: right;
      width: 600px;
    }
  }
  @media screen and (max-width: 399px) {
    .navigation {
      display: block
      float: none;
      width: 100%;
    }
    .main-content {
      display: block
      float: none;
      width: 100%;
    }
  }
  </style>
</head>
<body>
<div class="navigation box">ナビ</div>
<div class="main-content box">メインコンテンツ</div>
</body>
</html>

幅の検出を広げて、3種類のスタイルを展開。一番小さいケースでは横配置をやめて縦配置へ変更

幅が広い状態ではそれぞれ幅を広げてある

先程の切り分けテクニックを@media screen and (min-width: 800px)と@media screen and (max-width: 399px)の2つに分けて適用した例。iPhoneのようなスマートフォンから大きなディスプレーで利用するブラウザからアクセスする場合の双方に対してデザインを変更して適用する場合の基本的な方法となる。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>CSS3 media query demo 03</title>
  <style type="text/css">
  @media screen and (orientation: portrait) {
    .portrait {
        display: inline;
    }
    .landscape {
        display: none;
    }
  }
  @media screen and (orientation: landscape) {
    .landscape {
        display: inline;
    }
    .portrait {
        display: none;
    }
  }
  </style>
</head>
<body>
デバイス方向は<span class="portrait">縦</span><span class="landscape">横</span>。
</body>
</html>

デバイスの縦置き/縦長を検出

デバイスの横置き/横長を検出

@media screen and (orientation: portrait)および@media screen and (orientation: landscape)の指定でデバイスが縦方向にあるか横方向にあるかを検出する例。PCのブラウザであれば縦長か横長かがこの指定に対応する。

CSS3 Media Queries and creating adaptive layoutsではこれ以外にも、iPhoneではデバイスの横幅をiPhoneの幅に設定するように<meta name="viewport" content="width=device-width, maximum-scale=1.0"\>の指定を追加することや、メディアクエリにおけるand、or、notの指定方法はそれぞれand、カンマ、notになることなどが紹介されている。