よりダイナミックで柔軟なサイズ設定を。新たな単位「dvh」「vw」「rem」が登場

2024年11月14日より、新しいサイズの単位「dvh」「vw」「rem」を提供開始いたしました。
ボックスの縦幅、横幅、文字サイズそれぞれの単位について、次の中から選べるようになりました。

dvh

「dvh（dynamic viewport height）」は縦幅の単位です。
従来より選択できる「vh（viewport height）」と異なり、アドレスバーの表示/非表示といったブラウザ表示の変化に応じて、高さを自動調整します。より端末の利用状況に最適化したレイアウトを実現できるようになりました。

vw, vh

横幅の単位「vw（viewport width）」が新登場。
さらに、「vh」とともに、ボックスの縦横幅だけでなく文字サイズの単位として設定が可能に。
vwを使うと、画面の横幅に連動して、ボックスの横幅や文字サイズを拡大・縮小することができます。キャッチコピーのような、小さな端末では改行したくない要素の設定に最適です。

rem

文字サイズ用の単位「rem（root em）」は、基準の文字サイズに対する、相対的な値で指定することができます。
Studioでは16pxを基準とし、「0.9rem（14px）」「1rem（16px）」「2rem（32px）」のような形になります。
※基準の文字サイズを変更する機能について、今後の機能開発にご期待ください

これらの単位を適切に組み合わせることで、さまざまな画面サイズやデバイスに対応した柔軟なレイアウトを実現できます。
詳しくは Studio Help をご覧ください。

• サイズ単位 | Studio Help（px, %, auto, flex, vw, vh, dvh）

• テキストスタイル | Studio Help（px, rem, vw, vh）

Studio Xアカウント では、イベント情報や機能紹介などの役立つ情報を発信しています。
また Studio Community では、使い方動画の視聴や、ユーザー同士の交流をお楽しみいただけます。皆様のフォロー・ご参加をお待ちしております。