サイズ単位

単位設定を工夫してレスポンシブにデザインする

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

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

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


ピクセル(px)

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

パーセント(%)

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

オート(auto)

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

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

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

フレックス(flex)

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

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

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

vh

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

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

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

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