横幅と縦幅の値で要素のサイズを決定します。

要素を選択して、ボックススタイルメニューでサイズを設定します。


STUDIOでは利用できるサイズの単位にはいくつか種類があります。

●ピクセル(px)

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

●パーセント(%)

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

●オート(auto)

横幅または縦幅をオートに設定すると、要素のサイズは自動的で調整されます。

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

親ボックスの縦幅は基本的にautoに設定することをお勧めします。

●フレックス(flex)

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

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

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

●vh

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

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

width heights 高さ 横幅 縦幅 unit

回答が見つかりましたか?