ボックスモデルは、ページレイアウトがウェブ上で整頓される方法です。

キャンバス、Web、またはSTUDIOなど、自分の好きな場所に要素を配置できるデザインツールやパワーポイントとは異なり、要素は積み重ねられます。

ボックスモデルの最大の利点は、異なったデバイスや画面サイズに対応したレスポンシブなウェブサイトを作成できることです。

全てはボックス

ここでいう「ボックス」という用語は、正方形だけを指すものではないということが重要です。このモデルでは、画像、テキスト、アイコン、セクションなどすべてがボックスと見なされます。

ボックスのグループ化:親要素と子要素

ボックスは積み重ねられるだけでなく、他のボックスに挿入することもできます。 これを「入れ子」と呼びます。

コンテナボックスは「親ボックス」と呼ばれ、その中に入れ子にされているボックスは「子ボックス」です。

親要素を移動すると、入れ子になっている子要素も相対位置を保ったまま一緒に移動します。

余白を作る

要素間や要素内に余白を作るには、マージンとパディングを使用します。

マージンはボックスの外の余白。

パディングはボックスの中の余白。

マージンとパディングの詳細は、こちらをご確認ください。

ボックスの配置と移動

ボックスが1つだけの場合は、ドラッグ&ドロップで各境界線の左右、中央、または親ボックスの中央に移動できます。

ただし、ボックスが複数ある場合は、ドラッグ&ドロップで移動することはできません。 フレックスボックスのプロパティを使用してボックスを移動する方法については、こちらをご確認ください。

Did this answer your question?