CSSの関数はどんどん便利になっている!minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
Post on:2017年6月14日
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。
minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。
下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。
minmax()の基本的な使い方
CSS Grid Layoutで利用できるようになった非常に便利な新機能の1つは、minmax()です。この関数は最小値と最大値の両方を含む関数をグリッドのトラック値として設定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 minmax()の値には、適用する要素の最小値と最大値を指定することができます。Length
minmax()で使用できる最も簡単な値は基本的な長さです。例えば、下記のシンプルなグリッドは3つのセルが1行に配置されています。3つのセル
minmax()を使用して、イエローのセルの幅が100pxから200pxまでに指定できます。
1 2 3 4 |
.grid { display: grid; grid-template-columns: minmax(100px, 200px) 1fr 1fr; } |
ビューポートのサイズを変更
ビューポートのサイズが変更されると、イエローのセルは常にこの2つの制限内で変更されます。2番目と3番目のセルは残りの空きスペースを均等に占め、最初のセルは常に100px〜200pxの幅です。
Percentage
基本的な長さの指定に加えて、minmax()ではパーセントの単位も指定できます。例えば、イエローのセルがグリッドの最大50%を占めるけど、200pxより小さくならないようにしたいとします。
1 2 3 4 |
.grid { display: grid; grid-template-columns: minmax(200px, 50%) 1fr 1fr; } |
Flexible Length
Flexible Lengthは新しい単位で、minmax()と同様に、CSS Grid Layoutの仕様で導入されました。fr単位を使用するこの長さは、グリッドコンテナ内の空きスペース領域の一部を表します。例えば、2つのセルを持つ100px幅のグリッドがあるとします。1つは20pxの固定幅で指定し、もう1つは1frで指定します。この場合、空きスペースは100-20=80pxになるため、もう1つの幅は80pxで表示されます。 現在のところ、fr単位はminmax()の最大値としてしか使用できません︵仕様では最小値にも適用可能予定︶。 では、サンプルを見てましょう。 イエローのセルを最小200pxに設定することを明示します。ビューポートのサイズがそれよりも大きい場合はセルを1frに、他の2つのセルと同じ幅にします。
1 2 3 4 |
.grid { display: grid; grid-template-columns: minmax(200px, 1fr) 1fr 1fr; } |
ビューポートのサイズを変更
すべてのセルはビューポートサイズが大きい場合は1frになるので、グリッド内の同じ量のスペースを共有します。
max-content
キーワードで利用できるmax-contentは、セルの「理想的なサイズ」を表す特殊な値です。セルが可能な最小サイズでありながら、コンテンツの周りに目立たないようにフィットします。例えば、セルのコンテンツがテキストの場合、セルの理想的な幅は長さおよび改行なしにかかわらず、テキストの全長を占めることになります。
イエローのセルにmax-contentを最小値と最大値に指定してみます。
1 2 3 4 |
.grid { display: grid; grid-template-columns: minmax(max-content, max-content) 1fr 1fr; } |
min-content
min-contentもmax-contentと同じようにキーワードで利用できる値です。オーバーフローが避けられない場合を除いて、セルがオーバーフローすることのない最小可能なサイズを表します。 max-contentの違いを説明するために、max-contentと同じように使用してみます。min-contentをminmax()の両方の値に指定します。
1 2 3 4 |
.grid { display: grid; grid-template-columns: minmax(min-content, min-content) 1fr 1fr; } |
auto
最後は、キーワードで利用できるautoです。これはminmax()の最小値または最大値のどちらに使用されるかによって、異なる意味を持ちます。 最大値として使用される場合、autoはmax-content値と同じです。最小値として使用される場合、autoはセルができる最大の最小サイズを表します。この﹁最大の最小サイズ﹂はmin-content値とは異なり、min-width/min-heightで指定されます。 これを説明するために、autoをminmax()の両方の値に指定します。
1 2 3 4 |
.grid { display: grid; grid-template-columns: minmax(auto, auto) 1fr 1fr; } |
ビューポートのサイズを変更
minmax()を使うと、Media Queries無しでレスポンシブデザインができる
ここまで見てきたように、minmax()を使用するのが便利なレイアウトがたくさんあります。しかし、minmaxがもっと最適な場合があります。それはMedia Queries無しでレスポンシブデザインができるということです。
さっそくその例を見てみましょう。
ビューポートのサイズを変更
グリッド内の各カラムの最小幅は200pxです。ビューポートのサイズが変更されると、カラムの数は理想的な幅に合わせて変更されます。
このグリッドはCSS Gridとminmax()を使うと、わずか2行のCSSで作成できます。
1 2 3 4 |
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } |
サポートブラウザ
一部のスマホ用ブラウザを除き、すべてのブラウザにサポートされています。IE, Edgeではベンダプレフィックス︵-ms-︶を加えます。sponsors