レイアウトについて考えるときは、ページレベルのデザインがよく思い浮かびます。ただし、ページ内の小さなコンポーネントには、独自の自己完結型レイアウトがあります。
これらのコンポーネント レベルのレイアウトは、ページ上の位置に関係なく自動的に調整されるのが理想的です。コンポーネントがメイン コンテンツ列、サイドバー、またはその両方に配置されるかどうかわからない場合もあります。 コンポーネントの最終的な配置先が不明な場合、コンポーネントがコンテナに合わせて自動的に調整されるようにする必要があります。
GRid
CSS グリッドは、ページレベルのレイアウトだけでなく、その内部のコンポーネントにも適しています。
この例では、::before
と ::after
の疑似要素によって、見出しの両側に装飾線が作成されます。見出し自体はグリッド コンテナです。個々の要素は、利用可能なスペースを常に線で埋めるようにレイアウトされています。
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
Chrome DevTools でグリッド レイアウトを調べる方法をご覧ください。
Flexbox
その名のとおり、Flexbox を使用するとコンポーネントを柔軟に構成できます。コンポーネント内のどの要素を最小サイズまたは最大サイズにするかを宣言し、それに応じて他の要素を柔軟に調整できます。
この例では、利用可能なスペースの 4 分の 1 を画像が占め、残りの 4 分の 3 をテキストが占めています。ただし、画像のサイズが 200 ピクセルを超えることはありません。
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
Chrome DevTools で Flexbox のレイアウトを検査する方法をご確認ください。
コンテナクエリ
Flexbox では、コンテンツからデザインできます。要素のパラメータ(範囲や幅など)を指定し、ブラウザに最終的な実装を任せることができます。
ただし、コンポーネント自体はコンテキストを認識しません。メイン コンテンツとサイドバーのどちらで使用されているかは認識されません。 このため、コンポーネントのレイアウトがページ レイアウトよりも複雑になる可能性があります。 コンテキストに応じたスタイルを適用できるようにするには、コンポーネントに含まれるビューポートのサイズ以上の情報をコンポーネントに伝える必要があります。
ページ レイアウトでは、コンテナはブラウザのビューポートであるため、コンテナの幅は不明です。メディアクエリはページレベルのコンテナのディメンションをレポートします。
コンテナのディメンションをレポートするには、コンテナクエリを使用します。
まず、コンテナとして機能する要素を定義します。
main,
aside {
container-type: inline-size;
}
これは、インライン ディメンションに対してクエリを実行することを意味します。英語のドキュメントの場合、これは横軸です。コンテナの幅に応じてスタイルを変更します
コンポーネントがこれらのコンテナのいずれか内にある場合は、メディアクエリを適用するのと同様にスタイルを適用できます。
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
メディア オブジェクトが 25em
よりも狭いコンテナ内にある場合、Flexbox スタイルは適用されません。画像とテキストは縦方向に表示されます。
ただし、コンテナ要素の幅が 25em
より広い場合は、画像とテキストが並んで表示されます。
コンテナクエリを使用すると、コンポーネントを個別にスタイル設定できます。含まれる要素の幅に基づいてルールを作成できます。ビューポートの幅は重要ではなくなりました。
クエリを結合する
ページ レイアウトにはメディアクエリを使用し、ページ内のコンポーネントにはコンテナクエリを使用できます。
ページの全体的な構造は、main
要素と aside
要素からなります。両方の要素内にメディア オブジェクトがあります。
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
メディアクエリは、ビューポートの幅が 45em
より広い場合、main
要素と aside
要素にグリッド レイアウトを適用します。
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
メディア オブジェクトのコンテナクエリのルールに変更はありません。含まれる要素が 25em
より幅が広い場合にのみ、水平方向の Flexbox レイアウトが適用されます。
コンテナクエリは、マイクロ レイアウトに大きな変革をもたらします。コンポーネントは、ブラウザのビューポートとは無関係に自己完結型にできます。
理解度をチェックする
マイクロ レイアウトに関する知識をテストします。
グリッドと Flexbox はどちらもマイクロ レイアウトに役立ちますか?
前回は、ページレベルのマクロのレイアウトについて学習しました。ここでは、コンポーネント レベルのマイクロ レイアウトについて説明します。
次に、コンテンツの構成要素を詳しく確認し、画像をレスポンシブにする方法について説明します。まず、レスポンシブ タイポグラフィについて学びます。