Next.jsによるWebアプリケーション開発概論

レスポンシブデザインの基本：画面幅に応じてレイアウトを変える

第6節画面設計基礎：レイアウトを組み、スタイルで整える
Next.jsTailwind CSSアプリ開発開発Web開発

この節でやること

この節でやることは、次の4点です。

  1. スマホ用に作る
  2. 広い画面だけ変える
  3. 横並びと列数を切り替える
  4. 文字サイズと余白も変える

Tailwind CSS は モバイルファースト です。つまり、接頭辞なしのクラスが小さい画面向けの基本で、

md:

や

lg:

を付けると、そこから上の画面幅で上書きされます。

Tailwind の既定ブレークポイントは

接頭辞最小幅
sm40rem
md48rem
lg64rem
xl80rem
2xl96rem

Next.js でも Tailwind CSS をそのまま使えます。

まず覚える形

Rendering diagram…

これがレスポンシブの基本です。

最初から PC 用に作るのではなく、まずスマホで崩れない形を作って、あとから広い画面で広げます。Tailwind はこの考え方に合わせて作られています。

最初に1列で作る

次のコードを app/page.tsx に書いてください。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-4">
      <section className="mx-auto max-w-xl rounded-2xl border bg-white p-4">
        <h1 className="text-2xl font-bold">商品一覧</h1>
        <p className="mt-2 text-sm text-gray-600">
          まずはスマホ向けに1列で作ります。
        </p>

        <div className="mt-6 grid grid-cols-1 gap-4">
          <article className="rounded-xl border p-4">カード1</article>
          <article className="rounded-xl border p-4">カード2</article>
          <article className="rounded-xl border p-4">カード3</article>
        </div>
      </section>
    </main>
  )
}

ここでは grid-cols-1 なので、カードは 1 列です。

これがスマホ用の基本形です。Grid の列数は

grid-cols-*

で指定できます。

手を動かす 1

広い画面だけ2列にする

次のように変えてください。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-4">
      <section className="mx-auto max-w-4xl rounded-2xl border bg-white p-4">
        <h1 className="text-2xl font-bold">商品一覧</h1>
        <p className="mt-2 text-sm text-gray-600">
          広い画面では2列にします。
        </p>

        <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
          <article className="rounded-xl border p-4">カード1</article>
          <article className="rounded-xl border p-4">カード2</article>
          <article className="rounded-xl border p-4">カード3</article>
        </div>
      </section>
    </main>
  )
}

意味はこれです。

  • grid-cols-1 = ふだんは1列
  • md:grid-cols-2 = md 以上で2列
md:

は 48rem 以上で効きます。

覚える形

Rendering diagram…

手を動かす 2

ボタンも並び方を変える

次のコードを打ってください。

export default function Page() {
  return (
    <main className="p-4">
      <div className="flex flex-col gap-3 md:flex-row">
        <button className="rounded-lg border px-4 py-2">保存</button>
        <button className="rounded-lg border px-4 py-2">下書き</button>
      </div>
    </main>
  )
}

これは、

  • スマホでは flex-col で縦並び
  • md: 以上では flex-row で横並び です。
クラス名役割ラベル意味
flex-col縦並び要素を上から下へ並べる
flex-row横並び要素を左から右へ並べる

手を動かす 3

余白も画面幅で変える

画面が広いなら、余白も少し広くした方が読みやすいことがあります。

次のコードを打ってください。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-4 md:p-8">
      <section className="mx-auto max-w-4xl rounded-2xl border bg-white p-4 md:p-8">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600">
          広い画面では余白を少し増やします。
        </p>
      </section>
    </main>
  )
}

ここでは、

  • 小さい画面は p-4
  • 広い画面は md:p-8 です。

Tailwind はレイアウトだけでなく、余白もレスポンシブで変えられます。

手を動かす 4

文字サイズも変える

次のコードを打ってください。

export default function Page() {
  return (
    <main className="p-4">
      <section className="mx-auto max-w-3xl rounded-2xl border bg-white p-4 md:p-8">
        <h1 className="text-2xl font-bold md:text-4xl">お知らせ</h1>
        <p className="mt-2 text-sm text-gray-600 md:text-base">
          画面幅に応じて文字サイズも変えられます。
        </p>
      </section>
    </main>
  )
}

ここでは、

  • 見出しは text-2xl → md:text-4xl
  • 本文は text-sm → md:text-base です。

大きい画面では、少し大きな文字の方が見やすいことがあります。

よく使う形だけ覚える

まずは次の形だけ使えれば十分です。

<div className="grid grid-cols-1 md:grid-cols-2" />
<div className="flex flex-col md:flex-row" />
<div className="p-4 md:p-8" />
<h1 className="text-2xl md:text-4xl" />

これで、

  • 1列 → 2列
  • 縦 → 横
  • 余白を増やす
  • 文字を大きくする ができます。

レスポンシブの入口としてはこれで十分です。

最後に小さな完成を作る

次のコードをそのまま打ってください。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-4 md:p-8">
      <section className="mx-auto max-w-5xl rounded-2xl border bg-white p-4 md:p-8">
        <h1 className="text-2xl font-bold md:text-4xl">ダッシュボード</h1>
        <p className="mt-2 text-sm text-gray-600 md:text-base">
          スマホでは縦、広い画面では横に広がる画面です。
        </p>

        <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-3">
          <article className="rounded-xl border p-4">売上</article>
          <article className="rounded-xl border p-4">注文</article>
          <article className="rounded-xl border p-4">在庫</article>
        </div>

        <div className="mt-6 flex flex-col gap-3 md:flex-row">
          <button className="rounded-lg border px-4 py-2">更新する</button>
          <button className="rounded-lg border px-4 py-2">詳細を見る</button>
        </div>
      </section>
    </main>
  )
}

この画面には、ここまででやったことが全部入っています。

  • p-4 md:p-8
  • text-2xl md:text-4xl
  • grid-cols-1 md:grid-cols-3
  • flex-col md:flex-row ここまで打てたら十分です。

練習問題

問題1

次のコードを、

**スマホでは1列、****md**以上で2列 にしてください。

export default function Page() {
  return (
    <main className="p-4">
      <div className="grid gap-4">
        <div className="border p-4">A</div>
        <div className="border p-4">B</div>
      </div>
    </main>
  )
}

答え

export default function Page() {
  return (
    <main className="p-4">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div className="border p-4">A</div>
        <div className="border p-4">B</div>
      </div>
    </main>
  )
}

解説

grid-cols-1 を基本にして、md:grid-cols-2 を追加しています。

Tailwind は mobile-first なので、まず小さい画面を基準に書きます。

問題2

次のコードを、

**スマホでは縦並び、****md**以上で横並び にしてください。

export default function Page() {
  return (
    <main className="p-4">
      <div className="flex gap-4">
        <button className="border px-4 py-2">保存</button>
        <button className="border px-4 py-2">削除</button>
      </div>
    </main>
  )
}

答え

export default function Page() {
  return (
    <main className="p-4">
      <div className="flex flex-col gap-4 md:flex-row">
        <button className="border px-4 py-2">保存</button>
        <button className="border px-4 py-2">削除</button>
      </div>
    </main>
  )
}

解説

flex-col を基本にして、md:flex-row を追加しています。

小さい画面では縦の方が詰まりにくいです。

問題3

次のコードを、

**小さい画面では余白 p-4、広い画面では **p-8 にしてください。

export default function Page() {
  return (
    <main>
      <section className="border">内容</section>
    </main>
  )
}

答え

export default function Page() {
  return (
    <main className="p-4 md:p-8">
      <section className="border p-4 md:p-8">内容</section>
    </main>
  )
}

解説

余白もレスポンシブで切り替えられます。

画面が広いときは、少し余白を広げた方が読みやすいことがあります。

まとめ

レスポンシブデザインの基本は、最初にスマホ用を作って、広い画面だけ少し変える ことです。

Tailwind CSS では、接頭辞なしが基本で、md: などを付けて上書きします。

Next.js の中でもこの書き方はそのまま使えます。よく使うのは次の4つです。

  • grid-cols-1 md:grid-cols-2
  • flex-col md:flex-row
  • p-4 md:p-8
  • text-2xl md:text-4xl 今日はこれだけで十分です。
変化の内容小さい画面広い画面例
列数1列2列grid-cols-1 md:grid-cols-2
並び方向縦並び横並びflex-col md:flex-row
余白狭い余白広い余白p-4 md:p-8

この3つが分かれば、レスポンシブの入口はもうできています。

前の節コンポーネント単位のスタイリング：部品ごとに見た目を整える次の節視認性と可読性を高めるUI設計。読みやすく操作しやすい画面にする
教材トップへ戻る