サイト制作
CSSのminmaxで列幅に上下限を付ける 最小幅と1frの読み方
2026-11-07
この記事には広告・アフィリエイトリンクが含まれます。
グリッドの列幅を柔軟にしたいときに使うminmax。最小値と最大値の役割、狭い画面で確認したい点を説明します。
広がってよい範囲を指定する
グリッドの列幅を固定すると窮屈で、自由に広げるだけでは細くなりすぎる。そんなときに使えるのがminmaxです。最小値と最大値を一組にして、列や行の寸法の範囲を指定できます。
たとえば最小200ピクセル、最大1frという指定は、少なくとも200ピクセルを確保し、残りの空間はフレックス係数に応じて配分する考え方です。1frを単純に画面全体の何分の一と覚えるより、他の列や隙間を考慮した残りの空間を見ると理解しやすくなります。
最小値が大きければ、狭い場所には入らない
二列とも最小200ピクセルなら、列の間の隙間も含めて、それだけの幅が必要です。画面が狭くなっても、minmaxが自動で最小値を無視してくれるわけではありません。必要なら列数や配置を変える設計も考えます。
最小値を0にすると、列自体が小さくなれる範囲を広げられます。ただし、中の長い文字や画像の扱いまで自動で解決するわけではありません。列の寸法と、内容の折り返しは分けて確認しましょう。
最大値と最小値の順にも注意
minmaxは最小値、最大値の順に指定します。最大値が最小値より小さい場合は、最小値が優先されます。また、frは最小値側へ使うことができません。
大きな画面で均等に見えるかだけでなく、狭い表示幅と、長い文字が入った状態を確かめてみてください。上限と下限を決める目的がはっきりすると、調整する値も選びやすくなります。
