マクロのレイアウト

マクロレイアウトは、ページ全体にわたる大きなインターフェースの構成を表します。

2 列レイアウトのワイヤフレーム（狭いビューの 1 列と同じレイアウトの隣）。

レイアウトを適用する前にコンテンツの流れが合理的であることを確認しましょう小さな画面では、この単一列のデフォルトの順序が適用されます。

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

これらの個々のページレベルコンポーネントを配置すると、ページの概要を示すマクロレイアウトを設計できます。メディアクエリを使用すると、さまざまな画面サイズに合わせてこのビューをどのように調整するかを説明するルールを CSS で指定できます。

グリッド

CSS グリッドは、ページにレイアウトを適用するための優れたツールです。上記の例では、十分な画面幅を確保した後、2 列レイアウトにしたいとします。ブラウザの幅が十分広いときにこの 2 列レイアウトを適用するには、メディアクエリを使用して、指定したブレークポイントの上にグリッドスタイルを定義します。

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

注: min-width ではなく min-inline-size を指定する方が理にかなっていますが、メディアクエリでは論理プロパティはまだ機能しません。

フレックスボックス

このレイアウトには flexbox も使用できます。スタイルは次のようになります。

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }

  main article {
    flex: 2;
  }

  main aside {
    flex: 1;
  }
}

ただし、Flexbox の場合はより多くの CSS が必要です。各列には、使用する容量を定義する個別のルールが設定されています。グリッドの例では、それと同じ情報が、それを含む要素に対する 1 つのルールにカプセル化されています。

メディアクエリが必要ですか？

必ずしもメディアクエリを使用する必要はありません。メディアクエリは、一部の要素に変更を適用する場合はうまく機能しますが、レイアウトを頻繁に更新する必要がある場合は、多くのブレークポイントでメディアクエリを使用できなくなる可能性があります。

たとえば、ページにカードコンポーネントがたくさんあるとします。カードの幅は 15em 以上にします。また、収まる数だけカードを 1 行に配置します。30em、45em、60em などのブレークポイントを使用してメディアクエリを記述できますが、それはかなり退屈で、保守が困難です。

その代わりに、カード自体が自動的に適切な量のスペースを占めるようにルールを適用できます。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

Flexbox でも同様のレイアウトを実現できます。この場合、最後の行を埋めるのに十分なカードがない場合、残りのカードは列に配置されるのではなく、利用可能なスペースを埋めるために引き伸ばされます。行と列の位置を揃えたい場合は、グリッドを使用します。

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.cards .card {
  flex-basis: 15em;
  flex-grow: 1;
}

Flexbox やグリッドにスマートルールを適用することで、メディアクエリを使わずに、最小限の CSS で動的マクロレイアウトをデザインできます。ブラウザが計算を実行するため、開発者の作業が少なくてすみます。メディアクエリを必要とせずに流動的な最新の CSS レイアウトの例については、1linelayouts.com をご覧ください。

理解度チェック

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

マクロのレイアウトについて、最も適切に説明している文はどれですか。

他のレイアウトを含むレイアウト。

もう一度考えてみましょう。ほとんどのレイアウトには他のレイアウトが含まれています。

デザインで Flexbox またはグリッドが使用されている場合。

もう一度考えてみましょう。Flexbox もグリッドも、マクロレイアウトに固有のものはありません。

小さな画面を覆う低レベルのレイアウト。

もう一度考えてみましょう。

画面の大部分を覆う上位レイアウト。

🎉? マクロレイアウトはページの基本レイアウトであり、表示領域は広範囲に及び、多くの場合、ページサイズのメディアクエリで調整されます。

マクロレイアウトでは、さまざまな画面サイズに適応するために、常にメディアクエリが使用されますか？

正しい

もう一度考えてみましょう。マクロレイアウトは、メディアクエリの使用方法では定義されません。

誤り

🎉? マクロのレイアウトは、メディアクエリがなくても、コンテンツに合わせて調整したり、使用可能なスペースを埋めたりできます。

ページレベルのマクロレイアウトのアイデアがわかったところで、次にページ内のコンポーネントに注目しましょう。これはマイクロレイアウトの領域です。