見出し画像

スクリーンサイズに応じた高さ指定の『vh』に対応しました。

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

▼ 100vhの場合(スクリーンサイズの高さいっぱいが担保される)


100%と何が違うの?

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

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

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
15
CEO&Design Chief @STUDIO https://studio.design/ja