ZeroPlus Media > Web制作 > HTML/CSS > メディアクエリの使い方を解説-SEO対策されたレスポンシブサイトを作ろう

メディアクエリの使い方を解説-SEO対策されたレスポンシブサイトを作ろう

HTML/CSS

2022/02/10

2023/04/15

2022年現在、レスポンシブに最適化されたサイト制作は必須中の必須となっています。Googleが「モバイルフレンドリー（モバイル端末でサイトを見ることに最適化されたサイト）」を推奨しています。

レスポンシブ対応することはSEO（検索エンジン最適化）に効果があるといわれています。モバイルフレンドリーの観点からモバイル端末でのサイト閲覧を最適化することはエンジニアとして大事な作業になります。

この記事ではレスポンシブサイトを作る上で必須なメディアクエリの使い方を解説していきます！

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

メディアクエリの使い方
- メディアクエリを使用する準備
モバイルファーストの記述方法
メディアクエリを使ってみよう
まとめ

メディアクエリの使い方

メディアクエリとは、端末の種類や特定の画面幅に応じてサイトを変更したいときに使用するCSSの仕様の一つです。

Webサイトを閲覧している端末がパソコンかスマートフォンか、画面の幅や高さによってスタイルを切り替えるのに使うのがメディアクエリです。

メディアクエリは以下のように記述します。

基本書式

@media screen and (max-width: ブレイクポイント) {
  セレクタ: {
    プロパティ: 値
  }
}

メディアタイプ（@media 以降の部分）にはいくつかの種類があります。

all：全てのデバイス
print：印刷時のプレビュー
screen：printにもspeechにも当てはまらないもの全て（パソコンやタブレット、スマートフォンなどの画面）
speech：音声合成、スクリーンリーダーなど

状況次第で使用するメディアタイプは異なりますが、基本的にはscreenを使用します。

メディアクエリを使用するときに、ブレイクポイントがとても重要な値となります。

ブレイクポイントとはCSSを切り替える画面幅のことです。

例えば以下のようにメディアクエリをmin-width:480px;で適用したとします。

@media screen and (min-width: 480px) {
セレクタ: {
プロパティ: 値;
}
}

上記のコードではユーザーが480px以上の画面幅のときにスタイルを適用します。

min-widthやmax-widthの数字（ブレイクポイント）は任意の数字です。この例では480pxがブレイクポイントです。制作現場の状況に応じて数字は変わります。

ユーザーがWebサイトを閲覧する主要デバイスに合わせて、ブレイクポイントを決めることが多いです。

こちらのサイトで2022年のレスポンシブサイトのブレイクポイントをまとめています。

メディアクエリを使用する準備

メディアクエリを使用する準備として、HTMLのheadタグに以下のコードを記述します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

これらのコードを一つずつ解説します。

name属性

viewport：画面の表示領域を決めるための宣言です。

content属性

device-width：ビューポートを各デバイス幅に合わせるものです。device-widthの代わりに200〜1000pxの間で数値を指定することもできます。レスポンシブ対応サイトを作る際はdevice-widthを指定しましょう。
initial-scale：初期倍率です。width=device-widthを指定していない場合、デフォルトでinitial-scale=1となります。
minimum-scale：最小縮小倍率を指定できます。初期値は0.25、0より大きく10未満の値を指定します。
maximum-scale：最大拡大倍率です。初期値は1.6で0より大きく10未満の値を指定します。

モバイルファーストの記述方法

モバイルファーストで制作する場合はmin-widthを使用します。SP（スマートフォン）→PCという順でCSSを記述するため、小さい値からブレイクポイントを記述していきます。

デバイス幅が狭いものから少しずつ大きいものを制作していくイメージです！

モバイルファーストのメディアクエリ記述例

/* ここに0~479pxの範囲のスタイルを記述 */

@media screen and (min-width: 480px) {
  /* ここに480px以上の範囲のスタイルを記述 */
  /* 480~767pxが適用範囲 */
}

@media screen and (min-width: 768px) {
  /* ここに768px以上の範囲のスタイルを記述 */
  /* 768~1024pxが適用範囲 */
}

@media screen and (min-width: 1025px) {
  /* ここに1025px以上の範囲のスタイルを記述 */
  /* 1025以上適用範囲 */
}

モバイル→タブレット→PCという順で上から記述します。

なお、PCファーストで記述する場合はPC→SPという順序で記述します。こちらの場合はmax-widthを使用します。

PCファーストのメディアクエリ記述例

/* ここに最大幅～1026pxまでの範囲のスタイルを記述 */

@media screen and (max-width: 1025px) {
  /* ここに1025px以下の範囲のスタイルを記述 */
  /* 769~1025pxが適用範囲 */
}

@media screen and (max-width: 768px) {
  /* ここに768px以下の範囲のスタイルを記述 */
  /* 481px~768pxが適用範囲 */
}

@media screen and (max-width: 480px) {
  /* ここに480px以上の範囲のスタイルを記述 */
  /* 480px以下適用範囲 */
}

メディアクエリを使ってみよう

ここからは実際にメディアクエリを使用して、表示がどのように変化するか確認してみましょう。

モバイルファーストレスポンシブ対応

まずモバイルファーストレスポンシブから確認します。

HTMLとCSSは以下のように記述します。

<!DOCTYPE html>
<html lang="ja">
<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, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title> Document </title>
</head>
<body>
  <div class="mobile">
    <p>メディアクエリがmin-width</p>
  </div>
</body>
</html>

.mobile {
  width: 100%;
  height: 40px;
  background-color: red;
}

@media screen and (min-width: 480px) {
  .mobile {
    background-color: blue;
  }
}

@media screen and (min-width: 1025px) {
  .mobile {
    background-color: green;
  }
}

出力結果

headタグにviewportの記述をします。

480px、1025pxと2つブレイクポイントを設定しました。それぞれのブレイクポイントでmebileクラスに対して背景色を変更するCSSを記入しています。

0~479pxまでは赤色
480px~1024pxまでは青色
1025px以上では緑色

PCファーストレスポンシブ対応

PCファーストレスポンシブにおける表示変化も確認してみましょう！

HTMLとCSSは以下のように記述します。

<div class="pc">
  <p>メディアクエリがmax-width</p>
</div>

.pc {
  width: 100%;
  height: 40px;
  background-color: red;
}

@media screen and (max-width: 1025px) {
  .pc {
    background-color: blue;
  }
}

@media screen and (max-width: 480px) {
  .pc {
    background-color: green;
  }
}

出力結果

上記の場合、背景色は次のように変化します。

最大幅～1025pxまでは赤色
1024px~481pxまでは青色
480px以下では緑色

現在はモバイルファーストでの記述が主流であるため、PCファーストでの記述は知識として覚えておきましょう。

min-widthとmax-widthを組み合わせたレスポンシブ対応

min-widthとmax-widthを組み合わせて指定することもできます。

HTMLとCSSは以下のように記述します。

<div class="other">
  <p>メディアクエリがmin-width:600とmax-width:1024px</p>
</div>

.other {
  width: 100%;
  height: 40px;
  background-color: yellow;
}

@media screen and (min-width: 600px) and (max-width:1024px) {
  .other {
    background-color: purple;
  }
}

出力結果