レスポンシブ対応の考え方とコツ

レスポンシブ対応とは？

Webページをスマホ・タブレット・PCなど、様々な画面サイズに合わせてレイアウトを調整することです。

• 文字や画像の大きさが画面幅に応じて変わる
• メニューやボタンの配置が使いやすく切り替わる
• 横スクロールせずに見やすい表示になる

といった工夫をCSS（主にメディアクエリ）で行います。

簡単に言うと「どんなデバイスでも見やすく、使いやすくするためのデザイン・構築方法」です

レスポンシブ対応の考え方

モバイルファーストという考え方

今、スマホからのWebサイト閲覧は8割と言われています。それなのにスマホサイトのレイアウトが崩れていたらどうでしょう。「なんだこのサイト」と思われページから離脱してしまうことは想像に容易いです。
モバイルファーストとは、まず小さい画面でデザイン・レイアウトを考え、次にタブレットやPCへ対応する方法です。
ユーザーがスマホでストレスなく操作できることを優先するのがポイントです。

モバイルファーストの重要性

モバイルファーストの考え方でデザイン・構築することで、SEO対策やページの表示速度向上などメリットがあります。

Googleはモバイルファーストインデックス

検索エンジンの中でもメジャーなGoogleは、モバイルサイトの内容を基準にインデックス・ランキングを決定していると公言しています。そのため、スマホで見づらいとサイトの評価が下がり、SEOで不利になってしまいます。

ページ表示速度も重要

表示領域が小さいスマホを基準にデザインすることで、デザインがシンプルになりやすく、結果的に無駄が省けたサイトとなり、通信速度が向上することが見込まれます。スマホは通信速度が遅い場合も多く、軽量で読みやすい設計がSEOに好影響になります。

ブレークポイントの考え方

ブレークポイントは「画面幅によってデザインを切り替えるタイミング」のことです。
（例：480px、768px、1024px など）
デバイスごとに決めるのではなく、デザインが崩れるタイミングで設定するのがコツです。

各端末のおおよその画面サイズ

• スマホ ：375px〜428px
• タブレット：768px〜960px（小型は600pxほども）
• パソコン ：960px〜1280px

※投稿時点(2025/8/18) もちろん例外もございます。

よく使われるブレークポイント

あくまで一例であり、昨今はデバイス画面が大きくなる傾向があるため、ブレークポイントも変わってくる可能性があります。

ブレークポイント	対象デバイス
〜599px	スマホ縦
600px〜767px	スマホ横・小型タブレット
768px〜959px	タブレット
960px〜	PC

視覚的な優先順位

小さい画面では、表示される情報が少なくなるため、重要な情報や興味を持たれるような内容を先に表示させるなど、離脱を防ぐ工夫ができるとなお良いです。CTAボタン(Call To Actionボタン：ユーザーに行動を促すボタン)や見出し、画像の順序を意識することも大切です。。

レスポンシブ対応のコツ

メディアクエリを使いすぎない

メディアクエリを使って、画面幅指定でCSSを適用するということがレスポンシブ対応の基本にはなりますが、多用するとコード記述が増えることにより、コードの視認性が損なわれたり、サイトが重くなったりする原因になります。
そのため、多用せずに必要最低限に留めるという努力が必要になります。

/* メディアクエリの例 */
/* === デフォルト（スマホ用: ~600px） === */
body {
  font-size: 1rem;
  background: #f9f9f9;
}

.container {
  display: grid;
  grid-template-columns: 1fr; /* スマホは1列 */
  gap: 16px;
}

/* === タブレット以上 (min-width: 600px) === */
@media (min-width: 600px) {
  .container {
    grid-template-columns: repeat(2, 1fr); /* タブレットは2列 */
  }
}

/* === PC以上 (min-width: 1024px) === */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(4, 1fr); /* PCは4列 */
  }
}

単位には相対値を使う

CSSの単位（絶対値と相対値）

CSSの単位には「絶対値」と「相対値」があります。絶対値とは他の要素に左右されない値のことで、相対値とは他要素を参考に数値が決まる値のことです。単位に相対値を使ってサイトを構築することで、文字サイズや画面幅などに応じて余白などを柔軟に変化させることが可能です。

単位	意味
px	ピクセル（画面上の点の数）
cm	センチメートル
mm	ミリメートル

単位	意味
%	親要素に対する割合
em	【font-sizeに指定】 　親要素のフォントサイズを基準（1em = 親のfont-size） 【margin,padding,width,heightに指定】 　自分自身のfont-sizeが基準
rem	ルート要素（html）のフォントサイズを基準（1rem = html要素のfont-size）
vw	ビューポートの幅の1%
vh	ビューポートの高さの1%

絶対値と相対値の例

文字の大きさに絶対値16px、相対値4vwを指定し、画面幅を400pxから600pxに変化させた時の比較。

絶対値は画面幅が600pxになっても指定した16pxのまま変わらない。一方で相対値の4vwは画面幅が600pxになると大きさが変化している。

これに対して、margin: 1em;やpadding: 1em;といったように「文字サイズに対して、余白をどれくらいか」というように調整することができます。文字サイズが可変するのに、余白が固定したままだと視認性が悪くなってしまうため、この文字サイズに対して余白を設定することはよくあります。

文字サイズはremの値をclamp関数で画面サイズに対応させる

レスポンシブ対応は、「どのデバイス（画面幅）でもみやすくする」というものであるため、文字サイズも画面幅に対して可変にすることが望ましいです。
そこで、色々ある相対値の中で画面幅により可変となるものは「vw」が挙げられますが、以下の理由から「rem」を使うことがいいと考えます。

文字サイズにremを使う理由

ブラウザの文字サイズ設定は人によって様々

ブラウザの設定で文字サイズを変更できることはご存知ですか？
Chromeの場合は 設定 > デザイン > フォントサイズ から変更が可能です。

目が悪い方など、この設定からWebサイトの文字サイズを大きくして閲覧している方もいます。
このいった方は「文字を大きくしたい」と思い設定をしているわけなので、この意志は尊重すべきだと個人的に考えています。

ブラウザの文字サイズ設定はどこに影響する？

ブラウザの文字サイズ設定は、html要素の文字サイズを変更します。
html要素のデフォルトの文字サイズはmediumですが、これをlarge smallと変更する設定です。

remならブラウザ設定を反映できる

相対値remは「ルート要素（html）のフォントサイズを基準」にするため、ブラウザ設定をWebサイトに反映させることができ、「アクセシビリティの良い」サイトにもなります。

clamp関数によってremを画面幅によって可変にする

clamp関数は、「最小値」「中間値」「最大値」の3つの値を指定することができます。この中間値に相対値rem,vwをうまく使うことで、remを画面幅に応じて可変にすることが可能です。

clamp(最小値, 中間値, 最大値)

最小値と最大値をremで指定し、中間値にremとvwを組み合わせて記述します。

body {
  font-size: clamp(1rem, 0.648rem + 1.5vw, 2rem);
}

この例は画面幅375pxで最小値の1rem、画面幅1440pxで最大値の2rem、その間の画面幅では0.648rem + 1.5vwの計算結果の値をとるという記述です。

この「clampの値を考えるのが大変」と感じると思いますが、自動で計算してくれるサイトがあります。
https://min-max-calculator.9elements.com

最小値、最大値、最小値を取る画面幅、最大値をとる画面幅を入力するだけで計算してくれるのでとても便利です。

marginやpaddingなどスペースを開けるものはrem,emを使い分ける

基本的にmargin,paddingなどの余白は、前に述べたように文字サイズに対する相対値でないとバランスがおかしくなる可能性があるため、基本的には文字サイズが基準のremやemを使った方がいいと考えます。

emについては、font-sizeに対しての指定以外は自分自身の文字サイズが基準となるため、見出し周りの余白の指定などに便利です。

pxからremの変換はcalc関数

remを使おうと述べてきましたが、「12pxって何rem」といったようにpxからremへ変換する時に便利な関数がcalc関数です。

width: calc(100% - 40px);

()の中に数式を入れることで計算した結果を値として返してくれます。
remに変換する際は、calc(算出したいpx / 16 * 1rem)とすることで、pxをremに変換することができます。

width: calc(22 / 16 * 1rem);

この例だと22pxをremに変換しています。計算結果は1.375rem（1.375 × 16px = 22px）です。
calc関数を使うことで、簡単にremの値を作ることができます。

画像には最大値をつける、デバイス（画面幅）で出しわけ

親要素をはみ出ないように最大値を設定する

画面幅よりも画像の幅が大きく指定されていると、画像が親要素を飛び出してしまいます。
飛び出さないように画像にはmax-width: 100%;など最大値を設定します。

デバイスに応じて最適な画像を表示

srcset属性によって、デバイス（画面幅）に応じて画像の出しわけが可能です。
スマホの画面でPCで表示するような高解像度のものを表示しようとするとサイトが重くなったりするため、小さい画面では比較的低解像度の画像を表示、パソコンでは高解像度の画像を表示と使い分けることも重要です。

WordPressでは管理画面で画像をアップロードした際に自動で、複数の解像度の画像にし、出しわけてくれます。

<!-- HTML -->
<section class="responsive-image">
  <img 
    src="image-1024.jpg" 
    srcset="
      image-480.jpg 480w,
      image-768.jpg 768w,
      image-1024.jpg 1024w
    "
    sizes="(max-width: 600px) 480px,
           (max-width: 900px) 768px,
           1024px"
    alt="サンプル画像">
</section>

この例では、画面幅が600px以下の時、900px以下の時、それ以外という形で画像を出しわけしています。

【補足】flexとgridで柔軟なレイアウト

display: flex;やdisplay: grid;を利用することで、要素の横並びなどより柔軟なレイアウトが可能です。
レスポンシブの観点では、flex-wrap: wrap;やgrid-template-columns: repeat(auto-fil, minmax(300px, 1fr));などで自動で折り返したりすることで、メディアクエリを使わずレスポンシブ対応することが可能です。

【補足】絶対値と相対値の使い分け

基本的には文字サイズをremで構築し、余白などをrem,emで構築していくことで、メディアクエリの利用頻度を抑え、尚且つアクセシビリティにも良いレスポンシブ対応ができると考えています。

ただ、必ずしも相対値のrem,emで構築しないといけないかということではありません。
例えば、サイトのコンテンツ幅を900pxに設定し、画面を広げても幅を変えたくないという場合には絶対値でmax-width: 900px;と指定します。仮にmax-width: 56.25rem;（ブラウザ設定のフォントサイズが中の時に900px）とした場合、ユーザーがフォントサイズを変更していた場合は、900pxでは無くなってしまいます。

このように「画面幅に応じて可変にしたくない」というケースもあるため、絶対値か相対値がいいか考えることが必要な場面もあります。

レスポンシブ対応の参考コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブ参考ページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>レスポンシブデザインの参考</h1>
    </header>

    <main>
      <section>
        <h2>セクション見出し h2</h2>
        <p>
          これは本文の例です。画面幅に応じてフォントサイズが調整されます。
          レスポンシブデザインでは、読みやすさと余白のバランスが重要です。
        </p>
      </section>

      <section>
        <h3>グリッドレイアウト</h3>
        <div class="grid-container">
          <div class="grid-item">グリッド1</div>
          <div class="grid-item">グリッド2</div>
          <div class="grid-item">グリッド3</div>
          <div class="grid-item">グリッド4</div>
          <div class="grid-item">グリッド5</div>
          <div class="grid-item">グリッド6</div>
        </div>
      </section>
    </main>

    <footer>
      <p>&copy; 2025 レスポンシブ参考ページ</p>
    </footer>
  </div>
</body>
</html>

/* ベースリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* bodyはフル幅 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  font-size: clamp(0.875rem, 0.85rem + 0.3vw, 1rem);
  background-color: #f9f9f9;
  color: #333;
}

/* コンテナ */
.container {
  width: 90%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 1em 0;
}

/* 見出し */
h1 {
  font-size: clamp(2rem, 1.8rem + 1vw, 2.5rem);
  margin-bottom: 0.5em;
}

h2 {
  font-size: clamp(1.5rem, 1.4rem + 1vw, 2rem);
  margin-top: 2em;
  margin-bottom: 0.5em;
}

h3 {
  font-size: clamp(1.25rem, 1.2rem + 0.8vw, 1.5rem);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* 段落 */
p {
  margin-bottom: 1em;
}

/* セクション */
section {
  margin-bottom: 2em;
}

/* footer */
footer {
  text-align: center;
  padding: 2em 0;
  font-size: 0.875rem;
  color: #555;
}

/* -------------------- */
/* グリッドレイアウト */
/* -------------------- */
.grid-container {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-item {
  background: #e3e3e3;
  padding: 1.5em;
  text-align: center;
  border-radius: 0.5em;
  font-weight: bold;
}

まとめ

レスポンシブ対応の考え方とコツとしては以下です。

• モバイルファーストで考える
• メディアクエリはできる限り多用しない
• 文字サイズはremを使いアクセシビリティも意識する
• clamp関数で文字サイズremを画面幅で可変に
• 余白などはrem,emを使う
• 画像には最大値をつける

このコツとしては、あくまで私が考えるものです。ただ、これを意識できればブラウザ設定を活かしたアクセシビリティにも良いレスポンシブ対応ができているのではと思います。