スマホ対応（レスポンシブ対応）の概要を理解しよう

バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#17  スマホ対応（レスポンシブ対応）の概要を理解しよう

web兄さん

＼SHARE／

【予告】本講座の最後で課題にチャレンジします！

ブラウザを小さくしていくと1000pxと600pxでCSSが切り替わる

少し難しい内容ですが、最後には課題にチャレンジすることでしっかり身につけられるので、そのつもりで集中して読んでいきましょう！

WEBサイト制作を仕事としたいのであれば、様々なデバイスに対応して作れるようにならなければなりません。

たとえば、以下のAppleのページでは、パソコンとスマホでは画面の横幅と縦幅の違いに合わせて、WEBページの見た目が全然違いますよね。

このように、スマホが普及した現代では、ほぼ全てのWEBサイトでマルチデバイス（様々な幅の端末）での対応が求めれます。

web兄さん
時代の変化に合わせて技術を身につけていく必要があります！

では、このAppleのサイトはパソコンとスマホ用でそれぞれ別々のWEBページを作っているのでしょうか？

答えはNoです。

（少ないですが、パソコンとスマホで別々のサイトを用意している会社もあります）

以下は実際のWEBサイトの動きを録画したものですが、画面幅に合わせて画像が小さくなったり、メニューが切り替わったりしていますよね。

デバイス幅に合わせて「要素のサイズが可変」している

このようにデバイスの幅に合わせてCSSの見た目を切り替えることを「レスポンシブ対応」と呼びます。

メディアクエリを使用したレスポンシブ対応の手順

まずは以下の例を見てみましょう。デバイスの横幅が変わるタイミングで見た目が変わっています。

具体的には以下のタイミングで切り替わっているので注目してみてください。

  1. 1440pxでは黒文字で大文字
  2. 1024pxより小さくなると「青文字」で「文字サイズが少し小さくなる」
  3. 768pxより小さくなると「赤文字」「赤ボーダー」「文字がさらに小さくなる」

これは、実際にCSSで「1024pxより小さくなった時だけこのCSSを適用する」「768pxより小さくなった時だけこのCSSを適用する」という指示をスタイルシートに書いています。

メディアクエリ（media query）

それでは実際のコードをもとに解説します。

ブラウザの横幅によってCSSを適用させるには「メディアクエリ」を使用します。

メディアクエリの書き方
メディアクエリの書き方

メディアクエリは非常にシンプルです。

@media screen and (max-width: 〇〇px) { }という定型文の中にいつも通りCSSを記述するだけです。

/*これは全ての横幅で適用される*/
p{
    font-size: 60px;
}

/*これは1024px以下で適用される*/
@media screen and (max-width: 1024px) {
    p{
        font-size: 40px;
    }
}

このコードの場合は、「max-width : 1024px（Maxの横幅が1024px）」と書いてあるので、

0〜1024px（Max）まではpのfont-sizeは40pxとなり、それ以上は60pxとなります。

CSSは上書きされるので優先したいコードを下に書きます

CSSは同じ要素に対して、同じプロパティが書かれていた場合、通常下に書いてあるコードが優先されます。そのため、メディアクエリを書く時は通常のCSSの下に書くと意識しましょう。

NGな例

@media screen and (max-width: 1024px) {
    p{
        color : black;
    }
}

p{
  color : red;
}

この場合、1024px以下でcolor:redが上書きされて優先されてしまいます。

OKな例

p{
  color : red;
}

@media screen and (max-width: 1024px) {
    p{
        color : black;
    }
}

この場合、1024px以下でcolor : blackが正しく上書きされて優先されます。

メディアクエリは複数書くことができる

以下の例では、1024pxと768pxの２段階で見た目が変わっていますよね。

これは切り替えたい横幅ごとに複数のメディアクエリを記述してあるからです。

p{
    font-size: 60px;
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
    p{
        font-size: 40px;
        color:#0B78D7;
    }
}

@media screen and (max-width: 768px) {
    p{
        border:solid 4px #FF6658;
        color:#FF6658;
        font-size: 30px;
    }
}

この例の具体的なコードはこのようになります。

  • 1024px以下ではfont-size:40px、color:#0B78D7
  • 768px以下ではfont-size:30px、color:#FF6658、border:solid 4px #FF6658;
  • それ以外（1025px〜）はfont-size: 60px
web兄さん
改めてまとめると、メディアクエリを使って指定した横幅ごとにCSSを追記・上書きすることを「レスポンシブ対応」と呼びます。

デバイスごとに横幅が異なる

レスポンシブ対応は「横幅」を基準としていますが、その理由はデバイスごとに横幅が全く異なるからです。

以下の画像にある通り、私たちが使用しているデバイスにも「px」という単位が使用されています。

デバイスごとに横幅が異なる

そして、同じApple製品でもMacbookであれば1440px、iPhoneであればMacbookよりも小さく414pxとなっています。

全てのデバイスのサイズに対応する必要がある？

上記の説明でいけば、デバイスのサイズは10種類以上あるため、対応させたいデバイスの数だけメディアクエリを書く必要があるかと言えばそうではありません。

実際のレスポンシブ対応の流れをもとに確認してみましょう。

01

PCのコーディングはOK

まずPCのコーディングができており、大きなパソコンとノートパソコンで見た目が綺麗に見えているとします。この場合は当然メディアクエリは不要です。

02

タブレットサイズになるとメディアクエリが必要

PCのコーディングはOKでしたが、タブレットサイズまで小さくした時にパソコンと同じ見た目のままでは画像がはみ出てしまいました。

そのためメディアクエリを使って768px以下で画像が小さくなるようにします。

03

スマホではさらにメディアクエリが必要

タブレットに合わせて768px以下で調整しましたが、スマホサイズだとどうでしょうか？

当然スマホの方がデバイスサイズが小さいので画像がはみ出てしまいますね。

428pxと320pxどちらのサイズでも綺麗に見えるように480px以下でメディアクエリを設定します。

このように、メディアクエリを何pxごとに書くかは厳密に決まっておらず、

  • 「1024px以下で書けば大きいタブレットと小さいタブレットどちらもカバーできるな」
  • 「600px以下でメディアクエリを書けばどのスマホサイズでも綺麗に見せられるな」

というように、実際に使われている端末のサイズから大体の数値でメディアクエリを書きます。

このようにメディアクエリをどのpxで設定するかを「ブレークポイント」と呼びます。

ブレイクポイントを「何pxで書くべき論」は諸説あり絶対の正解はありません。

最終的には、仕事相手のデザインに合わせたり、入社した会社の方針に合わせることになります。

レスポンシブ対応の課題にチャレンジ

実際に手を動かして、以下のようにブラウザの幅でCSSが切り替わるレスポンシブ対応をしてみましょう。

ブラウザを小さくしていくと1000pxと600pxでCSSが切り替わる

課題の手順

❶環境の準備

以下に手順が記載してありますが、不安な方は「#09 CSSの課題｜シンプルなWEBページを作ろう」の環境準備の動画を参考にしてみてください。

手順01

デスクトップに「webliker」>「kadai-responsive」という課題用のフォルダを作成する

デスクトップに課題用のフォルダを作成する

HTMLの課題の時と同様にweblikerというフォルダの中にkadai-responsiveというフォルダを作りましょう。

手順02

VS Codeで「index.html」を作成し「kadai-responsive」の中へ保存する

作成したフォルダの中にindex.htmlを保存する

※必ず以下のHTMLをコピーしてください

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <!-- 
        通常：文字の色を青色
        1000px以下：文字の色を緑色
        600px以下：文字の色を赤色
     -->
    <p>この文字は通常は青色ですが、1000px以下で緑色に変わり、600px以下で赤色に変わります。</p>

    <!-- 
        通常：横幅を800px
        1000px以下：横幅を400px
        600px以下：横幅を200px
     -->
    <img src="img/dog.jpg" alt="犬">

</body>
</html>

手順03

VS Codeで「style.css」を作成し「kadai-responsive」の中へ保存する

@charset "UTF-8";

/* 1000px以上で適用されるCSS
--------------------------------------*/
p{
    color: blue;
}

img{
    width: 600px;
}


/* 1000px以下で適用されるCSS
--------------------------------------*/


/* 600px以下で適用されるCSS
--------------------------------------*/
  1. VS Codeで新規ファイルを作成し「左のコード」をコピペ
  2. style.cssというCSSファイルを作成
  3. デスクトップ > webliekr > kadai-responsiveへ保存
作成したフォルダの中にstyle.cssを保存する

手順04

画像をダウンロードして読み込み

画像をダウンロードしてimgフォルダに追加

課題で使う画像をダウンロードし、

kadai-responsive > imgの中に移動させます。

dogダウンロード↓

手順05

index.htmlを開いて表示をチェック

HTMLを開いてこの状態になっていればOKです。

❷実践｜課題に取り組もう

今回は今までの課題と少し異なり、既に適用してあるp{ color: blue }とimg{ width: 600px }のCSSをブラウザを縮小させた時に以下のように変更してください。

  1. 1000px以下で文字の色をcolor: greenに画像をwidth: 400pxに変更する
  2. 600px以下で文字の色をcolor: redに画像をwidth: 200pxに変更する
web兄さん
本講座で学習したメディアクエリを使えば難しい課題ではありませんよ！

課題の解答

正解のCSSのコードを確認する

@charset "UTF-8";

/* 1000px以上で適用されるCSS
--------------------------------------*/
p{
    color: blue;
}

img{
    width: 600px;
}

/* 1000px以下で適用されるCSS
--------------------------------------*/
@media screen and (max-width: 1000px) {
    p{
        color: green;
    }
    img{
        width: 400px;
    }
}

/* 600px以下で適用されるCSS
--------------------------------------*/
@media screen and (max-width: 600px) {
    p{
        color: red;
    }
    img{
        width: 200px;
    }
}

課題につまずいた方は正解を見た上で改めて本講座を読み直して再チャレンジしてみてくださいね！