マクロ レイアウトは、インターフェースのページ全体の大きな構成を表します。
レイアウトを適用する前に、コンテンツのフローが適切であることを確認する必要があります。 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;
}
}
Flexbox
この特定のレイアウトには、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 をご覧ください。
理解度をチェックしましょう
マクロ レイアウトの知識をテストしましょう。
マクロ レイアウトを最もよく表している文はどれですか？
マクロ レイアウトでは、さまざまな画面サイズに対応するために常にメディアクエリを使用しますか？
ページレベルのマクロ レイアウトのアイデアがいくつか浮かんだら、ページ内のコンポーネントに注目しましょう。これはマイクロ レイアウトの領域です。