【まとめ】CSSでレスポンシブ対応のサイトを作る方法3選

パソコンのみではなく、タブレットやスマートフォンなど様々な端末からWEBサイトが閲覧される現代では、ほぼ全ての端末から快適に閲覧できるサイトづくりが重視されています。そういったWEBサイトを実装する方法として用いられるのが、レスポンシブ対応のデザインを設定するというものです。
今回は、CSSを用いて、レスポンシブ対応のサイトを作る方法を3つご紹介していきます。

レスポンシブがよくわからない方へ

この記事を読んでいる方の中には、「そもそもレスポンシブって何？」という方もいるかもしれません。この記事はレスポンシブについての理解がある程度無ければ読むことが難しいので、以下の記事を見てから閲覧することをおすすめします。マルチデバイス対応の名目で、レスポンシブについて簡単に解説しています。

参考記事

レスポンシブ対応のサイトを作る方法3選

レスポンシブに対応したサイトを作る手法は様々ですが、CSSを用いて実装するという点でいうと、基本的には以下の3つの手法が用いられます。

メディアクエリを使う
相対値でサイズを指定
flex-wrapを使う

どれも、多くのWEBサイトでよく見られる定番の方法です。
それでは、それぞれどういった手法でレスポンシブを実現するのか、解説していきます。

1．メディアクエリを使う

レスポンシブ対応において、デザイン性を重視する際によく使われるのがメディアクエリの機能です。

メディアクエリはマルチデバイス環境によって異なる仕様を考慮するために用意されているもので、上手く扱えばWEBサイトのUXを向上させることができます。

メディアクエリには複数の命令が存在しますが、今回は以下のコードを使用します。

@media screen and ( 指定したい画面サイズ ) {
    /* レスポンシブのスタイル */
}

このコードをCSSに記述すると、スタイルシートが読み込まれた際、
閲覧端末が[ 指定したい画面サイズ ]で指定した画面サイズであれば、波括弧（ブレース）内のスタイルが適用されます。

では、試しにPCと携帯端末で背景色が変わるテストコードを書いてみましょう。以下のような形でメディアクエリを指定すると、PCで閲覧した際には背景色が青に、携帯端末の場合は赤になります。

body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    /* 背景色が 青 */
    background: #0084ff;
}

/* タブレット・スマホの場合を想定 */
/* 768pxまでの横幅の端末であれば */
@media screen and (max-width: 768px) {
    body{
        /* 背景色を 赤 にする */
        background: #ff4848;
    }
}

CSSで下に行くほど優先順位が上がるので、コード下部でメディアクエリを書いておけば、携帯端末で閲覧した場合に、特定のプロパティ（例の場合はbackground）を上書きできるわけですね。

条件を満たしている場合のみ適用される別のCSSのコードだと思っておくのがわかりやすいかもしれません。

2．相対値でサイズを指定

メディアクエリを使わずレスポンシブ対応を実現する際、相対値によるサイズの指定が役に立ちます。

相対値というのは、○○pxなど直接的に長さを指定する形式（絶対値）とは対照的に、○○%のような形でサイズを指定する方法です。「%」で指定すると、基本的には親要素の幅・高さをそれぞれ参照し、その値をもとに子要素のサイズが決まります。

例えば、以下のようなコードでスタイルを指定すると、画像のような結果になります。

/* 親要素 */
#parent{
    width: 1000px;
    height: 400px;
    margin: 0 auto;
    background: #252525;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* 子要素 */
.child{
    /* 幅 100pxになるはず */
    width: 10%; 

    /* 高さ 40pxになるはず */
    height: 10%;

    background: #21bffd;
}

.child要素の横幅が100px、縦幅が40pxとなっているので、親要素のサイズの10%となっているのがわかりますね。

要するに、画面サイズを元に各要素のサイズを相対値で指定しておけば、端末に合わせた比率で画面を描画できるわけです。

ただし、基本的には画面が縮小された状態で表示されるだけになるので、WEBサイトの使い勝手は落ちてしまう可能性が高いと言えます。

3．flex-wrapを使う

モダンなCSSコーディングでは必須とも言えるflexboxの機能は、レスポンシブ対応の場面で役に立ちます。色々な機能がありますが、中でも便利なのがflex-wrapというプロパティです。

これは、display:flexを用いて親要素の下にある子要素をレイアウトしている場合に有効な手段で、本来であれば真横に並べられている要素が画面からはみ出てしまう場合、それらを折り返して表示します。

PC画面では要素いっぱいに横並びさせておき、スマホなどの画面で収まりきらない場合は、折り返して表示させることで、疑似的にレスポンシブなデザインを実現できるというわけです。

これについてはMDNで詳しくまとめられているので、そちらを参照してください。

flex-wrap – MDN

まとめ

CSSを上手に扱うことで、レスポンシブ対応のレイアウトを容易に実現することが可能です。現代ではレスポンシブ未対応のWEBサイトは基本的にあり得ないと言っても過言ではないので、初心者の方は、ここで紹介した方法から、実践しやすい方法でレスポンシブデザインを実現してみてください。