値など)を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。ページレイアウトのテクニックの概要を説明します。各テクニックは、以降のチュートリアルで詳細に学ぶことができます。ページレイアウトのテクニックにより、ウェブページに含まれる要素を、通常のレイアウトフロー、その周囲の他の要素、それらの親コンテナ、またはメインビューポート/ウィンドウにおけるデフォルトの位置を基準にして、配置する場所を制御できます。このモジュールで詳しく説明するページレイアウトのテクニックは次のとおりです。表レイアウト段組みレイアウト各テクニックには、それぞれ用途、長所、短所があり、単独で使用するようには設計されていません。それぞれの方法がどのように設計されているかを理解することで、それぞれのタスクに最適なレイアウトツールがどれであるかを理解するのに適した場所になります。ページをレイアウトする方法です。end!</p>デフォルトでは、ブラウザーはこのコードを次のように表示します。最初の段落の後に番号なしリストが続き、その後に2番目の段落が続きます。段落内の個々の単語のように、横に並んで表示されるインライン要素とは対照的に、上下に並んで表示される要素はブロック要素と呼ばれています。Direction)と呼ばれます。Mode)の言語では垂直に走ります。Mode)では、どの言語でも水平に走ります。Direction)は、インラインコンテンツ(文など)が走る方向です。使用してレイアウトを作成するときは、要素を通常フローから遠ざけますが、ページ上の要素の多くについては、通常フローによって必要なレイアウトが作成されます。文書から始めることが非常に重要である理由です。あなたはそれと戦うのではなく、デフォルトでレイアウトされている現状で作業できるからです。要素をどのように配置するかを変更できる方法は次のとおりです。ボックスの種類を参照してください)。値によってオンにされるレイアウト方法全体があります。値を適用すると、雑誌のレイアウトで画像の周囲をテキストが取り囲むことがあるように、要素の片側に沿ってブロックレベル要素が折り返されることがあります。他のボックス内のボックスの配置を正確に制御できます。位置指定がデフォルトですが、他の値を使用して要素を異なる方法でレイアウトすることもできます。ブラウザーのビューポートの左上に固定するなどです。とそれに関連するプロパティを使用して、表以外の要素にも使用できます。段組みレイアウトのプロパティを使用すると、新聞のようにブロックのコンテンツを段組みにレイアウトできます。プロパティのすべての値です。このプロパティにより、デフォルトの表示方法を変更することができます。値があり、それらが設定されている要素がふるまうデフォルトの方法として使用されます。スタイルが設定されているためです。段落内のテキストの周囲にリンクを作成しても、そのリンクは残りのテキストとインラインのままで、改行しません。ふるまいは変更できます。英語の文書ではリスト項目は上下に表示されます。変更した場合、単語が文中で行うように、それらは互いに隣接して表示されます。要素を選択できるということです。見た目はあなたが変えることができるものです。値として始まるいくつかの大きいレイアウト方法があります。これらを使用するときは、通常、追加のプロパティを呼び出す必要があります。略称で、行または列のいずれかとして、物を1次元にレイアウトすることを容易にするように設計されています。レイアウトしたい要素の親要素に適用します。その直接の子はすべてフレックス項目になります。これは簡単な例で見ることができます。クラスを持つ包含要素を示しています。デフォルトでは、これらは英語の文書では上下にブロック要素として表示されます。親に追加すると、3つの項目は列に配置されます。これは、それらがフレックス項目になり、フレックスボックスがそれらに与えるいくつかの初期値を使用するためです。行として表示されます。あるため、それらはすべて最も高い項目の高さまで伸びているように見えます。これは、項目がフレックスコンテナの高さまで伸びることを意味します。この場合、項目は最も高い項目によって定義されます。項目はすべてコンテナの先頭に配置され、行の末尾に余分なスペースが残ります。class="box3">Three</div></div>フレックスコンテナに適用できる上記のプロパティに加えて、フレックス項目に適用できるプロパティがあります。これらのプロパティは、とりわけ、項目のたわみ方を変えることができ、利用可能なスペースに収まるように項目を拡大および縮小することを可能にします。プロパティを追加できます。これにより、末尾にスペースを残すのではなく、すべての項目が拡大してコンテナがいっぱいになります。多くのスペースがあるならば、項目はより広くなり、スペースが少ないと狭くなります。サイズに関係なく、同じ大きさのスペースを占めるようにサイズが調整されます。これはフレックスボックスで可能なことの非常に短い紹介です。詳細については、フレックスボックスの記事を参照してください。行と列に物を並べます。Layout)をオンにすることができます。例と同様のマークアップを使用しています。プロパティをそれぞれ使用して、親の行と列のトラックをいくつか定義します。子要素に規則を置く必要はなく、自動的にグリッドが作成したセルに配置されます。class="box6">Six</div></div>グリッドを作成したら、上記の自動配置のふるまいに頼らずに、明示的に項目を配置できます。以下の2番目の例では、同じグリッドを定義しましたが、今回は3つの子項目を使用しています。プロパティを使用して各項目の開始ラインと終了ラインを設定しました。これにより、項目が複数のトラックにまたがるようになります。これら2つの例は、グリッドレイアウトの機能のほんの一部です。詳細については、グリッドレイアウトの記事を参照してください。このガイドの残りの部分では、他のレイアウト方法について説明します。これは、ページの主なレイアウト構造にとってはそれほど重要ではありませんが、それでも特定のタスクを達成するのに役立ちます。各レイアウトタスクの性質を理解することで、デザインの特定の構成要素を見たときに、それに最も適したレイアウトの種類が明らかになることがすぐにわかります。フロート要素を浮動すると、その要素とそれに通常フローで続くブロックレベル要素のふるまいが変わります。要素が左または右に移動されて通常フローから除かれ、囲むコンテンツが浮動項目の周囲に浮かびます。プロパティには次の4つの可能な値があります。