「スマホで見ると崩れる」「タブレットだけ変」「画面サイズごとにCSSを書き足していたらグチャグチャ…」
そんな経験ありませんか？😅
この記事では、ブレイクポイントをほとんど使わずに、画面サイズに合わせてキレイに伸び縮みするレイアウトの作り方をまとめます。主役は gap と clamp、そしてサポート役の min と max。この4つを覚えるだけで、CSSが驚くほどスッキリします。
📌 この記事でわかること
min()max()clamp()の違いと使い分け- gap × clamp の組み合わせでCSSを激減させる方法
- コンテナ・サイドバーを可変にする実践コード
【基本編】min・max・clamp の3兄弟を覚えよう
まずは主役の3つを紹介します。名前が似てて混乱しやすいので、イメージで覚えるのがコツです😊
🔵 min() は「最大の天井」を決める
カッコの中から一番小さい値を選びます。結果として「これ以上大きくならない天井」を作れます。
width: min(95%, 1000px);
→ 画面が広い時は1000pxで止まる（天井）
🔴 max() は「最小の床」を決める
カッコの中から一番大きい値を選びます。結果として「これ以上小さくならない床」を作れます。
width: max(30%, 200px);
→ 画面が狭くても200pxは確保する（床）
🟢 clamp() は「下限・推奨・上限」の3点セット
min と max をいっぺんに指定できる万能関数。「最小値・推奨値・最大値」の順で書きます。
font-size: clamp(16px, 2vw, 24px);
→ 16pxを下限、24pxを上限にして、間は画面幅に連動
💡 覚え方のコツ
・min()は「これ以上大きくしたくない」→ 上限
・max()は「これ以下小さくしたくない」→ 下限
名前と逆のイメージで覚えると混乱しにくいです😊
よく使う単位
| 単位 | 意味 |
|---|---|
1rem | ルート要素（html）のフォントサイズ基準 |
1em | その要素のフォントサイズ基準 |
1vw | ビューポートの横幅の1% |
1vh | ビューポートの高さの1% |
1vmin | ビューポートの短い方の辺の1% |
1vmax | ビューポートの長い方の辺の1% |
※ vmin と vmax は、スマホを横向きにしても縦向きにしても同じサイズになるので便利です。
【gap編】今いちばん使える「gap × clamp」の組み合わせ
ここがこの記事の主役です💪
gap って何？
gap は、Flexbox や Grid の子要素どうしのすき間を決めるプロパティです。行と列、両方のすき間を一括で指定できます。
gap は row-gap（行間）と column-gap（列間）の一括指定。
値を1つだけ書くと、行と列の両方に同じ値が適用されます。
❌ 昔ながらの書き方（margin地獄）
gap が使えなかった時代は、こんな風に書いていました：
/* 昔のコード */
.item {
margin-right: 16px;
margin-bottom: 16px;
}
.item:last-child {
margin-right: 0; /* 最後だけ右マージン消す */
}
@media (max-width: 768px) {
.item {
margin-right: 8px;
margin-bottom: 8px;
}
}擬似クラス :last-child で最後の要素だけ調整したり、メディアクエリで画面サイズごとに書き直したり…コードが長くなる原因でした😅
✅ gap: clamp() で1行解決
今はこれだけでOKです：
.container {
display: flex;
gap: clamp(8px, 2vw, 24px);
}画面が狭い時は8px、広い時は24px、間は画面幅に連動して自動で調整されます。メディアクエリも :last-child もいりません✨
gap × min / max / clamp の使い分け早見表
| 書き方 | こんな時に使う |
|---|---|
gap: max(16px, 3%) |
最低限の余白を確保したい （狭くても16pxは空ける） |
gap: min(32px, 5vw) |
広がりすぎを防ぎたい （広くても32pxまで） |
gap: clamp(8px, 2vw, 24px) |
上限と下限を両方決めたい （迷ったらコレ） |
【実例編】コンテナとサイドバーを可変にする
基本がわかったところで、実際のレイアウトに落とし込んでみましょう😊
コンテナの可変パターン
コンテナとは、ページ内でコンテンツが収まる範囲のことです。代表的な可変パターンは2つあります。
パターン① 最大幅を決めて中央寄せ
画面が広くなっても、コンテナは1000pxで止まる王道スタイル。
.container {
width: min(95%, 1000px);
margin: 0 auto;
}✅ ブログ記事や一般的なサイトに最適
パターン② 画面幅に合わせて収縮
左右に余白を空けつつ、画面幅いっぱいに広がるスタイル。
.container {
padding: 0 5vw;
}✅ ギャラリーやダッシュボード系に最適
サイドバーの可変
サイドバーは、スマホ・タブレット縦ではメインの下に回り込ませて1カラムにするのが一般的です。ここも昔はブレイクポイントでガシガシ切り替えていましたが、今は max() ひとつで済みます。
.content {
display: flex;
gap: clamp(16px, 3vw, 32px);
}
aside {
width: max(30%, 200px); /* 最低200pxは確保 */
}
main {
flex-grow: 1; /* 残りを全部使う */
}💡 ポイント
・aside の幅は画面が広い時は30%、狭い時でも200pxは確保
・main は flex-grow: 1 で残りスペースを全部使う
・gap は 親のコンテナに設定する（サイドバーが右でも左でも関係なし）
サイドバーを下に回り込ませる時だけ、ブレイクポイントを使う
完全にブレイクポイントを無くすのは難しいです。「スマホでは縦積みにしたい」みたいなレイアウトの組み方そのものを変えたい時は、メディアクエリの出番です。
.content {
display: flex;
flex-direction: row;
gap: clamp(16px, 3vw, 32px);
}
/* タブレット縦以下では縦積みに */
@media (max-width: 1024px) {
.content {
flex-direction: column;
}
aside {
width: 100%;
}
}大事なのは、「サイズ」ではなく「並び方」が変わる時だけブレイクポイントを使うことです😊
【応用編】clamp のつかいどころ
clamp() は gap 以外でも大活躍します。「画面サイズに合わせて滑らかに変化してほしい」ところ全部に使えます。
フォントサイズを画面幅に連動させる
キャッチコピーや見出しで特に便利です。
h1 {
font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
}💡 なぜ真ん中が 1rem + 3vw なの？
3vw だけだと、ブラウザの文字サイズ拡大機能（Ctrl+プラス）が効かなくなります。rem を足しておくと拡大に対応できるので、アクセシビリティ的にもおすすめです😊
padding や margin にも使える
.section {
padding: clamp(24px, 5vw, 80px) 0;
}セクション間の余白も、画面に合わせて自然に伸び縮みします。
clamp を簡単に作れるツール
毎回数値を考えるのは面倒なので、ジェネレーターを使うのがおすすめです。
🔗 Min-Max Calculator
最小画面幅・最大画面幅・最小フォント・最大フォントを入力するだけで、clamp() の記述が自動生成されます。
まとめ｜これだけ覚えればOK
🎯 今日のポイント
- min() = 天井を決める →「これ以上大きくしない」
- max() = 床を決める →「これ以下には小さくしない」
- clamp() = 下限・推奨・上限の3点セット（迷ったらコレ）
- gap × clamp で、要素のすき間を画面サイズに連動させる
- ブレイクポイントは「並び方が変わる時」だけ使う
2022年頃まではIEや古いSafariへの対応でややこしいコードを書く必要がありましたが、2026年の今はもうシンプルに書いてOKです✨
gap や clamp を使いこなせると、CSSが半分くらいの量になりますよ😊