【Studio初心者ガイド】サイズ単位について (px,%,auto,flex,vh,vw,dvh)｜Editor 5.0対応

※本記事は Studioの「Editor 5.0」に対応しています。

Webデザインをする際、「要素のサイズ単位」を適切に設定することは、見やすく美しいサイト作りの基本です。

Studioでは、px, %, auto, flex, vh, vw, dvh, remなどの単位が使え、それぞれに異なる役割があります。

これらを正しく使い分けることで、レスポンシブ対応がスムーズになり、デザインの自由度も大幅にアップ！

「固定サイズにするべき？それとも柔軟なレイアウトを作るべき？」そんな疑問を解消するため、本記事では初心者向けに各サイズ単位の特徴や使い方を詳しく解説します。

要素のサイズ単位とは

Webデザインにおいて、要素のサイズを適切に設定することは、見た目の美しさや使いやすさに大きく影響します。

どの単位を選ぶかによって、レスポンシブ対応のしやすさやデザインの自由度が変わるため、それぞれの特徴を理解し、状況に応じて適切に使い分けることが大切です。

サイズ単位の概要

要素のサイズを設定する際に固定サイズの単位と相対的な単位のどちらを使うかを決めることが重要になります。

• 固定サイズ（px） … 画面サイズに関係なく一定の大きさを保つ

• 相対サイズ（%, auto, flex, vh, vw, dvh） … 画面や親要素のサイズに応じて変化する

固定サイズはデザインの安定性を保ちやすいですが、画面サイズが変わるとレイアウトが崩れることがあります。

一方で、相対サイズを使うと柔軟なレイアウトが可能になり、さまざまなデバイスに対応しやすくなります。

このように、どんなデザインを目指すのかによって、適切な単位を選ぶことがポイントです。

縦幅・横幅・文字サイズで使用できる単位

サイズ単位の設定方法

Studio エディタでは、ボックスの幅や高さを変更する際に使用するサイズ単位を指定できます。

1.対象のボックスを選択します。

2.右サイドバーの「ボックス」タブ内にあるレイアウト設定で、幅・高さの入力欄(赤四角）に表示されている単位メニューを選んで、希望するサイズ単位に変更します。

単位を選択すると、指定した値に応じて要素の大きさが反映されます。その後、ライブプレビューや編集画面で表示を確認しながら調整してください。

各サイズ単位の特徴と使い方

それぞれの単位には特性があり、適切に使い分けることで、レスポンシブ対応しやすいレイアウトや、デバイスごとに最適化されたデザインを作ることが可能です。

px（ピクセル）

px（ピクセル）は固定的なサイズを指定する単位です。

Studio ではこの単位を選ぶと、指定された値が基本のサイズとして適用されます。

幅や高さを px で指定する場合、設定値を基準に要素が表示されますが、画面幅が設定したサイズより小さい場合には要素が縮小されることがあります。

%（パーセント）

%（パーセント）は親要素のサイズを基準とした相対的な単位です。

幅または高さを % で指定すると、親ボックスの該当方向の寸法に対して比率でサイズが決まります。

例えば親ボックスの横幅が 1000px の場合、子要素の幅に 50% を指定すると、子要素の幅はその比率分のサイズになります。

pxと%の違い

auto（オート）

auto は、コンテンツのサイズに合わせてボックスの幅や高さを自動で調整する単位です。

コンテンツ量に応じてサイズが変動する要素を扱う際に有効です。

Studio のエディタでは、幅または高さの単位として auto を選択すると、内包されるコンテンツに合わせてボックスのサイズが設定されます。

flex（フレックス）

flex（フレックス） は、横並びに複数のボックスが配置されている場合に指定できます。

値として 1 や 2 などを入力することで、各ボックスが占める大きさを相対的に決定することができます。

% だけでは調整が難しいレスポンシブレイアウトを簡単に実現する際に役立ちます。

同じ階層にサイズが指定された要素がある場合、残りのスペースはflexが設定された要素によって均等に分配されます。

flexを活用することで、複雑なレイアウトを効率よく構築できます。特に、以下のような横幅が異なる写真ギャラリーの配置に適しています。

vw（ビューポートワイド）

vw（ビューポートワイド）は、ビューポートの横幅を基準にサイズを指定する単位です。

Studio では、幅や文字サイズなどに vw を指定することで、表示領域の横幅に対する比率としてサイズが計算されます。1vw は、ビューポート横幅の 1% に相当します。

vh（ビューポートハイト）

vh（ビューポートハイト） は、画面の高さ（ビューポート）を基準にして要素のサイズを指定する単位です。

1vhは画面の高さの1% を意味し、100vhを指定すれば、画面の高さいっぱい(100％)に要素を表示できます。

dvh（ダイナミックビューポートハイト）

dvh（ダイナミックビューポートハイト） は、画面の実際の表示領域を基準に高さを指定できる単位です。

従来のvhは、ブラウザのアドレスバーやツールバーを含めた高さを基準とするため、スマートフォンやタブレットでは表示領域が変動する問題がありました。

dvhを使うと、スクロールやブラウザUIの変化による影響を受けず、常に実際に見えている範囲を基準にレイアウトを調整できます。

高さの変動を避けたい場合は、vhを使用すると一定の高さを維持できます。

dvhとvhの違い

まとめ

それぞれの単位には特徴があり、適切に使い分けることで、より柔軟で使いやすいデザインを実現できます。

Studioでデザインする際は、用途に応じたサイズ単位を意識して設定することが、レスポンシブで美しいデザインの鍵となります。