【初学者向け】最も簡単なレスポンシブデザインの実装

こんにちは、新入社員の飯野です。
先日、HTML5プロフェッショナルレベル1資格試験を受け、かろうじて合格することができました。
しかし、レスポンシブデザインの単元ではあまり良い結果を出せませんでした。
そこで、今回はレスポンシブデザインに関する知識を深めるために、レスポンシブデザインに関して学びなおし、1から実装を行ってみたいと思います。

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

まず最初に、レスポンシブデザインについてです。

ユーザビリティを確保しながら、すべての画面サイズと解像度でウェブページをうまく描画するためのウェブデザインの手法です。複数の端末に対応したウェブをデザインする方法です。

引用：レスポンシブデザイン - ウェブ開発の学習 | MDN

つまり、「1つのHTMLファイルで端末、画面の幅に合わせた画面表示を行う」、というものです。

参考に、NRIネットコムのHPです(下記画像)。左側がPC(幅1280pxで表示したもの)画面、右側がスマートフォン(幅375pxで表示したもの)画面です。
異なったデザインになっていますね。具体的には、「Webクリエイティブ事業 Web Creativeの背景が変わった」「UX/UIデザイン」がスマートフォン画面では縦並びになったなどがあります。

これがレスポンシブデザインを実装した画面です。

レスポンシブデザインにするメリットとデメリット

では、昨今のフロントエンド開発で主流となっているレスポンシブデザインにはどんなメリット/デメリットがあるのでしょうか？

メリット

Webサイトの管理が楽になる
コストを削減できる
SEOに有利
URLが1つなのでSNSなどで共有しやすい

管理するHTMLが1ファイルで済むため、Webサイト管理の観点からのメリットが大きいですね。また、SEOに有利であったり、昨今のSNSに必須のWebサイトのシェアを考慮する必要がなくなります。
これらのメリットを見ると、レスポンシブデザインが主流になっているのもうなずけます。

デメリット

デザインに制限がある
実装に知識が必要
スマートフォンでの表示に時間がかかる可能性がある

デメリットももちろんありました。
1つのHTMLでスマホ版、PC版を実装するわけですからデザインに制限があります。また、スマートフォンで表示する際に、不要なPC版のスタイルを読み込む必要があるため動作が重くなりやすいといったデメリットも挙げられていました。(とはいえ、スマートフォンで表示が遅くなる事象は今まで見たことないです)。

レスポンシブデザイン実装に必要な知識

先述のレスポンシブデザインのデメリットにも記載しましたが、レスポンシブデザインの実装には知識が必要です。
レスポンシブデザインを実装するのに重要な内容をまとめてみました。

ビューポート (viewport)

一言でいうと、「ブラウザの表示領域」のことです。
HTMLファイルのmeta要素のviewportで指定することで、PC・スマートフォンなどの表示領域を決定します。この指定がないとレスポンシブデザインは実装できません。

実際には以下のようにしています。

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

width=device-widthでビューポートの幅をデバイスの幅に合わせるよう指定します。
initial-scaleで初期スケール(ズーム)を1.0倍に設定します。

ブレイクポイント

各デバイスの画面サイズに応じてレスポンシブデザインの表示を切り替えるポイント(閾値)のことです。
主に3種類 (PC・タブレット・スマートフォン)の画面幅に合わせてブレイクポイントを設定します。例えば以下のように設定します。

PC → 1280px以上
タブレット → 768px ~ 1279px
スマートフォン → 767px以下

※ 時代とともに主流となる端末の大きさは異なるため、シェア率の高い端末に合わせてブレイクポイントを設定することが推奨されています。

ちなみにNRIネットコムのHPのブレイクポイントは1181pxです。
1180px以下でスマートフォン/タブレット表示、1181px以上でPC用表示になっています(下記画像)。
スマートフォン/タブレット表示では画面上部のナビゲーションリンクが消えています。

メディアクエリ

メディアクエリは、ウェブページのスタイルをデバイスの特性に合わせて変更するための記述です。HTMLタグの中に直接記述する方法と、CSSファイルに記述する方法があります。

・HTMLタグ内に直接記述する場合は「media=”条件”」と記述
・CSSファイルに記述する場合は「@media ”条件” { 処理 }」と記述

”条件”の箇所には、主にメディアタイプの指定とブレイクポイントの指定をします。

メディアタイプにはいくつか種類があります。
all → すべてのデバイス
screen → PC、スマホ、タブレットの画面
print → 印刷用

以下のように記述します。
▼1280px以上の画面で処理を実装する例

@media screen and (min-width: 1280px)｛　処理　｝

リキッドレイアウト

どのデバイスでも、画面の幅に合わせてコンテンツの表示をぴったりになる可変のレイアウトのことです。
画像やボックスコンテンツなど一定の大きさを持つコンテンツをレスポンシブデザイン化させる際に使用します。
指定は簡単です。それらのコンテンツにCSSで以下のスタイルを付けるだけで、画面幅に合わせて画像が伸び縮みします。（詳しくは実装で。）

img{
    width: 100%;
    height: auto;
}

レスポンシブデザイン実装に重要な知識をざっくりまとめました。
これらの知識を応用してレスポンシブデザインの実装をしていきます。実際の開発では要素が増えれば増えるほど、これらの記述を忘れがちなので意識することが重要です。 (僕も画像をリキッドレイアウトにするのを忘れて、レイアウトがごちゃごちゃになったことがあります)。

レスポンシブデザインを実装

メディアクエリでの実装

いよいよ実装です。今回の実装では、CSSファイルにメディアクエリを記述してレスポンシブデザインを実装していきます（現時点で推奨されているため）。

▼ファイル構成は以下のようにしました。

root
 ├── index.html
 ├── style.css
 └── img
      └── netcomlogo.jpg

▼index.htmlには、

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>レスポンシブデザイン</title>
</head>

<body>

  <p class="responsive-pc">こんにちは。</p>
  <p class="responsive-tab">こんにちは。</p>
  <p class="responsive-sp">こんにちは。</p>

</body>

</html>

▼style.cssには、

@media screen and (min-width: 1280px) {
    .responsive-pc{
        text-align: center;
        background-color: azure;
    }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
    .responsive-tab{
        color: red;
    }
}


@media screen and (max-width: 767px) {
    .responsive-sp{
        font-size: 2em;
        font-weight: bold;
    }
}

を記述します。すると、

@media screen and (min-width: 1280px)
@media screen and (min-width: 768px) and (max-width: 1279px)
@media screen and (max-width: 767px)

▲これらのメディアクエリに応じて｛｝内記述した処理が画面に適用されます。

▼ブラウザウィンドウの幅を1280px以上にすると、responsive-pcクラスがついた文言だけが以下のように背景色 : azure、文字 : 中央寄せ　になりました。

▼同様に、ブラウザウィンドウの幅を768px以上～1279px以下にすると、responsive-tabクラスがついた文言だけ文字色 : red　になります。

▼同様に、ブラウザウィンドウの幅を768px以下にすると、responsive-spクラスがついた文言だけ文字の大きさ : 2em(2倍)、文字の太さ : 太く　になります。

これを応用して、ユーザーにブラウザウィンドウサイズを教えてあげる画面を作成してみます。
▼HTMLファイルのbody要素内部を以下に書き換え、

<body>

  <p class="display-pc">あなたが見ている画面幅は1280px以上です。</p>
  <p class="display-tab">あなたが見ている画面幅は768px～1279pxです。</p>
  <p class="display-sp">あなたが見ている画面幅は767px以下です。</p>

</body>

▼CSSファイルも以下に書き換えます。

@media screen and (min-width: 1280px) {

    .display-tab{
        display: none;
    }
    .display-sp{
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {

    .display-pc{
        display: none;
    }
    .display-sp{
        display: none;
    }
}

@media screen and (max-width: 767px) {

    .display-pc{
        display: none;
    }
    .display-tab{
        display: none;
    }
}

▼すると、幅1280pxではCSSファイルの一番上に記述したメディアクエリ内のdisplay: noneが行われ、HTMLファイルでdisplay-tabクラスとdisplay-spクラスのついた要素が画面から消えます。

▼同様に、幅1000pxではdisplay-pcクラスとdisplay-spクラスのついた要素が消えます。

▼同様に、幅375pxではdisplay-pcクラスとdisplay-tabクラスのついた要素が消えます。

こんな感じで応用し、ユーザーの環境に合わせて文言の表示を消すことで、ユーザーに合わせて画面幅を教えてあげることもできます。

リキッドレイアウトの実装

ここでは、とあるNRIネットコムのロゴ画像（img/netcomlogo.jpg）を使って実装します。この画像ですが、サイズがとても大きく、通常だと幅1867px × 高さ1065pxです(何に使うんだろう)。

▼index.htmlに以下を記述します。

<body>

  <img src="img/netcomlogo.jpg" alt="NRIネットコムのロゴです">

</body>

▼すると、サイズが大きく普通のPC画面(幅1440px)でもはみ出てしまいます。

そこでこの画像をリキッドレイアウトにしてみましょう。
▼やり方は簡単です。CSSに、

img{
    width: 100%;
    height: auto;
}

と指定するだけです。
すると、width : 100％の指定でimgタグのコンテンツの横幅が親要素の横幅(今回はbodyタグ)と同じになるため、
▼さっきまで画面からはみ出ていた画像が画面ぴったりに収まりました。

このように画像などの幅の大きいコンテンツはリキッドレイアウトを利用してレスポンシブデザインを実装します。

▼リキッドレイアウトではスマホ画面サイズにしても、

画像がブラウザのウィンドウ幅に合うため、はみ出なくなります。
これがリキッドレイアウトです。

※ ただ、画像内の文言などの大きさはスマホ版では縮小されて表示されるため、読めなくなる可能性があります。その場合は、前述のdisplay : noneで表示領域によって不要な要素を消す、または<picture><source>要素を応用して画像を使い分ける必要があります。

これらの技術を応用してNRIネットコムのHPなどのようにレスポンシブデザインに対応したサイトをつくりあげていきます。
NRIネットコムのHPは背景に動画を読み込んでいたり、CSSでアニメーションをつけていたりと複雑なつくりになっていますね。。。知れば知るほど奥が深いです。

おわりに

学んだ知識を基に、簡単にではありますが異なるデバイスに対応したウェブページを作成することができました。今後も引き続き、レスポンシブデザインの知識を深め、実践を重ねていきたいと思います。
普段利用しているWebページでもレスポンシブデザインを意識してみると、さまざまな工夫を凝らしていて楽しかったりします。（理解を深めるために、普段見るページでCtrl＋Uでソースコードを見てみたり、Ctrl＋Shift＋Cで要素を開発者ツールで見てみたりもいいと思います。）
読んでくださった方の知識を少しでも広げることができていたら幸いです。