ボックスをHTMLで並べて表示する方法

これまで、多くのWebサイトはHTMLテーブルを使用してページをレイアウトしていました。これは、この方法が古いWebブラウザーで一貫して信頼できる結果を生成するためです。テーブルは実際にはページをレイアウトするのではなく表形式のデータを表示することを目的としているため、これは理想的なソリューションではありませんでした。テーブルを使用するということは、レイアウトがページにハードコーディングされていることも意味し、サイトの更新作業に時間がかかります。カスケードスタイルシートでは、「float」プロパティが導入され、デザイナーが要素を左また​​は右にフロートできるようになりました。これにより、ページをより細かく制御できるようになり、サイトのレイアウトをコンテンツから分離しておくという追加の利点があります。

1

テキストエディタまたはHTMLエディタを開き、新しいHTMLドキュメントを作成します。

2

次のコードをページ本文に追加します。

これは最初のdivのテキストですこれは2番目のdivのテキストです

ページを保存して、Webブラウザで開きます。2番目のdivのコンテンツが最初のdivのコンテンツの下に表示されていることがわかります。

3

次のCSSコードをHTMLドキュメントのセクションに挿入します。

ページを保存し、ブラウザで更新して変更を表示します。CSSルールは、「myContainer」div内にネストされた両方のdivを対象としています。「float」プロパティは、ブラウザにdivを左にフロートするように指示します。float値を「right」に変更して、divを含むdivの右端にフロートさせることができます。divは300ピクセルの固定幅に設定され、レイアウトを見やすくするために1ピクセルの黒い境界線があります。ブラウザに、ボックスが並べて表示されていることがわかります。

4

以下に示すように、「myContainer」divの外側にあるページ本体に3番目のdivを追加します。

これは最初のdivのテキストですこれは2番目のdivのテキストですこれは3番目のdivのテキストです

ページを保存して、ブラウザにリロードします。フロートされていなくても、3番目のdivが1番目と2番目のdivの横に表示されていることがわかります。これは、残りのHTML要素がfloat要素の周りを流れるために発生します。これは望ましい動作である場合もありますが、この例では、フッターを作成するために3番目のdivをフロートdivの下に表示する必要があります。

5

次のルールをページの先頭のスタイルセクションに挿入します。

clear: both; 

}

これは、3番目の「myFooter」divを対象とし、floatを中止して、「myContainer」divの下に後続のHTML要素を表示するようにブラウザーに指示します。ページを保存して更新します。3番目のdivによって形成されたフッターが、フロートされたdivの下に表示されていることがわかります。