Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

このページは Cloud Translation API によって翻訳されました。

マイクロレイアウト

レイアウトについて考えるときは、ページレベルのデザインがよく思い浮かびます。ただし、ページ内の小さなコンポーネントには、独自の自己完結型レイアウトがあります。

これらのコンポーネントレベルのレイアウトは、ページ上の位置に関係なく自動的に調整されるのが理想的です。コンポーネントがメインコンテンツ列、サイドバー、またはその両方に配置されるかどうかわからない場合もあります。コンポーネントの最終的な配置先が不明な場合、コンポーネントがコンテナに合わせて自動的に調整されるようにする必要があります。

幅の広い 2 つの列と幅の狭いレイアウト。メディアオブジェクトは、列の幅が広いか狭いかによってレイアウトが異なります。

GRid

CSS グリッドは、ページレベルのレイアウトだけでなく、その内部のコンポーネントにも適しています。

この例では、::before と ::after の疑似要素によって、見出しの両側に装飾線が作成されます。見出し自体はグリッドコンテナです。個々の要素は、利用可能なスペースを常に線で埋めるようにレイアウトされています。

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}
h1::before,
h1::after {
  content: "";
  border-top: 0.1em double black;
  align-self: center;
}

グリッドオーバーレイを表示している Firefox のデベロッパーツール。 — Firefox や Chrome などのパソコン版ブラウザには、デザインにグリッド線やエリアを重ねて表示できるデベロッパーツールが用意されています。

グリッドオーバーレイを表示している Chrome のデベロッパーツール。 — Firefox や Chrome などのパソコン版ブラウザには、デザインにグリッド線やエリアを重ねて表示できるデベロッパーツールが用意されています。

Chrome DevTools でグリッドレイアウトを調べる方法をご覧ください。

Flexbox

その名のとおり、Flexbox を使用するとコンポーネントを柔軟に構成できます。コンポーネント内のどの要素を最小サイズまたは最大サイズにするかを宣言し、それに応じて他の要素を柔軟に調整できます。

この例では、利用可能なスペースの 4 分の 1 を画像が占め、残りの 4 分の 3 をテキストが占めています。ただし、画像のサイズが 200 ピクセルを超えることはありません。

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}

Flexbox のオーバーレイを表示している Firefox のデベロッパーツール。 — Firefox と Chrome のデベロッパーツールを使用すると、Flexbox コンポーネントの形状を可視化できます。

Flexbox のオーバーレイを表示している Chrome のデベロッパーツール。 — Firefox と Chrome のデベロッパーツールを使用すると、Flexbox コンポーネントの形状を可視化できます。

Chrome DevTools で Flexbox のレイアウトを検査する方法をご確認ください。

コンテナクエリ

Flexbox では、コンテンツからデザインできます。要素のパラメータ（範囲や幅など）を指定し、ブラウザに最終的な実装を任せることができます。

ただし、コンポーネント自体はコンテキストを認識しません。メインコンテンツとサイドバーのどちらで使用されているかは認識されません。このため、コンポーネントのレイアウトがページレイアウトよりも複雑になる可能性があります。コンテキストに応じたスタイルを適用できるようにするには、コンポーネントに含まれるビューポートのサイズ以上の情報をコンポーネントに伝える必要があります。

ページレイアウトでは、コンテナはブラウザのビューポートであるため、コンテナの幅は不明です。メディアクエリはページレベルのコンテナのディメンションをレポートします。

コンテナのディメンションをレポートするには、コンテナクエリを使用します。

まず、コンテナとして機能する要素を定義します。

main,
aside {
  container-type: inline-size;
}

これは、インラインディメンションに対してクエリを実行することを意味します。英語のドキュメントの場合、これは横軸です。コンテナの幅に応じてスタイルを変更します

コンポーネントがこれらのコンテナのいずれか内にある場合は、メディアクエリを適用するのと同様にスタイルを適用できます。

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

メディアオブジェクトが 25em よりも狭いコンテナ内にある場合、Flexbox スタイルは適用されません。画像とテキストは縦方向に表示されます。

ただし、コンテナ要素の幅が 25em より広い場合は、画像とテキストが並んで表示されます。

コンテナクエリを使用すると、コンポーネントを個別にスタイル設定できます。含まれる要素の幅に基づいてルールを作成できます。ビューポートの幅は重要ではなくなりました。

サイズの異なる 2 つのコンテナ。

クエリを結合する

ページレイアウトにはメディアクエリを使用し、ページ内のコンポーネントにはコンテナクエリを使用できます。

ページの全体的な構造は、main 要素と aside 要素からなります。両方の要素内にメディアオブジェクトがあります。

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

メディアクエリは、ビューポートの幅が 45em より広い場合、main 要素と aside 要素にグリッドレイアウトを適用します。

@media (min-width: 45em) {
  body {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

メディアオブジェクトのコンテナクエリのルールに変更はありません。含まれる要素が 25em より幅が広い場合にのみ、水平方向の Flexbox レイアウトが適用されます。

幅の広い 2 つの列と幅の狭いレイアウト。メディアオブジェクトは、列の幅が広いか狭いかによってレイアウトが異なります。

コンテナクエリは、マイクロレイアウトに大きな変革をもたらします。コンポーネントは、ブラウザのビューポートとは無関係に自己完結型にできます。

理解度をチェックする

マイクロレイアウトに関する知識をテストします。

グリッドと Flexbox はどちらもマイクロレイアウトに役立ちますか？

正しい

🎉? 正解です。

False

不正解です。グリッドと Flexbox は、小さなレイアウトでも非常に便利です。

前回は、ページレベルのマクロのレイアウトについて学習しました。ここでは、コンポーネントレベルのマイクロレイアウトについて説明します。

次に、コンテンツの構成要素を詳しく確認し、画像をレスポンシブにする方法について説明します。まず、レスポンシブタイポグラフィについて学びます。