メディアクエリでスマホ対応

2022年12月28日

WEBサイト制作

#HTML
#css
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は、みなさんお使いのスマートフォンにとって見やすいWEBサイトをコーディングする方法を書いていきます！

スマホサイトについて

皆さんは普段、どの端末からWEBサイトをご覧になりますか？
PCですか？タブレットですか？スマホですか？
現在（執筆時2022年）、日本のインターネットを利用するユーザーの約7割がスマホを使っています。
すごくないですか？
そんな高い割合なのかと思いつつも、
私自身、ネットで買い物するのも、動画を見るのも、ラジオを聞くのも、
全てスマホで済んでいます。

これはつまり、これから作るWEBサイトはスマートフォンに対応する必要があるということです！！

レスポンシブサイト

レスポンシブサイトとは、PC用のHTMLとスマホ用のHTMLが同一で、
CSSによって見た目がPC用とスマホ用に変化するWEBサイトのことです。

かつてはこんなような作りがスタンダードでした。

サーバー側で判別するか、クライアント側で判別するかの差はありますが、
このようにPC用のHTML、スマホ用のHTMLと分かれて表示をさせていたこともありました。

ですが、現在は、

このように一枚のHTMLでPC・スマホ両方に対応するサイト、つまりレスポンシブサイトが主流になっています。

メディアクエリ

では、具合的にどのようにコーディングすればレスポンシブサイトが作れるの？というと・・・
一番代表的なのではメディアクエリというものです。
こんなコードをCSSに記述します。

@media screen and (max-width: 768px) {
}

意味は、画面の幅768px以下の時に、このメディアクエリ内のCSSを適応するということです。
つまり、このメディアクエリ内に記述すると画面の幅によってCSSをかき分けられるので、
タブレットやスマホの画面のサイズ用にCSSを切り替えることができます。

ちなみに、CSSを切り替える特定のサイズ（この場合768px）、をブレイクポイントと言います。

メディアクエリの記述方法

では、具体的にどのように記述するのかを見ていきましょう！

まず、スマホサイトにしたいHTMLの＜head＞タグの中にビューポートの記述を入れましょう。

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

これでデバイスの画面の幅を検知して、正しくスマホ対応ができます。

では次にCSSです。

.block{
    width: 980px;
    height: 500px;
    margin: auto;
}

例えばこのように幅が980px、高さが500pxの要素が中央寄せになっています。
この要素をスマホ表示にする際、
現在の標準的なスマホのサイズ（375px）をはみ出してしまいます。

そこで、メディアクエリの登場です。
すぐ下にこのように記述しましょう。

.block{
    width: 980px;
    height: 500px;
    margin: auto;
}
@media screen and (max-width: 768px) {
    .block{
        width: 100%;
        height: auto;
    }
}

上記のようにすることで、
画面幅が768px以下になったとき、block要素の幅と高さが画面の大きさに対応するようになり、
スマホ画面をはみ出さなくなります。

PC用に書いたCSSを打ち消すイメージですね。