レイアウトというと、ページ単位のデザインを思い浮かべることが多いでしょう。ただし、ページ内の小さなコンポーネントには、独自の自己完結型のレイアウトを設定できます。
理想的には、これらのコンポーネント レベルのレイアウトは、ページ上の位置に関係なく自動的に調整されます。コンポーネントがメイン コンテンツ列、サイドバー、またはその両方に配置されるかどうかわからない場合があります。コンポーネントが最終的にどこに配置されるかわからないため、コンポーネントがコンテナに合わせて調整できるようにする必要があります。
グリッド
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 はどちらもマイクロ レイアウトに役立ちますか？
これまでに、ページレベルのマクロ レイアウトについて学習しました。これで、コンポーネント レベルのマイクロ レイアウトについて理解できました。
次に、コンテンツの基本的な構成要素について詳しく説明し、画像をレスポンシブにする方法を学びます。まず、レスポンシブ タイポグラフィについて学びます。