ボックスの配置を調整する方法

Studioではボックスを並べてページを構成します。追加したボックスは、積み木のように積み重なるため、レイアウトを調整するにはボックスの方向や配置を変更する必要があります。

配置は、ボックス上部に表示されるメニューで変更できます。配置を調整したいボックスの親ボックスを選択すると、親ボックスの上部にメニューが表示されます。このメニューから子ボックスの方向や配置を調整します。

※子ボックスがないボックスでは、メニューは表示されません。

リストやCMSリストについては、色がついた枠をダブルクリックして編集モードに入ると操作が可能となります。

ボックスの並ぶ方向は、矢印の方向メニューを選択して設定できます。例えば、「→」を選択すると、ボックスが左から右へ並びます。

折り返しアイコンを選択すると、ボックスの自動折り返しが設定できます。親ボックスの幅が狭くなり子ボックスが収まらなくなると、自動で折り返えすようになります。

アイコンが並ぶメニューでは、アイコンを選択してボックスの配置を設定します。

水平方向では、左、中央、右に配置。垂直方向では、上部、中央、下部の配置が選択できます。

折り畳まれているメニューを開くと、両端揃えと均等配分が選択できます。

両端揃え ( stretch ) は、要素の高さが親要素の高さに合わせて自動的に伸びるようになります。

子要素の高さにバラつきがある際などに使用すると、自動で高さが揃うので便利です。子要素の縦幅は、autoして設定してください。

均等配分は、親要素の中の子要素を均等な間隔で配置します。

子要素の先頭・末尾を端に寄せる ( space-between ) 配分と、余白を与える ( space-around ) 配分の2つの種類があります。