レスポンシブデザイン

16章 レスポンシブデザイン

本章ではレスポンシブデザインについて学習していきます。

16.1 レスポンシブデザイン

「レスポンシブデザイン」とは、PCやスマートフォンなどのデバイスに依存しないWebサイトを構築する手法です。たとえばスマートフォンではスマートフォン向けのデザインに置き換わり、PCではPC向けのデザインに置き換わるようなデザインが、レスポンシブデザインです。

レスポンシブデザインに対応せずWebサイトを作成する場合、スマートフォンとPCで最適に表示するには、それぞれWebサイトを作成する必要があります。

しかし、レスポンシブデザインを意識してWebサイトを作成すれば、一つのソースコードで複数のデバイス(スマートフォンなど)に対応できるため、ソースコードや画像などが少なく済みます。

レスポンシブデザインを実装する方法はviewportメディアクエリブレイクポイントなどがあります。

この章でしっかりとレスポンシブデザインを学習していきましょう。

16.2 レスポンシブデザインの実装方法

ブレイクポイント

ブレイクポイントとはCSSなどの設定をスマートフォン・PCで切り分ける際の画面サイズのことです。

例えばスマートフォンの場合ですと、横幅480pxを基準にCSSの設定を切り分けていることがあります。この場合、480pxという数値がブレイクポイントです。

ブレイクポイントはmax-width:480pxmin-width:640pxのように設定します。

max-widthはWebページを表示しているデバイスの最大画面幅を、min-widthは最小画面幅を設定できます。

例えば以下のようなCSSではデバイスの画面幅が480px以内であれば.media-spのスタイルが有効になります。しかし、幅が640px以上であった場合は.media-pcのスタイルが有効になります。

@media screen and (max-width:480px) {
    .media-sp {
        background-color: red;
    }
}

@media screen and (min-width:640px) {
    .media-pc {
        background-color: green;
    }
}

ブレイクポイントを決める際には注意が必要です。よくあるケースとしてはmin-widthmax-widthの効果を逆に覚えていたために、レスポンシブデザインから遠くかけ離れたCSSスタイルが適用されてしまうことがあります。

そのため、ブレイクポイントを設定するときは、どのようなユーザーがアクセスするWebページであるかを意識して、値を決めましょう。

参考として、スマートフォンなどのサイズごとにブレイクポイントを分けると以下のようになります。

ブレイクポイント 対応しているデバイス
480px以下 スマートフォン(縦)
600px以下 スマートフォン(横)
960px以下 タブレット      
1280px以下 パソコン(画面小)
1280pxより大きい パソコン(画面大)

メディアクエリ

メディアクエリとは画面のサイズに合わせてCSSの適用を分岐できる機能です。

先ほどのブレイクポイントでも触れた以下のCSSが、メディアクエリでCSSの適用を分岐させています。

@media screen and (max-width:480px) {
    .media-sp {
        background-color: red;
    }
}

@media screen and (min-width:640px) {
    .media-pc {
        background-color: green;
    }
}

メディアクエリでの画面サイズで分岐させているのは(min-width:640px)などのブレイクポイントです。

メディアクエリを使うことで、以下のようにデバイスの画面幅に合わせてWebページのCSSを切り替えられます。

<html lang="ja">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            @media screen and (max-width:480px) {
                .media {
                    background-color: red;
                }
            }

            @media screen and (min-width:640px) {
                .media {
                    background-color: green;
                }
            }
        </style>
    </head>
    <body>
        <div class="media">
            <h1>メディアクエリ</h1>
        </body>
    </body>
</html>

@media screen and (max-width:640px)では画面サイズ幅が640px以上である場合はbackground-color: green;が有効になっています。

16_1

また@media screen and (max-width:480px)で最大の画面サイズ幅が480px以下の場合はbackground-color: red;が有効になります。

16_2

このように、メディアクエリでは画面サイズによって有効になるCSSを分岐させることができます。

しかしブレイクポイントメディアクエリだけではレスポンシブデザインを実装できません。viewportも必要です。

viewport

viewportとは、そのWebページを表示するデバイス(PCやスマートフォンなど)を検知し、そのデバイスの画面サイズなどを取得できるものです。アクセスしたデバイスのサイズに合わせてWebページを表示するという機能もあります。

例えば、PC向けに作成されたWebサイトをスマートフォンで見たとき、画像などがかなり小さく表示されることはありませんか? これはviewportなどが設定されてなく、PC向けの表示をそのままスマートフォンで表示しているからです。

こういった問題は、viewportを使うことで解決できます。

viewportは、metaタグを使い以下のように記述します。

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

name="viewport"のところでviewportを使用するとブラウザ側が判るようにしています。

そのあとのwidth=device-widthは、画面の表示幅をdevice-width、つまり使用しているデバイスのサイズに合わせるという記述です。これによりスマートフォンではスマートフォンのサイズに合わせた表示サイズを自動的に調整できます。

またinitial-scale=1で、そのデバイスの初期表示のサイズを指定できます。1を指定した場合はそのデバイスに合ったサイズで表示されます。

レスポンシブデザインに対応するためにはブレイクポイントを決め、その値に合わせたメディアクエリでCSSを分岐させ、viewportでデバイスに合わせたサイズで表示する必要があります。

ちなみに、BootstrapなどのCSSライブラリでは、このviewportやメディアクエリをうまく使い、簡単にレスポンシブデザインが実現できるようにしています。

もし学習に行き詰まってしまったら...無料体験レッスンに
参加してみませんか?

SAMURAI ENGINEERは、
月額7000円からマンツーマン
レッスンができます。

現役エンジニアがあなたのプログラミング学習を徹底サポート。
未経験でも挫折せず、最短で目標達成するために必要な
手厚いサポート体制が揃っています。
少しでも興味をお持ちでしたら、
無料体験レッスンへお越しください。