次のページこの記事では、通常フロー、つまりレイアウトを変更していない場合のウェブページの要素のレイアウト方法について説明します。学習目標:変更を加える前に、ブラウザーがデフォルトでウェブページをどのようにレイアウトするかを説明します。適用してふるまいを変更していない場合、ウェブページ上の要素は通常フローでレイアウトされます。私たちが発見し始めたとき、その通常フローの中で要素の位置を調整するか、要素を完全に取り除くことで、要素のふるまいを変更できます。通常フローで読み取り可能な、しっかりとよく構造化された文書から始めることは、どんなウェブページでも始めるための最良の方法です。それは、ユーザーがごく限られたブラウザーを使用している場合や、ページのコンテンツを読み上げるスクリーンリーダーなどのデバイスを使用している場合でも、コンテンツを読みやすくすることができます。通常フローは読み取り可能な文書を作成するように設計されているので、この方法で始めることで、レイアウトを変更するときに文書と戦うのではなく文書とともに作業します。さまざまなレイアウト方法を深く掘り下げる前に、以前のモジュールで通常のドキュメントフローに関して検討したことのいくつかを再検討する価値があります。これはまた以前に見たことがあるボックスモデルのことです。デフォルトでは、ブロックレベル要素のコンテンツは、その親要素の幅の100%で、そのコンテンツと同じ高さです。インライン要素は、コンテンツと同じ高さで、コンテンツと同じ幅です。それらはブロックレベル要素のコンテンツの中にあるだけです。両方の特性を混在させます)。通常のレイアウトフロー(レイアウト入門の記事に記載)は、ブラウザーのビューポート内に要素を配置するシステムです。各要素は、最後の要素の下の新しいラインに表示され、それらに設定されたマージンで区切られます。したがって英語やその他の水平に書き、上から下へ改行する書字方向モードでは、ブロックレベル要素は垂直にレイアウトされます。それらは新しいラインに現れません。代わりに、親ブロックレベル要素の幅の内側にマージンがある限り、それらは互いに同じラインに配置され、隣接する(または折り返された)テキストコンテンツに配置されます。スペースがなければ、あふれているテキストや要素は新しいラインに移動します。collapsing)と呼ばれます。これらすべてを説明する簡単な例を見てみましょう。<h1>基本的なドキュメントフロー</h1><p>私は基本的なブロックレベル要素です。私と隣接するブロックレベル要素は私の下の新しいラインに置かれています。</p><p>私達は、デフォルトでは、親要素の幅の100%にまたがり、子コンテンツと同じ高さになります。ボーダーの幅/高さです。</p><p>私達は私達のマージンによって分けられています。マージンの相殺のため、両方ではなく、1つのマージンの幅で区切られます。</p><p><span>これ</span>および<span>これのような</span>インライン要素は、同じラインに配置され、同じラインにスペースがある場合は隣接するテキストノードに配置されます。オーバーフローするインライン要素は<span>可能であれば新しいラインに折り返され(これのようにテキストを含む)</span>、そうでなければ次の画像のように単に新しいラインに進むでしょう。変更してデザインに必要なレイアウトを作成する方法を理解することに進みます。inbox.現在、ニュースレターは英語でのみ提供されています。従って私の個人情報を扱うことに同意します。