【パターン別】min() / max() / clamp() 使い分けCSS関数リファレンス

レスポンシブでコーディングをするとき、便利につかえるCSS関数。特に、min() max() clamp()の3つは、画面サイズに応じて、文字サイズや幅、余白などを調整するのに重宝します。しかしこの3つの関数、どこに何を指定すればよいのか、指定したけど思い通りに動いてくれない、と悩んだりうまくいかないことも多いです。

今回は、実際によく使うパターン別に、CSS関数の指定方法を解説していきたいと思います。関数とあわせて、幅の上限と下限を指定できる「max-width」と「min-width」も紹介していきたいと思いますが、このCSS関数が理解しづらいポイントが2つあります。1つめは、上限を指定したいときは「min()」か「max-width」、下限を指定したいときは「max()」か「min-width」と、プロパティの英語が反対になるところです。

2つめは、PCを基準にしたときの考え方と、スマホを基準にしたときの考え方で、解釈のしかたが変わるというところです。挙動はまったく同じですが、どちらを先にコーディングするかによって、理解のしかたが変わります。

リファレンスでは、サイト制作でよく使われるパターンを、PCファーストでの考え方、スマホファーストでの考え方で、それぞれ分けてまとめました。ご自身が普段されているやり方の解説を参考にしてください。

紹介したパターンでは、直感的に理解がしやすいように「PCのとき」「スマホのとき」と表記していますが、実際には「画面幅が広いとき」「画面幅が狭いとき」で、画面幅に応じたシームレスな挙動になります。
関数名からは、WEB開発者向けサイト「MDN」の詳細ページへリンクしています。詳しい指定方法などをお知りになりたい方は「MDN」にてご確認ください。

CSS関数リファレンス

横幅の上限や下限を指定する際の注意点

特に、横幅の上限や下限を指定した場合、配置や画面の挙動でいくつか注意したいポイントがあります。

min()、max-widthでコンテンツ横幅制御

min()とmax-widthは、コンテンツ全体の横幅の指定で使われることが多いです。PCなど横幅が広い画面では、コンテンツ全体を固定の幅で表示したい、タブレットやスマホなど横幅が狭い画面では、画面にあわせた大きさ（画面いっぱいの幅）で表示したい、というときには、対象の要素に対して下記の指定をすれば実現できます。

/** PCでコンテンツの最大幅を1200pxにする場合の指定 **/
width: min(1200px, 100%);

/** または、**/
width: 100%;
max-width: 1200px;

/** ブロック要素の場合は、基本的には width: 100% が効いている状態なので
width: 100%; は指定しなくても可 **/

ただ、上記を指定した要素がdivタグなどのブロック要素の場合は、画面の左側に寄って表示されてしまいます（ブロック要素の特性です。詳しくはこちら）。横幅を制御しつつ、画面の左右中央に配置したい、さらに、画面いっぱいに表示されたときに、画面の左右に余白をつけたいという場合は、

/** PCでコンテンツの最大幅を1200pxにする場合の指定 **/
width: min(1200px, 100%);
margin-inline: auto;
padding-inline: 20px;

/** または、**/
max-width: 1200px;
margin-inline: auto;
padding-inline: 20px;

/**
margin-inline と padding-inline は、左右マージン・パディングを一括指定できるプロパティ。
margin: 0 auto;
margin: 0 20px;
でも可
**/

と、マージンやパディングと組み合わせて指定すると便利です。

max()、min-widthで表組（table）の下限幅指定

tableタグで表組をつくった場合、スマホなどの横幅が狭い画面では、セル内の文字が数文字ごとに改行されてしまって見づらくなるケースがあります。また、画像を配置したときも、横幅が狭い画面では縮小されすぎて見づらくなるケースもあります。このようなケースでは、max()やmin-widthを使って、指定したサイズより小さくさせないようにすることができます。

ただ、指定した下限幅のサイズが、画面の横幅より大きくなった場合は、とうぜん画面からはみだして表示されることになります。この状態だと、画面全体に横スクロールが表示されたり、または、はみ出した部分が見えない状態になってしまいます。

これを防ぐには、下記のように、下限幅を指定した要素をdivなどで囲い、その要素に対して「overflow-x: auto;」を指定します。これで、画面より大きくなった場合も、その部分だけが横スクロールで表示されるようになります。

<div class="table-wrap">
    <table class="table-sample">
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
            <th>見出し3</th>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
    </table>
</div>

/** .table-sample の下限幅を640pxにする場合の指定 **/
.table-wrap {
    overflow-x: auto;
}
.table-sample {
    width: max(100%, 640px);

    /** または、**/
    width: 100%;
    min-width: 640px;
}

使いこなせばレスポンシブが楽ちん！

この3つのCSS関数を理解して使いこなせるようになれば、これまでメディアクエリでブレイクポイントごとに指定しなおしていた文字サイズや横幅が、1つの指定でできるようになります。

今回ご紹介しませんでしたが、画面全体の左右余白をPCのときには広く（固定）、タブレットやスマホのときには狭く（画面幅にあわせて縮小）したいなら、

/** 画面が広いときは左右に80pxの余白、
画面が狭くなったら画面の6.4%（横幅 375pxの画面で24px）の余白 **/
padding-inline: min(80px, 6.4vw);

と指定すれば、画面サイズごとにCSSを書き換える必要もなくなります（下限を設けたいならclamp()で指定）。これは、要素間のgapなどでももちろん使えます。

実際に使うパターンはそれほど多くありませんので、まずはよく使うパターンでしっかり使いこなせるように挑戦してみてください。

いつでもご相談ください！

ナカナカデザインラボでは、WEBサイト制作に必要なスキルが学べる「WEBデザインスキル講座」や、WEBにまつわることなら何でも相談OK「フリーレッスン」を、随時受け付けています。

フリーランス歴約20年の現役WEBデザイナー兼WEBデザイン講師が、分かりやすく解説をしながら、マンツーマンでレッスンを行います。プログラミングは苦手だけどWEBデザインをしてみたい、ひとりで書籍や動画教材を見てもよく分からない、自分のペースで学習を進めたい。どんな方でも大丈夫！ぜひ一度ご相談ください。