ここまでで viewport、media query、相対単位は分かってきました。じゃあ第2章で学んだ Flexbox と Grid は、レスポンシブ対応でどう使い分ければいいんですか？
そこが今回の本題だね。Flexbox と Grid は、レスポンシブ対応の現場で本当に出番が多い。第2章で学んだ並べ方の知識に、画面幅に応じた切り替えを組み合わせるんだ。
つまり、レイアウト技術そのものと、レスポンシブの考え方がここでつながるんですね。
そういうこと。今日は、ナビゲーションやカード一覧のようなよくあるUIを題材にして、実践的に見ていこう。
第2章の知識をどう活かすか
第2章では、Flexboxは一次元の並び、Gridは二次元の面配置に強いと学びました。レスポンシブ対応では、この特徴がそのまま活きます。
- Flexboxが向く場面
- ナビゲーション、ボタン列、カードの一列並びなど、1方向の調整が中心のときです
- Gridが向く場面
- カード一覧、ギャラリー、ダッシュボードのように行と列の両方を整理したいときです
- 組み合わせが基本
- ページ全体は Grid、部品の内部は Flexbox という作り方も多いです
- レスポンシブでは切り替える
- 横並びを縦積みにしたり、列数を増減したりします
横並びと縦並びの切り替えがしやすい
1列の並び順や余白調整に向いている
上下方向の配置や位置合わせを整えやすい
列数を変えながら一覧性を保ちやすい
画像やカードを面で整列しやすい
2カラムや複数領域の構成を管理しやすい
迷ったときの選び方
実際の制作では、「Flexbox でも Grid でも書けそう」に見える場面があります。そんなときは、先に何をそろえたいかを考えると判断しやすいです。
- 一列の流れを整えたい
- ナビ、ボタン列、タグ一覧なら Flexbox を先に考えます
- 面として整列したい
- カード一覧、ダッシュボード、ギャラリーなら Grid を先に考えます
- 外側と内側で分ける
- 外枠は Grid、中の部品は Flexbox という組み合わせが多いです
- 切り替え後の見え方で決める
- スマホで縦積みにしたいなら Flexbox、列数を増減したいなら Grid が扱いやすいです
Flexboxでナビゲーションをレスポンシブにする
まずは、よくあるナビゲーションの例です。広い画面では横並び、狭い画面では縦並びにします。
<header class="site-header">
<h1 class="site-title">Study CSS</h1>
<nav class="site-nav">
<a href="#">ホーム</a>
<a href="#">レッスン</a>
<a href="#">作品</a>
<a href="#">お問い合わせ</a>
</nav>
</header>.site-header {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
border-radius: 16px;
background: #ecfdf5;
}
.site-nav {
display: flex;
flex-direction: column;
gap: 12px;
}
.site-nav a {
padding: 12px 16px;
border-radius: 9999px;
background: #d1fae5;
color: #065f46;
text-decoration: none;
}
@media (min-width: 768px) {
.site-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.site-nav {
flex-direction: row;
flex-wrap: wrap;
}
}※プレビューの右下にあるアイコンをドラッグして、実際の画面幅を動かして切り替えを確認できます。
この例はモバイルファーストで書いています。まず狭い画面向けに縦並びを作り、min-width: 768px 以上で横並びに広げています。スマホで苦しくない形を先に作ると、CSSが整理しやすくなります。
Gridでカード一覧をレスポンシブにする
カード一覧や商品一覧のように、複数の要素を面で並べるなら Grid が便利です。
<section class="lesson-grid">
<article class="lesson-card">HTML基礎</article>
<article class="lesson-card">CSS基礎</article>
<article class="lesson-card">Flexbox</article>
<article class="lesson-card">Grid</article>
<article class="lesson-card">JavaScript</article>
<article class="lesson-card">Astro</article>
</section>.lesson-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.lesson-card {
padding: 24px;
border-radius: 16px;
background: #f0f9ff;
}
@media (min-width: 700px) {
.lesson-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.lesson-grid {
grid-template-columns: repeat(3, 1fr);
}
}この書き方だと、スマホでは1列、タブレットでは2列、PCでは3列になります。画面が広がるにつれて情報量を増やせるので、読みやすさと一覧性のバランスをとりやすいです。
※プレビューの右下にあるアイコンをドラッグして、実際の画面幅を動かして切り替えを確認できます。
auto-fitとminmaxを使う方法
前回学んだように、Grid では repeat(auto-fit, minmax(...)) も使えます。明確に1列、2列、3列と切り替えたいなら media query が分かりやすく、カード幅を基準に自然に増減したいなら minmax が便利です。
- 列数を明示したい
- 1列→2列→3列のように段階を見せたいなら media query が向きます
- 自然に増減したい
- カードの最小幅さえ守れればよいなら
auto-fitとminmaxが向きます
- カードの最小幅さえ守れればよいなら
- 見出しや本文は内部でFlexboxも使える
- カードの中の上下配置は Flexbox のほうが扱いやすいことが多いです
- ページ全体で役割分担する
- 外側 Grid、内側 Flexbox の組み合わせは定番です
レイアウトを設計するときの順番
レスポンシブ実装では、コードを書く前の考え方が重要です。特に初心者のうちは、次の順番で設計すると迷いにくくなります。
- 1. 最小画面を考える
- スマホで何が必要かを先に決めます
- 2. 並び方を選ぶ
- 1方向なら Flexbox、面の整理なら Grid を選びます
- 3. 余白と幅を柔軟にする
%、rem、max-widthを使って窮屈さを減らします
- 4. 必要な幅で拡張する
min-widthの media query で、列数や並びを増やします
よくある失敗
- PC版を先に作り込みすぎる
- そのままスマホに縮めると詰まりやすくなります
- 要素を横に並べすぎる
- 情報量が多いときは縦積みに戻す判断も必要です
- 余白を削りすぎる
- 画面が小さいほど、適度な余白が読みやすさを支えます
- FlexboxとGridを対立で考える
- 実際は使い分けと組み合わせが重要です
小さなレイアウトをまとめて組み立てる
最後に、Flexbox と Grid を組み合わせた小さな例を見ます。ページ全体は Grid、ヘッダー内部は Flexbox です。
<section class="page">
<section class="hero">
<div class="hero-main">特集記事</div>
<aside class="hero-side">人気タグ</aside>
</section>
<section class="card-row">
<article class="card">HTML</article>
<article class="card">CSS</article>
<article class="card">JavaScript</article>
</section>
</section>.page {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.hero {
display: flex;
flex-direction: column;
gap: 16px;
}
.hero-main,
.hero-side,
.card {
padding: 20px;
border-radius: 16px;
}
.hero-main {
background: #ecfdf5;
}
.hero-side {
background: #eff6ff;
}
.card-row {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.card {
background: #f3f4f6;
}
@media (min-width: 900px) {
.hero {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.hero-main {
flex: 2;
}
.hero-side {
flex: 1;
}
.card-row {
grid-template-columns: repeat(3, 1fr);
}
}※プレビューの右下にあるアイコンをドラッグして、実際の画面幅を動かして切り替えを確認できます。
このように、外側と内側で別のレイアウト技術を使うと、レスポンシブ対応の自由度がかなり上がります。第2章の知識は、ここで実践の形になります。
理解度チェッククイズ
FlexboxとGridのレスポンシブ実践クイズ
まとめ
第2章で学んだ Flexbox と Grid が、レスポンシブ対応の中でどう使われるか見えてきました。技術が別々じゃなくて、ちゃんとつながっていたんですね。
スマホ向けを先に考えて、必要になったら横並びや列数を増やす流れが分かりやすかったです。作る順番も大事なんですね。
その理解ができればかなり実践的だよ。レスポンシブ対応は、特別な裏技ではなく、ここまで学んだCSSの知識を整理して組み合わせることなんだ。次のレッスンでも、この考え方を土台に進めていこう。
- Flexboxは一次元
- ナビやボタン列の並び替え、方向変更に向いています
- Gridは二次元
- カード一覧やページ構造など、列と行をまとめて整理しやすいです
- モバイルファースト
- まず小さい画面向けを作り、広い画面で拡張します
- 組み合わせる発想
- 外側 Grid、内側 Flexbox のように役割分担すると設計しやすくなります
ここまでの内容が、第4章後半のモバイルファースト設計やブレークポイント戦略の土台になります。