こんにちは！会社員クリエイターのこばたです！
情報確認：2026年11月15日。公式ヘルプに基づき説明を更新しました。掲載画像には旧エディタの画面が含まれます。操作名が異なる場合は本文の手順と末尾の公式ヘルプをご確認ください。
今回は、Studioのサイズ単位（px・%・auto・flex・vh）の使い分けを解説します。vwとdvhについても補足します。
親ボックスに合わせるのか、画面に合わせるのか、内容に合わせるのかを整理すると、レスポンシブ対応で迷いにくくなります。
具体的なレイアウト例を見ながら、自分のページに合う単位を選んでいきましょう。
要素のサイズ単位とは
Studioではpx・%・auto・flexに加え、画面を基準にするvw・vh・dvhも利用できます。幅や高さの設定欄で、目的に合う単位を選びます。
それぞれに特徴があるので、ポイントを押さえて使いこなしていきましょう。
縦幅は「auto」に設定することが多いので、横幅をメインで解説していきます。縦幅のサイズ単位を変える場合にも活用していただけたらと思います。
pxについて
pxは、ロゴやアイコンなどの寸法を数値で指定するときに使います。ただしStudioの幅のpx指定は完全な固定幅ではなく、指定幅より画面が狭い場合には縮小されます。
特徴
- デザインにおいて具体的なサイズを要求する場合に有効です。
- 画像や特定のコンテンツのサイズを正確に設定したい場合に使用します。
- スマートフォンで文字や画像が収まるか、実際の表示幅で確認してください。
％について
親ボックスまたはページサイズに対しての一定比率を保つ設定で、親要素に対する相対的なサイズ指定に適しています。
例えば、余白などの影響を受けない幅1000pxの親ボックスに、幅50%の子ボックスを置くと500pxが目安になります。実際には親のパディングや並び方も合わせて確認してください。
特徴
- 親要素のサイズに応じて自動的にサイズが調整されます。そのため、異なるデバイスや画面サイズに自動で対応してくれ、レスポンシブ設定の時の作業が大幅に削減されます。
autoについて
「auto」は子ボックスを持つ親ボックスに設定できる単位で、子ボックス（画像・テキスト・アイコン）のサイズに親ボックスのサイズを自動で合わせてくれる設定です。
ボックスを選び、右パネルの［ボックス］→［レイアウト］で幅または高さをautoにします。ボックスの境界線のダブルクリックでも切り替えられます。
様々なレイアウトに対応しやすくなる為、親ボックスの縦幅は基本的にautoに設定することがレスポンシブ設定を楽にするコツです。
特徴
- 要素のサイズが内容に応じて自動的に調整されます。これにより、コンテンツの追加や変更に対して柔軟に対応できます。
- 要素の大きさに依存してサイズが決まるため、動的なレイアウトに適しています。例えば、テキストや画像などのコンテンツが含まれる要素の調整に適しています。
テキストを追加すれば、合わせてボックスは大きくなりますし、文字を減らせば小さくなります。
flexについて
flexは、横に並ぶ同じ階層のボックスの幅を、1：1や1：2などの比率で配分するときに使います。カードを均等に並べたり、固定幅の要素の隣に可変幅の要素を置いたりする場合に便利です。
特徴
- 横並びのカードなど、余白を確保しながら幅を分けたいレイアウトで活用できます。
全てがflexの場合
今回は、「１：１：１」から「１：２：１」で設定してみます。
１：１：１の場合
１：２：１の場合
片方がpx、片方をflexにした場合。
片方をpx、もう片方をflexにすると、固定幅の要素と余白を除いた残りの幅をflex側に割り当てられます。計算するときは、親のパディングとボックス間のgapも含めて考えましょう。
vhについて
vhはブラウザの表示領域の高さを基準にする単位で、100vhが高さ全体の目安です。スマートフォンではURLバーなどの影響があるため、実機の表示を確認しましょう。
特徴
- 1vhは画面の高さの1%に相当します。
- 高さが親ボックスに左右されないので、どんなスクリーンサイズでもページいっぱいに表示する設定が可能です。
vw・dvhも使い分ける
vwは表示領域の横幅を基準にする単位です。dvhは、スマートフォンのURLバーの表示・非表示などに応じて変わる表示領域の高さを基準にします。全画面の要素は、vhとdvhを実機で比較して選んでください。
応用編
ここでは、実践的な活用法について、解説していきます。
ぜひ手を動かしながら学んでみてください。
autoを用いた実践的活用法
ボタン作成をします。
「送信」の文字だけだと、枠が文字サイズになってしまうので、パディングをつけて調整します。
文字を変えた場合にも設定を変えることなく、枠が自動調整されます。
※変化がわかりやすいように「送信 Send」と打ち込んでいます。
flexを用いた実践的活用法
横幅に対してボックスを均等にしたいときにボックスを全部選択します。
単位をflexに変更すると、各幅が均等配列されます。
5つすべてを1flexにすると、配置に使える幅を均等に分けられます。gapや親のパディングがある場合、各ボックスが親の横幅の20%になるわけではありません。
まとめ
いかがでしたでしょうか。
サイズの基準を意識して単位を使い分け、文章量や画面幅が変わっても読みやすいレイアウトを作りましょう。
STUDIOでサイトの制作を依頼したい、STUDIOでWebサイト作りたいけど、何から始めていいか分からない…という方へ。STUDIOにてサイトの制作依頼やメンター等の依頼も承っておりますので、ぜひお問い合わせよりご連絡ください！
最後までお読みいただきありがとうございました。
