レスポンシブデザインの仕組みと作り方、メディアクエリの書き方

更新：2018-03-23

ウェブサイトのレスポンシブデザインの仕組みと作り方。

レスポンシブデザイン

スマホが普及し、多くの人がスマホでホームページ（ウェブサイト）を見ている。サイトによっては半数以上がスマホからのアクセスというのも珍しくない。サイトがスマホに対応していないと半数の顧客を逃してしまっているというのは言い過ぎかもしれないが、スマホへの対応は必須の状況となっている。

ここではパソコンとスマホ両方対応可能なレスポンシブデザインの仕組みについて書く。

スマホへの対応の仕方

スマホへの対応方法は、大きく以下の3つのパターンに分かれる。

パソコン用のページとは別にスマホ用のページを用意する。パソコン用は http://example.com/ 、スマホ用は http://example.com/sp/ など。
パソコン用とスマホ用のページ（URL）は同じで、JavaScriptやPHPなどでデバイスを判別して表示する内容を変える。
パソコン用とスマホ用のページ（URL）は同じで、ブラウザのウィンドウ幅（サイズ）を基準に適用するCSSを変える。スマホの場合は基本的に全画面で表示されるので、横幅は画面サイズと同じ。

古いブラウザを考慮してか、上記1や2のパターンは今も見かけるが、年々上記3のパターンが増えている。レスポンシブデザインというと基本的に上記3を指す。

パソコンでレスポンシブデザインかどうかを見分けるのは簡単で、ブラウザのウィンドウ幅を小さくすると分かる。例えば、東京都公式ホームページや郵便局（日本郵便）をブラウザで開き、ブラウザのウィンドウ幅を縮小していくと途中でデザインが変わるのが分かる。

こういうレスポンシブデザインのサイトは表示幅によって適用する CSS を変えている。企業や自治体のサイトなどでレスポンシブデザインは増えているが、古くからインターネットサービスを提供しているサイトやメディアなどが意外にもレスポンシブデザインではなく、上記1や2のパターンでスマホに対応していたりする。古い閲覧環境にも配慮したり、デザインの変更に手間やコストがかかるなどの理由があるのかもしれない。

レスポンシブデザインの仕組み

レスポンシブデザインの仕組みは単純で、@media（メディアクエリ）を使って CSS を記述するだけである。動的なように見えるが JavaScript は必要なく、CSS だけでできる。

以下の例は、通常は body 要素の背景色が白色（#fff）で、ウィンドウ幅が 800px 以下になると青色（#00f）に変化する。

<style>
body {
   background: #fff;
}

@media all and (max-width: 800px){
   body {
      background: #00f;
   }
}
</style>

主にパソコン向けの CSS をまず書き、@media{ ～ } で囲んだ部分にスマホ用などの CSS を書く。 Bootstrap など便利なフレームワークがあるが、レスポンシブデザインの仕組みを簡単にするとこういうことをやっている。あとは CSS をたくさん書くだけ。

また、この手法はサイトを作る人にとって利点がある。それはいちいちスマホを使ってサイトのデザインを確認する必要がない点。パソコンでサイトを作り、ブラウザのウィンドウ幅を縮めればスマホでどのように表示されるか概ね分かる。最終的にはスマホで動作確認するが、サイト制作がかなり楽になる。

メディアクエリ

上述の @media all and (max-width: 800px) の部分はメディアクエリと呼ばれる。上例の場合、すべてのメディア（デバイス）が対象で、且つ横幅の最大値が 800px のとき、ここに書いた CSS が適用される。

all の他に print、screen、speech、handheld などがあり、メディアタイプと呼ばれる。よく使われているのは screen で、パソコンやスマホなどのコンピュータ画面を指し、通常のサイトであれば screen で問題ない。 all はすべてのデバイスが対象になる。詳しくは Mozilla のサイト @media (mozilla.org) に書かれている。

(max-width: 800px) は横幅の最大値が 800px で、800px 以下はすべて適用される。 2017年現在スマホの画面解像度は横 720px や 1080px などが多いが、 viewport で width=device-width を指定してサイトを表示した場合、横（短辺）の画面サイズは 320px くらいが最小で、400px 前後のサイズが多い。 viewport の設定によるが、max-width の値はサイトに合わせて決めると良い。 max-width の他に min-width など条件はいろいろ記述でき、Mozilla のサイトのメディアクエリ (mozilla.org) に詳しく書かれている。

モバイルファースト

モバイルファーストの場合、まずスマホ用の CSS を記述し、後で min-width でパソコンなど大きい画面用の CSS を記述する。という話を巷で聞くことがある。例えば前述のサンプルを書き換えると以下のようになる。

<style>
body {
   background: #00f;
}

@media all and (min-width: 801px){
   body {
      background: #fff;
   }
}
</style>

動作結果は同じ。個人的にはモバイルファースト・PCファーストどちらでも良いが、Google がモバイルファーストを掲げているので、これが検索結果（掲載順位）に影響するのかどうかが気になるところ。私が運営しているいくつかのサイトで両方のパターンを試したところ、アクセス数に特に変化はなかった。今後何が起きるか分からないので、気になる人はモバイルファーストで書いた方が良いかもしれない。

メディアクエリ記述例

基本

以下の例は、div 要素の文字の色が通常赤色（red）で、ウィンドウ幅が 800px 以下になると文字の色は赤色のまま変わらず、div 要素内の文字がセンタリングする。

<style>
div {
   color: red;
}

@media all and (max-width: 800px){
   div {
      text-align: center;
   }
}
</style>

<div>テスト</div>

ウィンドウを縮めた後、再び広げると文字は左に戻る。 text-align:left など指定しなくても初期値に戻る。 CSS は分かりやすいように style 要素に記述しているが、当然外部の CSS ファイルに記述しても良い。

複数指定

@media は複数指定でき、パソコン、タブレット、スマホなどデバイスに合わせて段階的にデザインを変えることもできる。以下の例では通常文字が左寄せで赤色、800px 以下になるとセンタリング、400px 以下になると文字がボールドになる。

<style>
div {
   color: red;
}

@media all and (max-width: 800px){
   div {
      text-align: center;
   }
}

@media all and (max-width: 400px){
   div {
      font-weight: bold;
   }
}
</style>

<div>テスト</div>

ナビゲーションメニューの変形

通常横に並んでいるナビゲーションメニューを変形させ、スマホでは縦に並ぶレスポンシブデザインを見かける。以下の例は、パソコンでは li 要素が inline-block により横に並び、ウィンドウ幅が 800px 以下になると block により縦に並ぶ。

<style>
ul.ex_navi {
   margin: 0;
   padding: 0;
}

ul.ex_navi li {
   background: #ddd;
   font-size: 1.1em;
   display: inline-block;
   margin: 2px;
   padding: 10px;
   text-align: center;
}

@media all and (max-width: 800px){
   ul.ex_navi li {
      display: block;
   }
}
</style>

<ul class="ex_navi">
<li>サービス</li><li>会社概要</li><li>お問い合わせ</li>
</ul>

ナビゲーションメニューの収納

レスポンシブデザインで最もよく見かけるのは、ブラウザのウィンドウ幅が小さくなるとメニューが消えて三本線［☰］になるタイプ。［☰］をクリック（タップ）するとメニューが表示される。以下の例は、パソコンでは li 要素のメニューが表示され、ウィンドウ幅が 800px 以下になるとそれが消えて三本線［☰］が現れる。

<style>
#ex_navi_pc ul {
   margin: 0;
   padding: 0;
}

#ex_navi_pc ul li {
   background: #ddd;
   font-size: 1.1em;
   display: inline-block;
   margin: 2px;
   padding: 10px;
   text-align: center;
}

#ex_navi_sp {
   display: none;
}

#ex_navi_sp span {
   display: none;
   font-size: 2em;
   background: #ddd;
   margin: 2px;
   padding: 0 10px 0 10px;
}

#ex_navi_sp ul {
   margin: 0;
   padding: 0;
   display: none;
}

#ex_navi_sp ul li {
   background: #ddd;
   font-size: 1.1em;
   margin: 2px;
   padding: 10px;
   display: block;
}

@media all and (max-width: 800px){
   #ex_navi_pc {
      display: none;
   }

   #ex_navi_sp {
      display: block;
   }

   #ex_navi_sp span {
      display: inline-block;
   }
}
</style>

<div id="ex_navi_pc">
<ul>
<li>サービス</li><li>会社概要</li><li>お問い合わせ</li>
</ul>
</div>

<div id="ex_navi_sp">
<span>☰</span>
<ul>
<li>サービス</li><li>会社概要</li><li>お問い合わせ</li>
</ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('#ex_navi_sp').click(function(){
      $('#ex_navi_sp ul').slideToggle('normal');
   });
});
</script>

予め［☰］を display:none で非表示にしておき、ウィンドウ幅が 800px 以下になると display: block で［☰］が現れるようになっている。やり方はいろいろあるが、要するに display による表示、非表示を活用すると、こういうナビゲーションメニューが作れる。三本線［☰］はここではテキストで書いたが、人によっては CSS で作ったり、画像を用意したり様々。