ページに配置したボックスは、横幅と縦幅の値で要素のサイズを指定できます。

要素を選択して、エディタ上部のボックススタイルメニューで設定します。ここでは、設定できるサイズ単位をご紹介します。

ピクセルサイズは固定値です。 Studioでは設定した数値が最大値となり、画面幅がそれより狭くなると自動で縮小します。

パーセント（％）は、親ボックスまたはページのサイズに影響される値です。パーセントを使用する場合、要素とページまたはコンテナボックスとの比率は、ボックスやページの縮小と合わせて変化します。

「auto」は子ボックスを持つ親ボックスに設定できる単位です。

要素の境界線をダブルクリックするか、要素を選択してトップバーから「auto」を選択すると、横幅と縦幅は内包されるボックスを基準に自動で設定されます。

様々なレイアウトに対応しやすくなる為、親ボックスの縦幅は基本的にautoに設定することをお勧めします。

姉妹要素がいくつも並ぶ場合に、親ボックスの幅をどんな比率で満たすかを指定する単位です。

例えば３つ横並びの姉妹ボックスの横幅をそれぞれflexで1、2、1と指定すると、以下の例のように、３つの要素が1:2:1の比率で表示されます。

フレックスを使用すると、複雑なレイアウトをすばやく作成することができます。以下のような横幅が異なる写真のギャラリーの作成に便利です。

縦幅の単位を「vh」に指定すると、スクリーンのサイズに対する比率で高さを定義します。

高さが親ボックスに左右されないので、どんなスクリーンサイズでもページいっぱいに表示する設定が可能になります。

width heights 幅 高さ 横幅 縦幅 unit フルスクリーン