CSS レイアウト入門
このレッスンでは、前回のモジュールで触れた CSS レイアウト機能の一部、たとえばさまざまな display 値などを復習し、このモジュールで取り上げる概念のいくつかを紹介します。また、通常のフローの概念についても詳しく説明します。
| 前提知識: | HTML によるコンテンツの構造化、 CSS によるスタイル設定の基本、 基本的なテキストとフォントのスタイル設定 |
|---|---|
| 学習目標: |
|
CSS のページレイアウト技術によって、ウェブページに含まれる要素の位置を制御できます。通常のレイアウトフローによる初期配置、隣接する要素、それらの親コンテナー、またはメインビューポート、ウィンドウの位置、といったものが位置を制御する基準になりえます。 このモジュールでは次に挙げるページレイアウト技術の詳細について説明します。
以下で説明し、このモジュールで詳しく取り上げるページレイアウト手法には、それぞれ用途、利点、および欠点があります。単独で使用するように設計された手法はありません。各レイアウト手法の設計目的を理解することで、各課題に最も適したメソッドを判断するための良い基礎を築くことができます。
通常レイアウトフロー
ウェブページ上の要素は、その動作を変更する CSS を適用していない場合、通常フロー (normal flow) でレイアウトされます。要素の動作は、通常フロー内での位置を調整するか、通常フローから完全に除去することで変更できます。通常フローで読み取り可能な、しっかりした構造を持つ文書から始めることが、ウェブページの作成を始める上で最善の方法です。これにより、ユーザーが制限の厳しいブラウザーや、ページの内容を読み上げるスクリーンリーダーなどの装置を使用していても、コンテンツを確実に読み取ることができます。さらに、通常フローは読み取り可能な文書を作成するために設計されているため、この方法で作業を開始すると、レイアウトの変更を行う際に文書と格闘するのではなく、文書を活用して作業を進めることができます。
さまざまなレイアウトメソッドについて詳しく説明する前に、通常の文書フローに関して、前回のモジュールで学習したいくつかのことをもう一度確認しておきましょう。
要素は既定でどのようにレイアウトされるのか
このプロセスは、個々の要素のボックスが、それらがたまたま保有するパディング、境界線、マージンがコンテンツに追加されるようにレイアウトされるときに始まります。これをボックスモデル (box model) と呼びます。
既定では、ブロックレベル要素のコンテンツは、それを含む親要素の利用可能なインライン空間を埋め、そのコンテンツに合わせてブロックの次元に沿って伸長します。インラインレベル要素のサイズは、そのコンテンツのサイズと同じです。既定の display プロパティの値が inline である一部の要素（ <img> など）には、 width または height が設定できますが、 display の値は inline のままです。
この方法でインラインレベル要素の display プロパティを制御したい場合は、 CSS を使用して、ブロックレベル要素のように動作するように設定してください （たとえば、display: block; または両方の性質が混在する display: inline-block;）。
これで要素が個別にどのように構造化されるかは説明できましたが、要素が互いに作用する場合の構造化の方法についてはどうでしょうか？通常レイアウトフロー（レイアウトの紹介記事で説明）は、要素がブラウザーのビューポート内に配置されるシステムです。既定では、ブロックレベル要素は、親要素の書字方向（初期値: horizontal-tb）に基づいて、ブロックフローの方向にレイアウトされます。各要素は、最後の要素の行の下に新しい行として表示され、指定されたマージンで区切られます。例えば、英語（またはその他の横書き、上から下への書字方向）では、ブロックレベル要素は縦方向にレイアウトされます。
インライン要素は、異なる動作をします。インライン要素は、新しい行には現れません。その代わりに、親ブロックレベル要素の幅内に収まる限り、隣接する（または折り返された）テキストコンテンツとともに、すべて同じ行に配置されます。収まらない場合は、あふれたコンテンツは新しい行に移動されます。
2 つの縦に隣接する要素にマージンが設定されており、そのマージンが接触している場合、2 つのマージンのうち大きい方が残り、小さい方が消えます。これはマージンの相殺と呼ばれます。 マージンの相殺は、縦方向でのみ発生します。
通常フローの例
これをすべて説明する単純な例を見ていきましょう。
<h1>通常文書フロー</h1>
<p>
これは基本的なブロックレベル要素です。隣接するブロックレベル要素は、この下に新しい行で配置されます。
</p>
<p>
既定では、親要素の幅の 100% を占め、子コンテンツと同じ高さになります。合計の幅と高さは、コンテンツ + パディング + 境界の幅/高さになります。
</p>
<p>
これらはマージンによって隔てられています。マージンの相殺により、2 つのマージンのサイズの両方ではなく、一方のサイズで隔てられています。
</p>
<p>
<span>これ</span>や<span>これ</span>はインライン要素で、同じ行に隣接するテキストノードとともに、同じ行に収まる場合はその行に配置されます。収まらないインライン要素は、<span>可能な場合は新しい行に折り返され（テキストを含むこの要素のように）</span>、折り返せない場合は、次の画像のようにそのまま新しい行に表示されます。
<img
src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
alt="snippet of cloth" />
</p>
body {
width: 500px;
margin: 0 auto;
}
p {
background: rgb(255 84 104 / 30%);
border: 2px solid rgb(255 84 104);
padding: 10px;
margin: 10px;
}
span {
background: white;
border: 1px solid black;
}
HTML は、ソースコードに現れる順番とまったく同じ順番で表示され、ブロック要素は互いに積み重なるように表示されることに注意してください。
ページ上の多くの要素では、通常のフローで必要なレイアウトが正確に作成されます。しかし、より複雑なレイアウトの場合は、CSS で利用できるツールを使用して、この既定の動作を変更する必要があります。よく構造化された HTML 文書から始めることは非常に重要です。そうすることで、既定のレイアウトと格闘することなく、そのレイアウトを利用して作業を進めることができるからです。
通常フローの上書き
通常フローを上書きし、 CSS での要素のレイアウトを変更できるメソッドは、このモジュールで詳しく説明しますが、次のとおりです。
displayプロパティ-
block、inline、inline-blockなどの標準値は、要素の通常フローの挙動を変更します。例えば、ブロックレベル要素をインラインレベル要素のように振る舞わせることができます（これについては、ボックスモデルのレッスンで説明しました）。 - 浮動ボックス
-
floatにleftなどの値を指定すると、ブロックレベル要素が要素の片側に沿って折り返される場合があります。これは、雑誌のレイアウトで画像にテキストが浮動ボックスで囲まれる場合と同じような方法です。 - 位置指定
-
positionプロパティを使用すると、他のボックス内のボックスの配置を正確に制御することができます。static位置指定は、通常のフローでは既定ですが、他の値を使用することで、要素のレイアウトを変更することができます。例えば、position: fixedを使用すると、要素をブラウザーのビューポートの上部に固定することができます。 displayでアクセスできる特定のレイアウトシステム-
特定の
display値によって有効になるレイアウトメソッドも存在します。最も重要なものは CSS グリッドとフレックスボックスで、どちらも親要素内の子要素のレイアウトを変更します。 - レスポンシブデザイン
-
レスポンシブデザインとは、ウェブページがレンダリングされるさまざまな端末（例えば、デスクトップや携帯電話）に適応できるレイアウトを作成することを指します。レスポンシブデザインには、それ自体で特定のレイアウトツールは提供されていません。その最も重要な要素は、画面の幅や解像度などの端末の属性に応じて異なるレイアウトを適用できる
@mediaアットルールです。