箱

の 箱 ブロックは、コンテンツを画面の中央に整然と配置するのに効果的です。セグメントブロックと一緒に使用されることが多いです。 挿入パネル > 構造 セグメント。

このセッションでは、以下の内容について説明します。

1. 箱の構造
2. ボックス、セグメント、セクションブロックを活用する方法

箱の構造

あ 箱 は、定義済みのスタイルを持つセクション ブロックです。大きな画面では、最大幅が 940 ピクセルで、ブラウザ ウィンドウに対してコンテンツを中央に配置します。小型のガジェット (携帯電話やタブレットなど) では、ボックスが画面の幅全体に広がります。

ボックスの最大幅を変更して、ビューポートのサイズに適応しながらも、設定された最大幅までしか拡張しないようにすることができます。

ボックス、セグメント、セクションブロックを活用する方法

Web デザインでは、ボックスはセクション ブロック内に配置されることがよくあります。デフォルトでは、セクションは幅全体を占めます。セクション内にボックスを配置して、要素を中央に向かってきれいにグループ化することができます。その後、ボックス内のセグメント ブロックを使用して、レイアウト、間隔、寸法、配置によって要素を配置できます。

専門家のヒント: セクションは、全幅にわたるセクション ブロックであり、定義済みの「セクション」HTML5 タグが含まれています。ボックスは、最大幅が事前に設定されたセクション ブロックです。

Web レイアウトの構築について詳しくご覧ください。