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