こんにちはアイレット株式会社デザイン事業部の工藤です。
今日も元気にInside UI/UXのテーマで執筆していきたいと思います！

さて2022年現在のwebはかつてなくデバイスサイズが多様化しており、フロントエンド開発者を悩ませています。
高精細な大型PCディスプレイ、レガシーなPC、iPad Proなど大型タブレット、iPad miniなど小型タブレット、iPhone XRなどの大型スマホ、iPhone SEなどの小型スマホなどかなりの多様性があります。
これだけのデバイスサイズに対応したレスポンシブwebデザインを実現するのは非常に困難なです。レスポンシブwebデザインが登場した2010年頃と同じようにCSSメディアクエリを中心に対応しようとすると、多数のブレイクポイントによる条件分岐が発生してしまい、見通しが悪いCSSコードが出来上がってしまいます。
ですから、モダンなCSSを書くにあたってはデバイスサイズを考慮しないつまりCSSメディアクエリをなるべく使わないアプローチをマスターすることが求められています。
このデバイスサイズを考慮しない思想のことを専門的には「コンテンツベース（content based CSS）」といいます。

/*レスポンシブ対応のために肥大化したCSSコードの例*/
/*SP*/
.element{
    font-size: 16px;
}
/*Tablet*/
@media (min-width: 768px) { 
    .element{
        font-size: 24px;
    }
}

/*PC*/
@media (min-width: 992px) { 
    .element{
        font-size: 32px;
    }
}

/*Large PC*/
@media (min-width: 1200px) { 
    .element{
        font-size: 36px;
    }
}

というわけでコンテンツベースなレイアウトに役立つCSSプロパティを学んでいきましょう。まずは layout: grid; です。

layout: grid;

実際のコードを見る方がわかりやすいです。Codepenのウィンドウサイズを変化させてみてください。

 <ul class="grid">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
</ul>

.grid {
  --auto-grid-min-size: 16rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 1rem;
}

.grid li {
  padding: 5rem 1rem;
  text-align: center;
  font-size: 1.2rem;
  background: #eb4d4b;
  color: #ffffff;
}

See the Pen
content based layout using layout: grid; by Hibiki Kudo (@h_kudo)
on CodePen.

https://cpwebassets.codepen.io/assets/embed/ei.js
このように layout: grid; はコンテンツベースレイアウトを強力に支援します。

min() / max() / clamp()

さらに新しいCSS関数プロパティである min() / max() / clamp() を使えば、フォントサイズやボックスサイズでコンテンツベースなレイアウトを実現しやすくなります。
まずはそれぞれの機能を見てみましょう。

  • clamp()は、基本となる推奨値、そして最小値と最大値と3つの数値を設定します。
  • min()はclamp()に似ているが、最小の値のみを定義します。
  • max()はmin()とは逆に最大の値のみを定義します。

width プロパティに min() / max() / clamp() を指定すれば、 max-width min-width が不要になります。
うまく利用してブレークポイント / メディアクエリを定義せずに、レスポンシブなレイアウトが実現してみましょう！

<h2 class="clamp-title">可変する文字サイズ</h2>
<div class="css-min">CSS Min() </div>
<div class="css-max">CSS Max()</div>
<div class="css-clamp">CSS Clamp() </div>

.clamp-title {
  font-size: clamp(12px, 5vw, 32px);
}
.css-min {
  background-color: #ffea00;
  width: min(50vw, 500px);
  height: 6rem;
}

.css-max {
  background-color: #88ff00;
  width: max(50vw, 500px);
  height: 6rem;
}

.css-clamp {
  background-color: #00ffd9;
  width: clamp(400px, 60vw, 700px);
  height: 6rem;
}

See the Pen
Untitled by Hibiki Kudo (@h_kudo)
on CodePen.

https://cpwebassets.codepen.io/assets/embed/ei.js

いかがでしたか？多くの場合は今までと同様にメディアクエリ @media を利用したCSSの実装方法で対応できるでしょう。とはいえ、多数のブレイクポイントによる条件分岐で見通しが悪いCSSコードを排除し、メディアクエリなしでコンテンツベースなレスポンシブレイアウトを実現することができれば最高にクールですよね?

P.S. アイレットではエンジニア、デザイナーを募集しています。詳しくは採用情報のページをご覧ください。