CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。

minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。

下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。

How the minmax() Function Works

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• minmax()の基本的な使い方
• minmax()を使うと、Media Queries無しでレスポンシブデザインができる
• サポートブラウザ

minmax()の基本的な使い方

CSS Grid Layoutで利用できるようになった非常に便利な新機能の1つは、minmax()です。この関数は最小値と最大値の両方を含む関数をグリッドのトラック値として設定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。

minmax()の値には、適用する要素の最小値と最大値を指定することができます。

指定されている最大値が実際の最小値より小さい場合は無視され、純粋に最小値を示すものとして扱われます。

この値には、6種類の値を利用できます。

• Length（px単位）
• Percentage（%単位）
• Flexible Length（fr単位）
• max-content
• min-content
• auto

それぞれの利用例を見てみましょう。

Length

minmax()で使用できる最も簡単な値は基本的な長さです。例えば、下記のシンプルなグリッドは3つのセルが1行に配置されています。

3つのセル

minmax()を使用して、イエローのセルの幅が100pxから200pxまでに指定できます。

ビューポートのサイズを変更

ビューポートのサイズが変更されると、イエローのセルは常にこの2つの制限内で変更されます。2番目と3番目のセルは残りの空きスペースを均等に占め、最初のセルは常に100px〜200pxの幅です。

Percentage

基本的な長さの指定に加えて、minmax()ではパーセントの単位も指定できます。例えば、イエローのセルがグリッドの最大50％を占めるけど、200pxより小さくならないようにしたいとします。

ビューポートのサイズを変更

ビューポートのサイズがどれだけ小さくても200pxより小さくなることはなく、スペースがあれば最大で50%を占めます。

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つのセルと同じ幅にします。

ビューポートのサイズを変更

すべてのセルはビューポートサイズが大きい場合は1frになるので、グリッド内の同じ量のスペースを共有します。

max-content

キーワードで利用できるmax-contentは、セルの「理想的なサイズ」を表す特殊な値です。セルが可能な最小サイズでありながら、コンテンツの周りに目立たないようにフィットします。例えば、セルのコンテンツがテキストの場合、セルの理想的な幅は長さおよび改行なしにかかわらず、テキストの全長を占めることになります。

イエローのセルにmax-contentを最小値と最大値に指定してみます。

ビューポートのサイズを変更

上記のように、セルのサイズは文字列の全長に合わせて拡大されます。最小値と最大値の両方にmax-contentが指定されているため、列の幅は変わりません。

min-content

min-contentもmax-contentと同じようにキーワードで利用できる値です。オーバーフローが避けられない場合を除いて、セルがオーバーフローすることのない最小可能なサイズを表します。

max-contentの違いを説明するために、max-contentと同じように使用してみます。min-contentをminmax()の両方の値に指定します。

ビューポートのサイズを変更

オーバーフローを起こすことなく、可能な限り水平方向のスペースを最小限に抑えるために、セル内のコンテンツがシフトされていることが分かります。

auto

最後は、キーワードで利用できるautoです。これはminmax()の最小値または最大値のどちらに使用されるかによって、異なる意味を持ちます。

最大値として使用される場合、autoはmax-content値と同じです。最小値として使用される場合、autoはセルができる最大の最小サイズを表します。この「最大の最小サイズ」はmin-content値とは異なり、min-width/min-heightで指定されます。

これを説明するために、autoをminmax()の両方の値に指定します。

ビューポートのサイズを変更

minmax()を使うと、Media Queries無しでレスポンシブデザインができる

ここまで見てきたように、minmax()を使用するのが便利なレイアウトがたくさんあります。しかし、minmaxがもっと最適な場合があります。それはMedia Queries無しでレスポンシブデザインができるということです。

さっそくその例を見てみましょう。

ビューポートのサイズを変更

グリッド内の各カラムの最小幅は200pxです。ビューポートのサイズが変更されると、カラムの数は理想的な幅に合わせて変更されます。
このグリッドはCSS Gridとminmax()を使うと、わずか2行のCSSで作成できます。

minmax()以外に、このコードには2つの重要なポイントがあります。

• repeat()

  この関数はグリッド内の複数のカラムに対して同じ値を指定でき、繰り返す回数と繰り返す値の2つの値を受け取ります。

• auto-fit

  このキーワードはrepeat()で繰り返し使用することができます。これにより、各カラムの幅に基づいて使用されるカラムの数が柔軟に変更されます。

このテクニックの重要なポイントは、各カラムの幅が等しい場合にのみ機能することです。auto-fitキーワードをrepeat()で使用する必要があり、これはカラムの数を柔軟にするためです。
同じ幅のセルを配置する場合には、非常に有用なテクニックだと思います。

サポートブラウザ

一部のスマホ用ブラウザを除き、すべてのブラウザにサポートされています。IE, Edgeではベンダプレフィックス（-ms-）を加えます。

CSS Grid Layoutの各ブラウザのサポート状況

How the minmax() Function Works