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

要素を選択してトップバーでサイズを設定します。


STUDIOではいくつかの異なったサイズの単位があります。

●ピクセル(PX)

ピクセルサイズは固定の単位です。 横幅がピクセルに設定されていると、ページや画面のサイズに関係なく、その要素のサイズが変わることはありません。

●パーセント(%)

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

●オート(Auto)

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

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

コンテナボックスの縦幅をautoに設定し、余白の調整はパディングを使用することをお勧めします。

注意:コンテナボックスのサイズ単位をautoにし、その子ボックスを%に設定した場合は機能しません。親ボックスを%またはピクセルで設定したい場合は、子ボックスのサイズが相対的な場合です。

●フレックス(flex)

フレックスは、ボックス内の残りの余白を埋めるために要素の横幅を広げます。

要素の横幅をフレックスに設定するには、まず要素の方向が水平になっていることを確認してから要素を選択し、トップバーのドロップダウンから”flex”を選択します。

フレックスの値は、ボックスの横幅の分数単位を表しています。 例えば、フレックス値が1の要素が4つある場合、それらはボックス横幅に対して等しい割合を占めます。

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

フレックス値が変わる

横幅の異なる写真でギャラリーを作成するには、フレックス値を変更して、より多くのスペースを占めたい写真の値を増やすことができます。

上記の例では、フレックス値を以下のように設定しています。

●vh

heightの単位にて「vh」を指定すると、スクリーンのサイズに応じて自動で高さが変化するようになり、どんなスクリーンサイズでもページいっぱいに表示などのスタイルが設定可能になります。

100%と何が違うの?

画像の幅をビューポートの幅に対する割合で指定するのであれば、確かに % で事足ります。しかし % の場合は対象となる要素のプロパティが親要素のそれと紐付けられるため、必ずしもビューポートの幅が基準になるとは限りません。もし画像が div といったコンテナ要素の中にあれば、そのコンテナ要素の幅に対する割合で計算されます。

▼ 100%の場合(親ボックスの高さに影響される)

Did this answer your question?