マクロ レイアウトは、ページ全体にわたる大きなインターフェースの構成を表します。
レイアウトを適用する前に コンテンツの流れが合理的であることを確認しましょう小さな画面では、この単一列のデフォルトの順序が適用されます。
<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 も使用できます。 スタイルは次のようになります。
@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 をご覧ください。
理解度チェック
マクロ レイアウトに関する知識をテストします。
マクロのレイアウトについて、最も適切に説明している文はどれですか。
マクロ レイアウトでは、さまざまな画面サイズに適応するために、常にメディアクエリが使用されますか?
ページレベルのマクロ レイアウトのアイデアがわかったところで、次にページ内のコンポーネントに注目しましょう。これはマイクロ レイアウトの領域です。