ボックスの並び方

STUDIOで配置したボックスの配置を調整する方法を解説します。親ボックスを選択すると表示されるメニューから、ボックスの並び方向などを調整することができます。

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

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

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

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

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

スクリーンショット:配置メニューで調整する様子。

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

スクリーンショット:リストの枠をダブルクリックする様子。

ボックスの方向

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

スクリーンショット:配置メニューで調整する様子。

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

GIF画像:折り返しが設定されたボックスが折り返す様子。

ボックスの配置

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

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

スクリーンショット:配置メニューで調整する様子。

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

スクリーンショット:配置メニューで調整する様子。

両端揃え

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

スクリーンショット:配置メニューで調整する様子。

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

スクリーンショット:配置メニューで調整する様子。

均等配分

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

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

スクリーンショット:配置メニューで調整する様子。
スクリーンショット:配置メニューで調整する様子。

こちらの回答で解決しましたか?