HTMLコーディングをはじめよう〜副業にも!|第4章 レスポンシブデザイン

レスポンシブデザイン

前回は、主なコーディング規則について書いたので、これからより実践的なコーディングについて書いていこう。

今回は、レスポンシブデザインについて。

HTMLコーディングは、SEOにおいて、大事なことがたくさんある。

中でも、モバイルインデックスファーストに欠かせないレスポンシブデザインは、SEOの要となるものだ。

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

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

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

をいう。

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

ペライチのウェブサイトなら、同じ内容でHTML文書を2つ作ればいい。だが、通常ウェブサイトといえば、何ページもあるのが通常だ。

一方、レスポンシブデザインなら、パソコン・スマートフォン・タブレットいずれのデバイスでも、同じ文書で最適に表示することができる。先日制作したデモサイトは計5ページあるのだが、レスポンシブデザインなら、5つのファイルを用意すれば良い。

現在ではスマートフォンユーザーが圧倒的に多いため、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.css)に、以下を追加していく。

/* スマートフォン用(省略可) */
@media screen and (max-width: 599px) {
  .honbun {
    font-size: .5em;
  }
}

/* タブレット用 */
@media screen and (min-width: 600px) {
  .honbun {
    font-size: 1em;
  }
}

/* PC用 */
@media screen and (min-width: 1025px) {
  .honbun {
    font-size: 2em;
  }
}

各デバイスごとの設定は、「@media screen and (max-width: 599px) { }」の「{}」内に書いていく。上記例は、デバイスごとにフォントサイズが変わるよう設定してある。

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

レスポンシブのブレークポイント

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

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

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

サイトによっては、ブレークポイントはもう少し細かく刻んでも良い。例えば、スマートフォンは縦向き・横向きを分けるなど。このブログのWordPressテーマ「cocoon」のブレークポイントを調べたら、4箇所設定されていた。

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

上記の通り、メディアクエリを追加したデモサイトのトップページを、ブラウザで表示してみる。例えば、FireFoxでは設定から「レスポンシブデザインモード」が選べるようになっている。

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

スマートフォンで表示

【スマートフォンモードで表示】

タブレットで表示

【タブレットモードで表示】

PCで表示

【標準ブラウザで表示】

特に、ページ中央のイメージの下に挿入した文章(スタイルシートのクラス名:honbun)の、フォントサイズに注目してほしい。スタイルシートでは、

  • スマートフォン:0.5em(1emが標準フォントサイズとした場合)
  • タブレット:1em(等倍)
  • パソコン:2em(2倍)

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

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

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

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

など、ウェブデザインの腕の見せどころだ。

この章のまとめ

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

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

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

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

コメント