レスポンシブデザインとは?仕組みとCSSでの作り方・ブレイクポイントの決め方

パソコンで見るときれいなWebサイトなのに、スマートフォンで開くと文字が小さすぎたり、横にはみ出して読めなかったりした経験はありませんか。

そうした問題を防ぐのがレスポンシブデザインで、1つのWebページを、見ている画面の幅に合わせて読みやすい形に自動で組み替える作り方のことです。

この記事では、レスポンシブデザインの仕組みとほかの方式との違い、CSSでの作り方、レイアウトを切り替える幅(ブレイクポイント)の決め方、「レスポンシブデザインは古い?」という疑問への答えまでを、前提知識がない人にも分かるように解説します。

レスポンシブデザインの基本

まずは、レスポンシブデザインとは何か、ほかのスマホ対応の方式とどう違うのか、なぜ必要なのかを押さえましょう。

レスポンシブデザインとは

レスポンシブデザインとは、1つのHTMLを、画面の幅に合わせてCSSで見た目(レイアウト)を切り替え、パソコンでもスマートフォンでも読みやすく表示する作り方のことです。

HTMLはページの中身(文章・画像・見出しなど)を書く言語、CSSはその並べ方や色・大きさなどの見た目を指定する言語です。

英語の「responsive」は「反応する・応じる」という意味で、画面の大きさに応じて形を変えることから、この名前が付きました。

「レスポンシブWebデザイン」とも呼ばれ、Webサイトをこの作り方に直すことを「レスポンシブ対応」と言います。

この言葉は2010年にWebデザイナーのイーサン・マーコット氏が提唱したもので、MDNのレスポンシブデザインの解説では、「伸び縮みする幅(流動的なグリッド)」「はみ出さない画像」「メディアクエリ(画面の幅で適用するCSSを切り替える仕組み)」の3つを組み合わせた作り方だと紹介されています(元の記事はA List Apartの「Responsive Web Design」(英語))。

たとえば、パソコンでは3つ横に並んでいる紹介の箱が、スマートフォンでは縦に1列に積み重なる、というのが典型的な例です。

パソコンで見たとき:紹介の箱が3つ横に並ぶ

スマホで見たとき:同じ箱が縦に積まれる

どちらも同じHTMLで、変わっているのはCSSによる並べ方だけです。

つまりレスポンシブデザインは、中身は1つのまま、見せ方だけを画面に合わせて変える作り方だと覚えておきましょう。

ほかの方式(別URL・動的配信)との違い

スマホ対応の方法はレスポンシブデザインだけではなく、ほかに「別URL」と「動的配信」という方式があり、違いは「URLとHTMLを分けるかどうか」です。

Google検索セントラルのモバイルサイトに関するページでも、スマホ向けのサイトの作り方として、この3つが挙げられています。

方式	URL	HTML	仕組み
レスポンシブデザイン	1つ	1つ	同じHTMLを、画面の幅に合わせてCSSで表示し分ける
動的配信	1つ	端末ごとに別	同じURLで、サーバーが端末の種類を見分けて違うHTMLを返す
別URL	端末ごとに別	端末ごとに別	スマホ用のページを別のURLに用意し、端末に合わせて振り分ける

動的配信や別URLでは、パソコン用とスマホ用の2つのHTMLを用意するので、内容を直すたびに両方を更新する手間がかかります。

サーバーとは、Webページのデータを置いておき、見に来たブラウザに送り返すコンピューターのことで、動的配信ではそのサーバー側に端末を見分ける設定も必要になります。

Googleは同じページで、作るのも管理するのもいちばん簡単な方法として、レスポンシブデザインを推奨しています。

これから新しくサイトを作るなら、まずはレスポンシブデザインを選べば問題ありません。

レスポンシブデザインが必要な理由

レスポンシブデザインが必要なのは、Webサイトを見る画面の大きさが人によってばらばらで、しかもGoogleがスマホでの表示を基準に検索結果を決めているからです。

スマートフォン・タブレット・ノートパソコン・大きなモニターでは画面の幅がまったく違い、さらにスマートフォンだけでも機種によって幅が異なります。

パソコンの幅に固定して作ったページは、スマートフォンでは全体が縮小されて文字が読めないほど小さくなるか、横にはみ出してしまいます。

また、Google検索セントラルによると、Googleはスマートフォン向けに表示されたページの内容を使って、検索結果に載せるページを調べたり順位を決めたりしており、これを「モバイルファーストインデックス」と呼んでいます。

スマホで読みにくいページは、訪れた人にとって使いにくいだけでなく、検索の面でも不利になりかねません。

どんな画面でも読みやすく、管理も1つのHTMLで済むことが、レスポンシブデザインが今のWebサイトの標準になっている理由です。

レスポンシブデザインの作り方(CSSの基本)

ここでは、レスポンシブデザインを作るために最低限知っておきたいHTMLの1行と、CSSの5つの基本を、短いコード例と動く見本で紹介します。

viewportのmetaタグを入れる

レスポンシブデザインの最初の一歩は、HTMLの<head>の中に、viewport(ビューポート)のmetaタグを1行入れることです。

ビューポートとは、ブラウザの中でWebページが表示される範囲のことで、metaタグはページについての設定をブラウザに伝えるためのHTMLのタグです。

この1行がないと、スマートフォンのブラウザは、パソコン向けの広い仮想の画面(たとえば980px幅)でページを表示し、それを画面に収まるように縮小してしまいます(MDNのviewportのmetaタグの解説)。

次の1行を入れると、ページの表示幅が端末の画面の幅にそろい、拡大・縮小されない状態で表示されます。

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

width=device-widthは「表示幅を端末の幅に合わせる」、initial-scale=1は「最初は等倍(100%)で表示する」という意味です。

CSSでどれだけ丁寧にスマホ向けのレイアウトを作っても、この1行がないと使われないので、必ず最初に入れておきましょう。

メディアクエリで画面の幅ごとにCSSを切り替える

画面の幅によってレイアウトを変えたいときは、メディアクエリを使って「画面の幅が○px以上のときだけ、このCSSを使う」という条件を書きます。

メディアクエリは@mediaから始まるCSSの書き方で、画面の幅などの条件に合うときだけ、中に書いたスタイルが使われる仕組みだからです(MDNのメディアクエリの使い方)。

次の例は、紹介の箱をふだんは縦に1列で並べ、画面の幅が768px以上のときだけ3列に並べるCSSです。

/* 基本(スマホ):縦に1列で並べる */
.cards {
  display: grid;
  gap: 16px;
}

/* 画面の幅が768px以上のときだけ、3列に並べる */
@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

min-width: 768pxは「画面の幅が768px以上なら」という意味で、反対にmax-width: 767pxと書くと「767px以下なら」という条件になります。

最近のブラウザでは@media (width >= 768px)のように、不等号で書くこともできます。

このように、レイアウトを切り替える境目の幅を「ブレイクポイント」と呼び、決め方はこのあとの章で詳しく解説します。

幅は%とmax-widthで伸び縮みさせる

ページ全体や箱の幅は、960pxのような固定の数値ではなく、%で指定し、広がりすぎないようmax-width(最大の幅)で上限を決めるのが基本です。

固定の幅にすると、それより狭い画面では横にはみ出し、横スクロールが必要になってしまうためです。

次の例では、本文の入れ物の幅を画面いっぱい(100%)にしつつ、広い画面では1100pxまでで止めて中央に寄せ、左右に16pxの余白をとっています。

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;   /* 左右の余白を自動にして中央に寄せる */
  padding: 0 16px;  /* 画面の端に文字がくっつかないようにする */
  box-sizing: border-box;
}

box-sizing: border-boxは、内側の余白(padding)を含めて幅を計算する指定で、これがないと100%に余白が足されてはみ出すことがあります。

文字の大きさや余白には、pxのほかに、文字サイズを基準にするrem・emや、画面の大きさを基準にするvwなどの単位も使えます。

単位の違いはフォントサイズに使われるrem em 違いとCSS ビューポート単位vw、vh、vmin、vmaxの完全ガイド、画面の大きさに合わせた余白の決め方はPCとスマホの余白の違いとは?で解説しています。

FlexboxとGridで並びを組み替える

要素を横に並べたり、狭い画面で縦に積み替えたりするには、CSSのFlexbox(フレックスボックス)とGrid(グリッド)を使います。

Flexboxは要素を1方向(横または縦)に並べるための仕組み、Gridは縦と横のマス目に要素を配置するための仕組みで、どちらも画面の幅に合わせて並びを自動で調整できるためです(MDNのフレックスボックスの解説・グリッドの解説)。

たとえば次のGridの書き方なら、メディアクエリを使わなくても、「1つの箱の幅が160px未満にならない範囲で、入るだけ横に並べる」という並べ方ができます。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

minmax(160px, 1fr)は「箱の幅は最小160px、余った幅は均等に分ける」、auto-fitは「入るだけの列を自動で作る」という意味です。

次の見本は、このCSSで並べた3つの箱です。

はやい
注文から最短翌日に届きます。

やすい
まとめ買いで送料が無料です。

あんしん
30日以内なら返品できます。

架空の通販サイトの特長の箱。パソコンのブラウザでは、枠の右下の角をドラッグして幅を狭めると、箱が3列→2列→1列に組み替わります。

スマートフォンで見ている場合は、すでに画面の幅に合わせて縦に積まれた状態で表示されているはずです。

何列に分けて並べるかの考え方は2カラムとは?、画面を12本の列に区切って配置を決める方法は12カラムグリッドとは?で解説しています。

画像をはみ出させない(max-width:100%とsrcset)

画像にはmax-width: 100%とheight: autoを指定して、入れ物より大きくならないようにしておきます。

画像は元のピクセル数(画像を作っている点の数)のままの大きさで表示されるので、横幅1200pxの写真をそのまま置くと、スマートフォンの画面からはみ出してしまうためです。

img {
  max-width: 100%;  /* 入れ物の幅より大きくしない */
  height: auto;     /* 縦横の比率を保って高さを決める */
}

さらに、HTMLのsrcset属性を使うと、画面の幅に合わせて、ブラウザに大きさの違う画像を選ばせることができます(MDNのレスポンシブ画像の解説)。

<img
  src="photo-1200.jpg"
  srcset="photo-600.jpg 600w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="写真の説明">

600wは「この画像の横幅は600px」という目印で、sizesには「画面の幅が600px以下なら画面いっぱい(100vw)、それより広ければ画面の半分(50vw)の幅で表示する」という予定を書いています。

こうしておくと、スマートフォンでは小さい画像だけが読み込まれ、通信量と表示までの時間を減らせます。

画像を同じ大きさにそろえる方法はCSSで画像サイズを合わせる方法、画像の縦横の比率はアスペクト比一覧と計算方法、必要なピクセル数の目安は解像度とは?で解説しています。

文字の大きさはclamp()でなめらかに変える

見出しのように大きな文字は、CSSのclamp()を使うと、画面の幅に合わせてなめらかに大きさを変えられます。

clamp(最小値, 基本の値, 最大値)の形で書き、基本の値が最小値と最大値のあいだに収まるように自動で調整される仕組みだからです(MDNのclamp()の解説)。

h1 {
  /* 最小24px、画面の幅の5%を基本に、最大40pxまで */
  font-size: clamp(24px, 5vw, 40px);
}

この例では、スマートフォンでは24px、広い画面では40pxで止まり、そのあいだは画面の幅に合わせて少しずつ変わります。

メディアクエリで切り替えると、ブレイクポイントの前後で文字の大きさが急に変わりますが、clamp()ならその段差がありません。

文字の大きさを画面に合わせる考え方と、clamp()の値の決め方はレスポンシブタイポグラフィとは?で詳しく解説しています。

レスポンシブデザインのブレイクポイントの決め方

ここでは、レイアウトを切り替える幅であるブレイクポイントの目安と、自分のサイトに合った決め方、パソコン上での確認方法を紹介します。

ブレイクポイントとは

ブレイクポイントとは、レスポンシブデザインでレイアウトを切り替える境目の画面の幅のことです。

メディアクエリのmin-width: 768pxの「768px」のように、CSSに書く数値がブレイクポイントにあたります。

英語の「breakpoint」をカタカナにした言葉で、「ブレークポイント」と書かれることもありますが、同じものです。

ブレイクポイントは決まった値があるわけではなく、サイトごとに作る人が決めるものです。

よく使われるブレイクポイントの目安

決まりはないものの、よく使われる幅の目安はあり、最初はそれを出発点にすると迷いにくくなります。

参考として、よく使われるCSSのフレームワーク(よく使う部品やレイアウトのCSSをまとめた道具)の初期値と、Chromeの開発者ツールに用意されている幅を並べると、次のようになります。

参考にしたもの	幅の値
Bootstrap 5.3	576px・768px・992px・1200px・1400px
Tailwind CSS	640px・768px・1024px・1280px・1536px
Chromeのデバイスモード	320px・375px・425px(スマホ)、768px(タブレット)、1024px・1440px(ノートパソコン)

どれにも768pxが入っていることから分かるように、自分で決めるときは、次のような区切り方が出発点としてよく使われます。

画面の幅	主に想定する画面	レイアウトの例
767px以下	スマートフォン	縦に1列で並べる
768px〜1023px	タブレット・小さめのノートパソコン	2列に並べる
1024px以上	ノートパソコン・デスクトップ	3列に並べる・サイドバーを置く

ただし、この表の数値は一例で、「768pxはタブレットの幅」のように端末の名前で覚える必要はありません。

Bootstrapの公式ドキュメントでも、ブレイクポイントは代表的な画面の大きさの一部を表したもので、すべての端末を狙ったものではないと説明されています。

端末ではなく中身が崩れる幅で決める

ブレイクポイントは、特定の機種の画面の幅に合わせるのではなく、自分のページの中身が「読みにくくなる・崩れる」幅で決めるのが基本です。

スマートフォンやタブレットの画面の幅は機種ごとに違い、新しい機種も次々に出るので、機種に合わせて決めても追いつかないためです。

MDNのレスポンシブデザインの解説でも、コンテンツの見た目が悪くなり始めたところでデザインを変える、という考え方が紹介されています。

具体的には、次の手順で決めていきます。

まず、スマートフォンの幅で、縦に1列のレイアウトを作ります。
ブラウザの幅を少しずつ広げながら、表示を見ていきます。
1行が長くなりすぎて読みにくい、箱が横に間延びしている、と感じた幅を記録します。
その幅が、列を増やすなどレイアウトを変えるブレイクポイントの候補です。
候補が多すぎる場合は、近い幅をまとめて2〜3か所に絞ります。
最後に、いちばん狭い画面でも横にはみ出さないかを確かめます。

狭い側の確認の目安には、Webのアクセシビリティ(障害の有無などにかかわらず誰もが使えること)の国際的なガイドラインであるWCAG 2.2の「リフロー」の基準が使えます。

この基準では、横幅320 CSSピクセル(CSSで指定する見た目の大きさの単位)の画面でも、横スクロールなしで内容を読めることが求められています(WCAG 2.2 達成基準1.4.10 リフロー・WAIC日本語訳)。

ブレイクポイントの数を増やすほど確認する画面も増えるので、まずは1〜2か所から始め、必要になったら足していきましょう。

モバイルファーストでmin-widthを足していく

メディアクエリは、まずスマートフォン向けのスタイルを書き、画面が広くなったときの変更をmin-widthで足していく「モバイルファースト」の順番で書くのがおすすめです。

モバイルファーストとは、スマートフォンの小さな画面から先にレイアウトを考え、大きな画面へ広げていく考え方のことです。

シンプルな1列のレイアウトを基本にして、広い画面で列を増やす変更だけを足すほうが、CSSが短く分かりやすくなるためです。

先ほどの.cardsの例のように、ブレイクポイントを2か所にする場合は、次のように書きます。

/* 基本(スマホ):1列 */
.cards {
  display: grid;
  gap: 16px;
}

/* 768px以上:2列 */
@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1024px以上:3列 */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

min-widthで書くときは、小さい幅から大きい幅の順に並べるのがポイントです。

CSSは同じ条件なら後に書いたものが優先されるので、順番を逆にすると、広い画面でも2列のままになってしまいます。

BootstrapやTailwind CSSも、このモバイルファーストの考え方で作られています。

スマホからレイアウトを組み立てる手順はモバイルファーストとは?で、見本を使って解説しています。

Chromeのデバイスモードで確認する

作ったページがいろいろな画面の幅でどう見えるかは、パソコンのChromeにある「デバイスモード」で手軽に確かめられます。

デバイスモードは、Chromeに付いている開発者ツール(DevTools、ページの仕組みを調べるための機能)の一つで、パソコンの画面の中でスマートフォンなどの画面の幅を再現できるためです(Chrome DevToolsのデバイスモードの解説)。

確認したいページをChromeで開き、WindowsならF12キー(またはCtrl+Shift+I)、MacならCommand+Option+Iで開発者ツールを開きます。
開発者ツールの上部にある、デバイスツールバーを切り替えるボタン(Toggle device toolbar)を押します。
表示された画面の端をドラッグするか、幅の欄に数値を入れて、画面の幅を変えながら表示を確かめます。
機種の一覧から選んで、その画面の大きさで表示することもできます。

ただし、デバイスモードはあくまでおおよその再現なので、Chromeの解説でも、最後は実際の端末で確かめることが勧められています。

デバイスモードで幅を一通り確かめたら、手元のスマートフォンでも開き、文字の読みやすさやボタンの押しやすさを指で確かめましょう。

レスポンシブデザインは古い?これからの考え方と注意点

最後に、「レスポンシブデザインは古い」という声への答えと、新しいCSSの機能、レスポンシブ対応で失敗しやすい点をまとめます。

レスポンシブデザインは古い?

レスポンシブデザインという考え方は古くなっておらず、今もWebサイトを作るときの基本です。

Googleが今もスマホ対応の方法としてレスポンシブデザインを推奨しているように、「1つのHTMLを画面に合わせて表示し分ける」という考え方そのものは変わっていないためです。

変わってきたのは実現するための道具で、たとえば「コンテナクエリ」という新しい仕組みが、主要なブラウザで使えるようになっています(MDNの@containerの解説)。

コンテナクエリは、画面全体の幅ではなく、要素を入れている親の箱(コンテナ)の幅に合わせてスタイルを切り替える仕組みです(MDNのコンテナクエリの解説)。

次の例では、カードの入れ物の幅が400px以上のときだけ、カードの中の画像と文章を横に並べています。

/* この箱の幅を基準にできるようにする */
.card-wrap {
  container-type: inline-size;
}

/* 入れ物の幅が400px以上のとき、カードの中身を横に並べる */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 16px;
  }
}

メディアクエリでは、同じカードでも広いメイン部分と狭いサイドバーに置いたときで別々に調整する必要がありましたが、コンテナクエリなら置いた場所の広さに合わせて自動で切り替わります。

この記事で紹介したclamp()やauto-fitのGridも、比較的新しい道具です。

見直されているのは、機種ごとの画面の幅に合わせてブレイクポイントを細かく決め打ちするような作り方で、レスポンシブデザインそのものは、新しい道具を取り入れながら今も使われ続けていると考えましょう。

レスポンシブ対応で気をつけること

レスポンシブ対応をするときに、初心者がつまずきやすい点をまとめます。

viewportのmetaタグを入れ忘れて、スマホ向けのCSSが効かないことがあります。
スマホで表示が縮んで見えるときは、まず<head>の中にこの1行があるかを確かめましょう。
箱や画像にpxの固定の幅を指定して、狭い画面で横スクロールが出てしまうことがあります。
幅は%とmax-widthで指定し、画像にはmax-width: 100%を付けましょう。
列の多い表は、スマホの画面からはみ出しやすい部品です。
表だけを横にスクロールできるようにする方法はCSSでレスポンシブテーブルで紹介しています。
スマホでは画面が狭いからと、パソコン版にある大事な情報を隠してしまうことがあります。
Googleはスマホ版のページの内容で検索結果を決めているので、主要な内容はスマホでも同じように見られるようにしましょう。
パソコンの画面だけを見ながら作り、スマホで初めて崩れに気づくことがあります。
作りながらこまめにデバイスモードで幅を変えて確かめるのが、手戻りを減らす近道です。

レスポンシブデザインのよくある質問

レスポンシブデザインについて、初心者がよく疑問に思う点に答えます。

レスポンシブ対応とは具体的に何をすること?

レスポンシブ対応とは、Webサイトをどの画面の幅でも読みやすく表示されるように作る、または作り直すことです。

具体的には、viewportのmetaタグを入れ、固定の幅を%やmax-widthに置き換え、画像をはみ出さないようにし、メディアクエリで狭い画面向けのレイアウトを用意します。

すでにあるサイトを直す場合は、まずデバイスモードで狭い幅にして、はみ出しや読みにくい部分を洗い出すところから始めましょう。

スマホのブレイクポイントは何pxにすればいい?

決まりはありませんが、迷ったら「767px以下をスマホ、768px以上を広い画面」と分けるところから始めるのが一般的です。

そのうえで、自分のページの中身が崩れる幅を見つけて、ブレイクポイントを調整したり足したりしていきます。

スマホの機種ごとの幅に合わせて細かく分ける必要はありません。

min-widthとmax-widthはどちらを使えばいい?

これから作るなら、スマホ向けを基本にして広い画面の変更を足していくmin-widthがおすすめです。

max-widthは、パソコン向けを基本にして狭い画面の変更を足していく書き方で、すでにパソコン向けに作ったサイトをあとからスマホに対応させるときなどに使われます。

どちらでも作れますが、1つのサイトの中で混ぜると、どの幅でどのCSSが効くのか分かりにくくなるので、どちらかにそろえましょう。

モバイルファーストとレスポンシブデザインの違いは?

レスポンシブデザインは「1つのページを画面に合わせて表示し分ける作り方」、モバイルファーストは「スマホとパソコンのどちらから考えるか」という設計の順番の話です。

この2つは対立するものではなく、レスポンシブデザインのページを、モバイルファーストの順番で作る、という組み合わせがよく使われます。

なお、Googleの「モバイルファーストインデックス」は検索の仕組みの名前で、設計の順番のモバイルファーストとは別のものです。

まとめ

レスポンシブデザインとは、1つのHTMLを画面の幅に合わせてCSSで表示し分け、パソコンでもスマートフォンでも読みやすくする作り方で、Googleも推奨している今のWebサイトの基本です。

作り方の基本は、viewportのmetaタグを入れ、幅を%とmax-widthで伸び縮みさせ、FlexboxやGridで並びを組み替え、画像と文字を画面に合わせることです。

ブレイクポイントは768pxなどの目安から始め、端末の名前ではなく、自分のページの中身が崩れる幅で決め、モバイルファーストでmin-widthを足していきましょう。

まずは自分のサイトやよく見るサイトをChromeのデバイスモードで開き、幅を320pxまで狭めて、どこで崩れるかを確かめてみましょう。

人気の記事

最近の投稿

カテゴリー