レスポンシブ対応とは

2025.07.09

HTML/CSS

スマホの普及

現在では、ホームページを閲覧するユーザーの多くがスマートフォンを利用しています。
スマホが普及し始めた当初、多くのホームページはPC向けに作られていたため、画面が狭くなると自動的に縮小され、ユーザーは拡大しないと内容が見づらいという問題がありました。
そこで、スマホ用にCSSを整えた別のHTMLファイルを用意して対応していました。しかし、更新のたびに両方のファイルを修正する必要があり、作業工数が増えるという課題がありました。

この課題を解決するために登場したのが「レスポンシブ対応」です。CSSのメディアクエリを活用することで、1つのHTMLファイルとCSSファイルで複数のデバイスに対応できるようになり、保守性も大幅に向上しました。

レスポンシブ対応されたページは、Googleのモバイルフレンドリー評価でも有利となるため、SEOの観点からも非常に重要です。現在では、対応していないページは検索順位で不利になる可能性があるため、必須といえるでしょう。

レスポンシブ対応の方法

<head>タグ内に下記のコードを書きます。

<meta name="viewport" content="width=device-width">

これでデバイスの幅によって調整が可能になります。

メディアクエリの書き方

@mediaの構文は次のように記述します。
@media (max-width: 767px) または @media (min-width: 768px) のように、幅の条件に応じてCSSを適用します。

// 通常のCSS
.item {
  color: #00ff00;
  margin-bottom: 60px;
}

// PC用の表示（幅768px以上で適用されるCSS）
@media (min-width: 768px) {
  .item {
    color: #0000ff;
    margin-bottom: 100px;
  }
}


// スマホ用の表示（幅767px以下で適用されるCSS）
@media (max-width: 767px) {
  .item {
    color: #ff0000;
    margin-bottom: 30px;
  }
}

PCファーストでの記述

PCファーストとは、PCでの表示を基準にして幅が縮まるにつれて調整していくスタイルです。
max-widthを使用します。
PCのデザインカンプが基準になっている場合に使用することが多いです。

// PC用の表示
.item {
  color: #00ff00;
  margin-bottom: 60px;
}

// タブレット用の表示（幅1023px以下）
@media (max-width: 1023px) {
  .item {
    color: #ff0000;
    margin-bottom: 40px;
  }
}

// スマホ用の表示（幅767px以下）
@media (max-width: 767px) {
  .item {
    color: #0000ff;
    margin-bottom: 20px;
  }
}

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

モバイルファーストとは、スマホでの表示を基準にして幅が広まるにつれて調整していくスタイルです。
min-widthを使用します。
スマホ基準のデザインカンプで使用されます。

// スマホ用の表示
.item {
  color: #00ff00;
  margin-bottom: 30px;
}

// タブレット用の表示（幅768px以上）
@media (min-width: 768px) {
  .item {
    color: #ff0000;
    margin-bottom: 40px;
  }
}

// PC用の表示（幅1024px以上）
@media (min-width: 1024px) {
  .item {
    color: #0000ff;
    margin-bottom: 60px;
  }
}

PCファーストかモバイルファーストか

案件やクライアントによって異なりますが、現在ではモバイルファーストが主流です。
その理由は以下の通りです。

スマホからのアクセスが主流であること
デザインカンプもSP版から制作されることが多い
min-widthを使ったモバイルファーストの方が、CSSの上書きやリセット記述が少なくなり、パフォーマンスが良いとされていること

項目	PCファースト	モバイルファースト
基準	PC表示を基準に縮小対応	スマホ表示を基準に拡大対応
使用するメディアクエリ	max-width	min-width
向いているケース	PCカンプが先にある場合	モバイルファーストな設計
メリット	PC設計がしやすい	パフォーマンスが高く、スマホ中心の設計がしやすい
デメリット	リセット記述が多くなりがち	PCの複雑なUI設計が後回しになりがち

まとめ

レスポンシブ対応は、現代のWeb制作において欠かせない技術です。PCファーストとモバイルファーストの使い分けを理解し、柔軟に対応できるようにしておきましょう。