ボックスモデルとは、Web 上でのレイアウトの仕組みを説明するものです。PhotoshopやPowerPointなどのツールでは、ドキュメント内の任意の場所に要素を配置することができます。ウェブレイアウトは、文書内の段落のように、コンテンツが垂直に積み重なることを基本としています。

ボックスモデルについて

すべての要素はボックスです。このWebページでは、すべての要素がボックスとして扱われます。各要素の周囲に見えない境界線があることを想像してみてください。これらのボックスは、その特性によって、自然に隣り合ったり、重なり合ったりします。

レスポンシブデザインにボックスを使用

ウェブコンテンツは、PowerPointやPhotoshopのように、要素を手動で好きな場所に配置できるものではありません。これらのドキュメントはレスポンシブではありません。コンテンツは1つの解像度で表示されるように作成されています。コンテンツはページの左上から自然に流れ、ドキュメントの境界線にぶつかると折り返されます。コンテンツがさまざまな解像度に対応するため、レスポンシブにも対応しています。

一見すると、ボックスモデルは堅苦しく聞こえますが、実際には、さまざまなデバイスや画面サイズに対応するレスポンシブレイアウトを作成する際に、非常に高い柔軟性を発揮します。

ボックスのグループ化

ボックス モデルの重要な点は、ボックスを他のボックスの内部に挿入できることです（つまり、「入れ子」にする）。ウェブフローのすべての要素はボックスであり、任意の ウェブフロー要素を別の要素にドロップすることができます。たとえば、見出し、段落、画像の各要素をコンテナの中に配置することができます。

このコンテナは、これらの他の要素をグループ化し、コンテナを移動するたびに、その中のすべてのボックスが一緒に移動できるようにします。ボックスの中身が増えれば、ボックスのサイズも自然に大きくなります。つまり、通常は要素に高さを設定する必要はなく、内容によって高さを決めることができます。しかし、要素間にスペースを設けるにはどうしたらよいでしょうか。そこで登場するのが、マージンとパディングです。

マージンはボックスの外側にスペースを作り、他のボックスを押しのけ、パディングはボックスの内側にスペースを作ります。これは、他のボックスを含むボックス（「親」要素）、または内部のボックス（「子」要素）など、どのボックスにも適用することができます。

縦横に積み重ねる

ページにコンテンツを追加し、パディングとマージンを調整するだけで、簡単なWebサイトを作成できます。 ただし、多くの場合、水平方向または画面上の特定の場所に配置する要素が必要になります。

そこで、さまざまなレイアウト手法が役立ちます。 表示設定は要素のデフォルトの表示またはレイアウト動作を制御し、配置プロパティは他のレイアウト動作を制御します。