一から始めるWeb制作 #10〜レスポンシブデザインの基本をおさえておこう

2018年、Googleが「モバイルファーストインデックス」を開始した。

このことは、パソコンよりもスマートフォンやタブレットでのブラウジングが、一般的になったということを表している。

ウェブサイトは、常にSEOを意識しながら制作しなければならない。

今回は、SEOの要となるレスポンシブデザインについて。

レスポンシブデザインとは
レスポンシブデザインのコーディング基本
メディアクエリのブラウザ表示結果
この記事のまとめ

レスポンシブデザインとは

レスポンシブデザインは、

「ひとつのHTMLで、どのデバイスサイズでも閲覧できるようにするウェブデザインの方法」

をいう。

以前は、パソコンサイト、スマートフォンサイトというように、同じ内容の文書を、デバイスに合わせて複数作らなければならなかった。

ペライチのウェブサイトなら、同じ内容でHTML文書を2つ作ればいい。だが、通常ウェブサイトといえば、何ページもあるため、同じものを違うデザインで制作するには、かなりの労力を必要とする。

しかし、レスポンシブデザインなら、パソコン・スマートフォン・タブレットいずれのデバイスでも、同じ文書で最適に表示することができる。

現在ではスマートフォンユーザーが圧倒的に多いため、2018年3月、Googleは「モバイルファーストインデックス」を発表した。早い話、

「これからは、パソコンサイトではなくスマートフォンサイトが、検索の上位にインデックスされますよ〜」

ということ。
（参照：「モバイルファーストインデックスを開始します」〜Googleウェブマスター向け公式ブログより）

それならば、ウェブサイトはスマートフォン中心にしなければならない。

そこで大事なのが、「レスポンシブデザイン」なのだ。

レスポンシブデザインのコーディング基本

レスポンシブデザインのウェブデザインは、ほとんどがCSSによるもの。HTMLには、head内に以下一文を入れておく。

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

上記を簡単に説明すると、「viewport」はmeta要素のname属性値で、ページのサイズと拡大縮小を制御するもの。

contentの「width=device-width, initial-scale=1.0」は、デバイスに依存しないピクセルで、かつ画面の幅に一致するよう指示している。

ウェブサイトでは、スクロールができるので、縦幅を指定することはほぼない。サイズの基本となるのは、全てデバイス画面の横幅だ。

そして、スタイルシートでスマートフォン、タブレット、パソコン用の3通りで各種設定していく。

これが、「メディアクエリ」だ。

メディアクエリは、画面の解像度によってコンテンツ表示を変えていくためのもの。「@media〜」で書き始める。

次に続くメディアタイプは色々あるが、ほとんどはレスポンシブデザインのための「screen」しか使うことはない。

そして、その後ろに続く属性で、各デバイスに対応するための横幅を設定していく。

わかりやすく、図解とスタイルシートで説明していこう。例として、デモサイトのロゴサイズをデバイスごとに設定してみる。

基本となるスタイルシート（デモサイトではstyle-demo-1.css）に、以下を追加していく。

@charset "utf-8";

#logo {
  height: 50px;
  margin: 10px auto 0 auto;
}

〜その他共通のCSSは省略〜

/* スマートフォン用（省略可） */
@media screen and (max-width: 599px) {
  #logo {
    height: 30px;
    margin: 20px auto;
  }
}

/* タブレット用 */
@media screen and (min-width: 600px) {
  #logo {
    height: 40px;
    margin: 15px auto;
  }
}

/* PC用 */
@media screen and (min-width: 1025px) {
  #logo {
    height: 50px;
  }
}

各デバイスごとの設定は、「@media screen and (min-widthまたはmax-width: ◯◯px) { }」の「{}」内に書いていく。

「@media screen and」の後は、デバイスサイズによりmin-widthまたはmax-widthで設定する。min-widthは、設定した横幅以下で表示され、max-widthは設定した横幅以上で表示される。

(min-width: 600px) and (max-width: 1024px)と書いておけば、横幅が600〜1024ピクセルのデバイスで表示されるということ。

また、必ずmin-width、max-width両方を書く必要はなく、上記のように片方だけ書くこともできる。

メディアクエリ前に書かれたCSSは、すべてのデバイスで読み込まれるため、メディアクエリ内では同じCSSは省略する。上記の場合、共通CSSでロゴの高さを50ピクセルに設定しているので、メディアクエリのPC用では、わざわざ高さの設定をする必要はない（書き方の例として、重複して書いておいた）。

そして、上記スタイルシートの設定を図解化したものが、以下画像だ。各デバイスの横幅の境目を「ブレークポイント」という。

ブレークポイントは、自由に設定することができる。しかしながら、現在流通している各デバイスの一般的なサイズを考慮すると、上記画像に記載されたように、

スマートフォン（タテ）は600px未満（通常は480pxだが、余裕を持った数値）
タブレット及びスマートフォン（ヨコ）は600〜1024px
パソコンは1025px以上

が、スマートフォン基準のブレークポイントだろう。

サイトによっては、ブレークポイントはもう少し細かく刻んでも良い。

例えば、スマートフォンは縦向き・横向きを分けるなど。このブログのWordPressテーマ「Cocoon」のブレークポイントを調べたら、4箇所設定されていた。

メディアクエリのブラウザ表示結果

上記の通り、メディアクエリを追加したデモサイトのトップページを、ブラウザで表示してみよう。

デモサイト

例えば、

Google Chrome：右上メニュー→その他のツール→デベロッパーツール
FireFox：右上メニュー→設定→レスポンシブデザインモード

で選べるようになっている。

選択したのち、画面上部にデバイスを選択できるようになっているので、そこでスマートフォンかタブレットを選ぶ。

さまざまなデバイスサイズで、ロゴサイズに注目して見てみよう。スタイルシートでは、ロゴ画像の高さ（height）を

スマートフォン：30px
タブレット：40px
パソコン：50px（メディアクエリより上で設定しているため省略可）

としてあり、その通りにブラウザ上で表示されている。

また、ロゴサイズを変更することにより、ブラウザ上部からの位置をマージンで調整している。

これが「レスポンシブデザイン」だ。

メディアクエリでは、様々なことが設定できる。例えば、

スマートフォンで見るとき、ナビゲーションを「ハンバーガーメニュー」で表示（このサイトをスマホで見た時に表示される左下メニュー）
特定の部分をパソコンでは表示し、スマートフォンでは非表示にする
パンクズリストの表示場所を、デバイスごとに変える

など。

現時点では、まだデモサイトにモバイル用のメニュー：ハンバーガーメニューを設定していないので、メニューが横並びのままになっており、全てが表示されていない。

この記事のまとめ

今回は、レスポンシブデザインについて、まとめてみた。

現在は、スマートフォンサイトが検索の上位となる「モバイルファーストインデックス」でコーディングする
スタイルシートにメディアクエリを書き、デバイスごとの設定を行う
メディアクエリのブレークポイントを設定する

HTMLコーディングは、実はほとんどがCSSの書き方によるものだ。

HTMLをできるだけシンプルにして、外部ファイルのスタイルシートで、どれだけウェブサイトを読みやすく、すっきりとさせるかが重要になる。

世界一わかりやすいHTML5＆CSS3コーディングとサイト制作の教科書 [ 赤間公太郎 ]