通常フロー

この記事では、通常フロー、つまりレイアウトを変更していない場合のウェブページの要素のレイアウト方法について説明します。

前提知識: HTML の基礎(HTML 入門を学ぶ)、および CSS の機能の考え方(CSS 入門を学ぶ)。
学習目標: 変更を加える前に、ブラウザーがデフォルトでウェブページをどのようにレイアウトするかを説明します。

レイアウトを紹介した前回のレッスンで詳しく説明したように、CSS を適用してふるまいを変更していない場合、ウェブページ上の要素は通常フローでレイアウトされます。 そして、私たちが発見し始めたとき、その通常フローの中で要素の位置を調整するか、要素を完全に取り除くことで、要素のふるまいを変更できます。 通常フローで読み取り可能な、しっかりとよく構造化された文書から始めることは、どんなウェブページでも始めるための最良の方法です。 それは、ユーザーがごく限られたブラウザーを使用している場合や、ページのコンテンツを読み上げるスクリーンリーダーなどのデバイスを使用している場合でも、コンテンツを読みやすくすることができます。 さらに、通常フローは読み取り可能な文書を作成するように設計されているので、この方法で始めることで、レイアウトを変更するときに文書と戦うのではなく文書とともに作業します。

さまざまなレイアウト方法を深く掘り下げる前に、以前のモジュールで通常のドキュメントフローに関して検討したことのいくつかを再検討する価値があります。

要素はデフォルトでどのようにレイアウトされますか?

まず第一に、個々の要素ボックスは要素のコンテンツを取り、それからそれらの周りにパディング(padding、詰め物)、ボーダー(border、境界線)そしてマージン(margin、余白)を追加することによってレイアウトされます — これはまた以前に見たことがあるボックスモデルのことです。

デフォルトでは、ブロックレベル要素のコンテンツは、その親要素の幅の100%で、そのコンテンツと同じ高さです。 インライン要素は、コンテンツと同じ高さで、コンテンツと同じ幅です。 インライン要素に幅や高さを設定することはできません — それらはブロックレベル要素のコンテンツの中にあるだけです。 この方法でインライン要素のサイズを制御したい場合は、display: block; を使用してブロックレベル要素のようにふるまうように設定する必要があります(あるいは、display: inline-block; で、両方の特性を混在させます)。

それは個々の要素を説明していますが、要素がどのように相互作用するかについてはどうでしょうか? 通常のレイアウトフロー(レイアウト入門の記事に記載)は、ブラウザーのビューポート内に要素を配置するシステムです。 デフォルトでは、ブロックレベル要素は、親の書字方向モード(writing mode、初期は horizontal-tb)に基づいてブロックのフロー方向にレイアウトされます — 各要素は、最後の要素の下の新しいラインに表示され、それらに設定されたマージンで区切られます。 したがって英語やその他の水平に書き、上から下へ改行する書字方向モードでは、ブロックレベル要素は垂直にレイアウトされます。

インライン要素は異なるふるまいをします — それらは新しいラインに現れません。 代わりに、親ブロックレベル要素の幅の内側にマージンがある限り、それらは互いに同じラインに配置され、隣接する(または折り返された)テキストコンテンツに配置されます。 スペースがなければ、あふれているテキストや要素は新しいラインに移動します。

隣接する2つの要素の両方にマージンが設定されていて、2つのマージンが接触している場合、2つのうち大きい方が残り、小さい方が消えます — これはマージンの相殺(margin collapsing)と呼ばれます。

これらすべてを説明する簡単な例を見てみましょう。

<h1>基本的なドキュメントフロー</h1>

<p>私は基本的なブロックレベル要素です。 私と隣接するブロックレベル要素は私の下の新しいラインに置かれています。</p>

<p>私達は、デフォルトでは、親要素の幅の100%にまたがり、子コンテンツと同じ高さになります。 幅と高さの合計は、コンテンツ + パディング + ボーダーの幅/高さです。</p>

<p>私達は私達のマージンによって分けられています。 マージンの相殺のため、両方ではなく、1つのマージンの幅で区切られます。</p>

<p><span>これ</span>および<span>これのような</span>インライン要素は、同じラインに配置され、同じラインにスペースがある場合は隣接するテキストノードに配置されます。 オーバーフローするインライン要素は<span>可能であれば新しいラインに折り返され(これのようにテキストを含む)</span>、そうでなければ次の画像のように単に新しいラインに進むでしょう。 <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgba(255,84,104,0.3); 
  border: 2px solid rgb(255,84,104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}

まとめ

通常フロー、およびブラウザーがデフォルトでどのようにレイアウトするかを理解したので、次にこのデフォルトの display を変更してデザインに必要なレイアウトを作成する方法を理解することに進みます。

このモジュール内の文書