世の中にはいろいろな画面サイズのデバイスがあります。 Web ページを作る上でスマートホン、タブレット、 PC などで、それぞれ見た目を変更したい場合も多いはずです。その時デバイスごとに Web ページを作成し、切り替えて表示するのはかなり大変です。

レスポンシブデザインは1つのコンテンツ (HTML/CSS) で複数の画面サイズに対応するための手法です。複数の HTML を用意せず CSS だけで画面レイアウトなどを変更します。

必要な知識

  • HTML
  • CSS

コンテンツ

実際に CSS を書きながら、複数の画面サイズに対応する方法を確認していきます。そのためのコンテンツを用意します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test Responsive</title>
    <style>
        body {
            margin: 0;
        }

        article {
            margin: 8px auto;
            box-sizing: border-box;
            padding: 1em;
            width: 720px;
            background: #EEE;
        }
    </style>
</head>
<body>
    <article>
        <h1>すばらしいタイトル</h1>
        <p>素晴らしいコンテンツ</p>
        <p>Lorem necessitatibus itaque praesentium inventore dolorum soluta itaque quae. Eius blanditiis ad earum reprehenderit incidunt. Nisi fuga itaque natus recusandae adipisci perspiciatis saepe laboriosam rem recusandae quod dolorum aliquid. Facere.</p>
    </article>
</body>
</html>

画面に 720px で記事を表示しています。サイズを決め打ちしているので、それより小さい画面でははみ出してしまいます。

これを小さい画面に対応させてみます。

@media

画面サイズなどによって処理を切り替えるには @media という CSS の機能を使うことができます。

@media (max-width: 736px) {
    article {
        margin: 8px;
        width: calc(100% - 16px);
    }
}

この6行の CSS を先ほどの HTML に書き加えると、小さい画面でもコンテンツが画面に収まるようになります。順に見ていきます。

@media で CSS を囲むと条件によって適用する CSS を切り替えることができます。 @media (条件) { ... } という構文です。

max-width: X は画面サイズが最大でも X だった場合、つまり画面サイズが X 以下の場合を指します。 上では 720px + マージン 8px + 8px である 736px を指定しているので、画面が 736px 以下の場合のみこの CSS が適用されます。

min-width

例では max-width を使い画面が小さい時だけ CSS を適用させました。

逆に小さい画面の場合だけ CSS を適用させることもできます。

body {
    margin: 0;
}

article {
    margin: 8px;
    box-sizing: border-box;
    padding: 1em;
    width: calc(100% - 16px);
    background: #EEE;
}

@media (min-width: 736px) {
    article {
        margin: 8px auto;
        width: 720px;
    }
}

この CSS は上の CSS と全く同じ結果になります。 width などの指定が逆になっているのがわかるはずです。

今回は width を少し切り替えただけですが、例えば小さい画面の場合は一部のコンテンツに display: none を適用して非表示にしたりもできます。様々なことを CSS だけで実現できるので慣れると大変便利です。

Media Queries

@media で指定できる条件は Media Queries という仕様で決められており、他にもたくさんあります。以下の Web ページが参考になります。

まとめ

  • レスポンシブデザインとは1つの HTML で複数のデバイスに対応するための手法
  • @media (条件) { ... } で条件にあう場合だけ CSS を適用できる
  • 指定できる条件は Media Queries として決められている