パソコンでしかWebサイトを見ることができなかった昔と異なり、今ではスマートフォンやタブレットなど様々な端末から見ることができます。

そのため、パソコンのような大きい画面だけではなく、スマートフォンのような比較的小さい画面でもWebサイトがキレイに見えるようにデザインする必要がでてきました。

今回学習する レスポンシブデザイン は、それぞれの端末の画面サイズに合うデザインを CSS で対応する方法となります。

Responsive Design(レスポンシブデザイン)

簡単に言うと、画面のサイズや端末によって適用させたい CSS を設定するための手法です。

「インターネットはパソコンでするもの」といった時代が過去にはありました。しかし、現在のインターネットのトラフィックのほとんどはスマートフォンによるアクセスです。

「Webページを HTML と CSS で作ったけど、スマートフォンで見るとデザインが崩れてしまう。。」

そのために、パソコン用とスマートフォン用で返却する HTML や CSSファイルをそれぞれ作成する といった対策をとることがあります

しかし、これだと 開発コストメンテナンスの煩雑さが増すため、一つのファイルで 対応できないか と考えられたのがこのレスポンシブデザインです

聖杯レイアウトで学ぶレスポンシブデザイン

Holy Grail Layout(聖杯レイアウト)

聖杯レイアウト というのは、下記のようなデザインのことをいいます。

ヘッダー
メインコンテンツエリア
フッター

ヘッダーとフッターがあり、間に3つのカラムが存在します。

このレイアウトをモバイルなどの小さい画面で見た場合は次のように表示されます。(もともと小さい画面で見ている場合は変化はありません)

ヘッダー
メインコンテンツエリア
フッター

モバイルで表示する場合は、ナビゲーション と 広告エリア は メインコンテンツエリア の ではなく に表示させたくなるかもしれません。

ヘッダー
メインコンテンツエリア
フッター

レスポンシブデザイン では、単一のファイルに追加でCSSを記述 し、画面サイズ によってデザインを変えることで、利用者にとって使いやすいデザインを実現します

メディアクエリを使用

Media Query(メディアクエリ)

メディアクエリを使用すれば、端末の画面サイズメディアの種類(プリンタや画面)などに応じて CSS を指定することが可能になります。

ここでは メディアクエリでも特に使う 画面サイズ ごとにCSSを指定する方法を学習します。

メディアクエリの書き方

メディアクエリは CSSと同様で 内部または外部のスタイルシート に記述することができます。

メディアクエリの構文

@media 条件 {
    CSSを記述
}
                

メディアクエリの例


@media screen and (min-width: 560px) {
    .content-body {
        ...
    }
}
                

この例では、メディアの種類が screen(画面)かつ 横幅が 560px 以上 (つまり端末画面の横幅が560px以上)の場合 に 適用する CSS を 波括弧({})内に記述していきます。

この メディアクエリ を使って、スマートフォン、タブレット、パソコン など画面サイズの異なる端末からのアクセスに応じて適用する CSS を設定します。

他にも、画面を印刷する際に適用する print や、スマートフォンやタブレットの横向き (orientation: landscape) などを条件に指定することができます。

より詳しい情報は メディアクエリの使用 – CSS: カスケーディングスタイルシート | MDN をご覧ください。

@importを使用する

CSSで @import を使用して 条件付きでスタイルシートを適用することができます。


@import url('tablet-style.css') screen and (min-width: 560px);
                

linkタグを使用する

HTML の <link>media 属性を使用することで、特定のメディアを対象に CSS を適用することができます。


<link rel="stylesheet" href="./tablet-style.css" media="screen and (min-width: 560px)">
                

ビューポートの指定

メディアクエリ を使用したり、そもそも Webページをスマートフォンなどの端末サイズに 最適化 するために ビューポートを指定する必要があります。

ビューポートは <head>内に記述する meta viewport のことです。


<meta name="viewport" content="width=device-width, initial-scale=1.0">
                
  • width=device-width
    画面の幅に合わせてコンテンツのサイズを最適化します。
  • initial-scale=1
    画面に表示する際の倍率を指定します。デフォルトでは 1 です。

簡単に言うと、端末ごとに上手い具合にサイズを調整して見やすくしてくれるもの ほぼ確実に必要なものになります。

<head>タグ内にあるかどうかを確認して、なければ コピペ してください。

他に、スマートフォンなどでズームさせたくない場合は、user-scalable=no と追記することで利用者のズームを無効にし、アプリかのように見せることができます。

  • viewport定型文 のようなものだと考えておいてください。

聖杯レイアウトをコーディング

Holy Grail(聖杯)

聖杯レイアウトをコーディングしてみましょう。

コピペでもいいので 必ずご自身のブラウザで試して みてください。


<body class="flex flex-vertical">
    <header>ヘッダー</header>
    <div class="content-body flex flex-vertical flex-1">
        <main class="flex-1">メインコンテンツエリア</main>
        <nav class="order-1">ナビゲーション</nav>
        <aside>広告エリア</aside>
    </div>
    <footer>フッター</footer>
</body>
                

body {
    min-height: 100vh;  /* 高さの最小を画面いっぱいに設定 */
    margin: 0;  /* ブラウザのデフォルトのスタイルを解除 */
}

header, footer {
    background-color: #f48fb1;  /* 分かりやすいように背景色を設定 */
}

nav {
    background-color: #a7ffeb;  /* 分かりやすいように背景色を設定 */
}

aside {
    background-color: #69f0ae; /* 分かりやすいように背景色を設定 */
}

main {
    background-color: #ffeb3b;  /* 分かりやすいように背景色を設定 */
}

header {
    flex-basis: 50px;  /* flex-basis(初期値)を指定 */
}

nav, aside {
    flex-basis: 100px;  /* flex-basis(初期値)を指定 */
}

footer {
    flex-basis: 100px;  /* flex-basis(初期値)を指定 */
}

/* Flex Layout */
.flex {
    display: -ms-flexbox; /* IE */
    display: flex;
}

.flex-vertical {
    -ms-flex-direction: column; /* IE */
    flex-direction: column;
}

.flex-1 {
    -ms-flex: 1 1 0.000000001px; /* IE */
    flex: 1;
    flex-basis: 0.000000001px; /* IE */
}

/* アイテムの表示順序 */
.order-1 {
    -ms-flex-order: 1;
    order: 1;
}

/* 画面サイズの横幅が960px以上である場合 */
@media screen and (min-width: 960px) {
    .content-body {
        /* Flexで横並び */
        -ms-flex-direction: row; /* IE */
        flex-direction: row;
    }

    .content-body nav,
    .content-body aside {
        flex-basis: 200px;  /* flex-basis(初期値)を指定 */
    }

    .content-body nav {
        /* アイテムの表示順序 */
        -ms-flex-order: -1;
        order: -1;
    }
}
                

ブラウザで表示してみたら、画面サイズを変更してレイアウトが変わることを確認してください。

また、CSSのコメントを読んで分からないところは調べてみてください。

この聖杯レイアウトでは、メインコンテンツエリア<main>よりナビゲーション<nav>を後ろに定義していますが、Flexboxの order を使用して表示順序を変更しています。

  • アクセシビリティについても意識できるようになりましょう。

課題

聖杯レイアウトを自身のローカル環境で実行し、ブラウザで確認してください。

CSSのコメントを読み、それぞれの役割や意味について理解できるように調べてみてください。

また、それぞれの値を変えてみて、デザインがどの様に変わるかを試してみてください。

500px 以上の画面幅の場合には、背景を異なる色に変更するCSSを記述し、ブラウザで確認してください。

viewport タグが ある場合ない場合 の違いを デベロッパーツール の Toggle Device Toolbar で確認してください。