フルードグリッドとレスポンシブ画像

media queryで切り替える方法は分かってきました。でも、毎回細かく分岐しないといけないなら大変そうです。

そこで役立つのが、最初から伸び縮みしやすいレイアウトにする考え方だよ。それがフルードグリッドとレスポンシブ画像なんだ。

画面幅で切り替える前に、そもそも自然に変化しやすくしておくんですね。

そうだね。切り替えは大事だけれど、それだけに頼ると管理が増えやすい。今日は % や rem、max-width を使って、崩れにくい土台を作る方法を学ぼう。

固定幅とフルードレイアウトの違い

フルードレイアウト は、画面幅に合わせて要素の大きさが自然に変わるレイアウトです。反対に、width: 960px; のような固定幅は、ある画面ではちょうどよくても、別の画面では窮屈になりやすいです。

固定幅の例

固定幅のレイアウト例

.container {
    width: 960px;
    margin: 0 auto;
}

.card {
    width: 300px;
}

フルードな例

伸び縮みしやすいレイアウト例

.container {
    width: min(92%, 1100px);
    margin: 0 auto;
}

.card {
    width: 100%;
}

こちらは、画面が狭いときは 92% を使い、広いときは 1100px を上限にします。こうすると、要素が必要以上に広がりすぎず、小さい画面にも収まりやすくなります。

固定幅

幅が小さい画面に合わせにくい

はみ出す

width: 960px のような固定値に頼りすぎると苦しい

フルード

画面に合わせて自然に収まる

ぴったり収まる

min や％を使うと、広すぎず狭すぎない幅にしやすい

相対単位を使って柔軟にする

レスポンシブ対応では、px をまったく使ってはいけないわけではありません。ただ、何でも固定値にしないことが重要です。

よく使う単位

%
- 親要素に対する割合で、横幅の指定でよく使います
rem
- ルート要素の文字サイズを基準にした単位で、余白や文字サイズの調整に便利です
vw
- 画面幅を基準にした単位で、大きな見出しやヒーローエリアで使うことがあります
px
- 細かな線や影など、固定が必要な場面で今でも使います

remが使いやすい理由

rem は、通常ブラウザの基準文字サイズをもとに計算されます。たとえば 1rem が 16px なら、1.5rem は 24px です。サイズ感をそろえやすく、あとで全体調整もしやすくなります。

相対単位を使った余白と文字サイズ

.card {
    padding: 1.25rem;
    border-radius: 0.75rem;
}

.card-title {
    font-size: 1.5rem;
}

max-widthと画像の扱い

画像は、レスポンシブ対応で特に崩れやすい要素です。HTMLの画像そのものが大きくても、CSSで親要素に収まるようにしておくと扱いやすくなります。

基本のレスポンシブ画像

HTML

<article class="profile-card">
  <img src="/src/assets/images/css/chapter4/heckimg-tree-7619791_1280.jpg" alt="自然風景の写真">
    <h3>デザインメモ</h3>
    <p>画像は枠に収まるようにしつつ、情報は読みやすい幅に保ちます。</p>
</article>

CSS

.profile-card {
    width: min(100%, 420px);
    padding: 1rem;
    border-radius: 1rem;
    background: #ffffff;
}

.profile-card img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

プレビュー:

※プレビューの右下にあるアイコンをドラッグして、実際の画面幅を動かして切り替えを確認できます。

画像を親要素からはみ出させたくないときは、まず max-width: 100%; と height: auto; の組み合わせを覚えると分かりやすいです。これで横幅は親に収まりやすくなり、縦横比も保ちやすくなります。display: block; は画像の下にできる小さなすき間を抑えたいときに便利です。

画像をきれいに見せる補助

display: block
- 画像の下にできる余白を防ぎやすくなります
border-radius
- カードデザインになじみやすくなります
object-fit
- 高さを固定したいときに、画像の見せ方を調整できます
読みやすい最大幅
- 画像を大きくしすぎないことで、文章とのバランスを保てます

フルードグリッドを作ってみよう

複数カードを並べるときも、固定列数にするだけでは苦しくなります。ここでは、狭い画面では1列、広い画面では複数列になるレイアウトを作ります。

HTML

<section class="card-grid">
    <article class="card-item">HTML</article>
    <article class="card-item">CSS</article>
    <article class="card-item">JavaScript</article>
    <article class="card-item">Astro</article>
</section>

CSS

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.card-item {
    padding: 1.25rem;
    border-radius: 1rem;
    background: #f0fdf4;
    text-align: center;
}

プレビュー:

※プレビューの右下にあるアイコンをドラッグして、実際の画面幅を動かして切り替えを確認できます。

この repeat(auto-fit, minmax(180px, 1fr)) は少し長く見えますが、意味は整理できます。

180px未満にはしない
- それより狭いとカードが読みにくくなるからです
入るだけ列を増やす
- 横幅に余裕があれば 2列、3列と増えていきます
余った幅は均等に配る
- 1fr によって、各カードが自然に広がります

media query を使わなくても、ここまで柔軟に変化できます。つまり、切り替える技術と、自然に伸び縮みする技術の両方を持つことが大切です。

width と max-width の役割を分けて考える

ここは混ざりやすいところです。width は「このくらいの幅で見せたい」、max-width は「ただしこれ以上は広がりすぎないようにしたい」という役割で考えると整理しやすくなります。

役割を分けて考える例

.content {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.hero-image {
  width: 100%;
  max-width: 100%;
  height: auto;
}

width
- 基本の広がり方を決めます。100% なら親要素に合わせやすいです
max-width
- 広がりすぎの上限を決めて、本文や画像が大きくなりすぎるのを防ぎます
margin: 0 auto
- 最大幅を決めたあとに中央寄せしやすくなります
height: auto
- 画像の縦横比を保ちやすくなります

この整理ができると、本文エリア、カード、画像で「どこまで広げてよいか」を考えやすくなります。

相対単位

％や rem を使うと、幅や余白を画面サイズに合わせて調整しやすいです。

max-width

広い画面では広がりすぎず、小さい画面では親要素に収まりやすくできます。

レスポンシブ画像

max-width: 100% と height: auto を組み合わせると、画像が枠からはみ出しにくくなります。

minmax

読める最低幅を守りながら、余った幅で列数を自然に増減できます。

理解度チェッククイズ

フルードグリッドと画像クイズ

フルードレイアウトの特徴として最も適切なのはどれですか？

常に960pxで固定される

画面幅に応じて自然に伸び縮みする

スマホでは表示できない

画像だけに使う技術である

画像が親要素からはみ出しにくくする基本的な指定はどれですか？

width: 400px;

max-width: 100%;

position: absolute;

float: left;

`repeat(auto-fit, minmax(180px, 1fr))` の考え方として正しいものはどれですか？

必ず4列に固定する

180pxより狭いカードを優先して作る

入るだけ列を増やしつつ、各列は一定以上の幅を保つ

Gridを使わずFlexboxに自動変換する

`rem` を使う説明として最も適切なのはどれですか？

画像専用の単位である

ルート要素の文字サイズを基準にした単位である

必ず画面幅と同じ値になる単位である

Grid でしか使えない単位である

本文エリアで `width: 100%; max-width: 720px; margin: 0 auto;` と書く主な意図はどれですか？

常に720pxより小さくしなければエラーになるようにする

親幅には合わせつつ、広がりすぎるのを抑えて中央に配置する

高さを自動で720pxに固定する

画像だけに適用する特殊な書き方である

まとめ

media query だけじゃなくて、最初から伸び縮みしやすい指定にしておくのが大事なんですね。

% や rem、max-width を使う理由が分かりました。Gridの minmax も、読みやすさを守るための仕組みなんですね。

その通り。次はいよいよ、第2章で学んだ Flexbox と Grid をレスポンシブ実践に結びつけよう。並べ方の技術と、今学んだ柔軟なサイズ指定を合わせると、一気に実用的になるよ。

フルードグリッドと画像のポイント

固定幅を減らす
- 画面差に弱い指定を減らし、伸び縮みしやすい土台を作ります
相対単位を使う
- % や rem を使うと、幅や余白を柔軟に調整しやすくなります
画像は親に収める
- max-width: 100%; はレスポンシブ画像の基本形です
Gridのminmaxが便利
- 最低幅を守りながら、列数を自然に増減できます

次回は、FlexboxとGridを使って、実際のレスポンシブレイアウトを組み立てます。