3. Studioのレイアウトの基本（ボックスレイアウト）

Studioでは、Webページのレイアウトを「ボックスレイアウト」という方法で作成します。「ボックス」と呼ばれる箱型要素を積み木のように重ねたり、ボックス内に他のボックスを入れて構成することで、ページ全体の構造が把握しやすくなります。

この手法は、コーディングで作成するWebサイトの構成を基にしています。

Studioでは、追加するコンテンツによりボックスを使い分けます。

Webページは、意味のまとまりごとに、大きくセクションに分かれています。

例として、以下のサイトは大きく「ヘッダー」「メイン」「フッター」の3つのセクションで構成されています。Webページのセクションも、Studioではボックスで構成します。

Webページの各セクションを担うボックスの中に、各要素となるボックスを設置していきます。例えば、画像ギャラリー、プロフィール、送信ボタン、フォームなどです。

ボックスを入れ子にして重ねると、ボタンやフォームなどさまざまなWebページ上のパーツを作ることができます。

例として下の図は、ひとつのまとまりであるフォームパーツが、さまざまなボックス(テキストボックス、インプットボックス)によって構成されていることを表しています。

ボックスの概念を理解したら、デザインエディタで実際にレイアウトを組んでいきます。デザインエディタの画面の見方については、デザインエディタをご覧ください。

ボックスを配置したら、ボックス同士の余白や位置関係を指定していきます。

ボックス間の余白は、マージン・パディング・ギャップのいずれかで設定します。

詳しくは、マージン・パディング・ギャップの設定方法をご覧ください。

親ボックス内で子ボックスをどの位置に配置するか調整ができます。

例：中央寄せ、右上寄せ

詳しくは、ボックスの配置調整をご覧ください。

グループ化された複数の子ボックスが、親ボックスの中で並ぶ向きを指定します。

詳しくは、ボックスを横並び・縦並びに変更するをご覧ください。