マクロのレイアウト

マクロレイアウトは、インターフェースをより大きくページ全体にわたって整理したものです。

狭いビューでは、1 つの列と同じレイアウトの横に 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 とグリッドには、マクロレイアウトに固有の機能はありません。

画面の一部を覆う低レベルのレイアウト。

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

画面の大部分を覆う大まかなレイアウト。

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

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

正しい

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

False

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

ページレベルのマクロレイアウトに関するアイデアがわかったところで、ページ内のコンポーネントに注目してくださいここが、マイクロレイアウト: