ボックスのサイズ単位
ボックスの大きさ指定に利用できるサイズ単位をご紹介します。適切な単位を選択することで、レスポンシブなデザインや柔軟なレイアウトを実現できます。
サイズ単位の設定方法
ボックスを選択し、エディタ上部のボックススタイルメニューから単位を選択します。
1. px（ピクセル）
ピクセルは固定値です。設定した数値が最大値となり、画面幅がそれより狭くなると自動で縮小されます。
ユースケース
ロゴやアイコンなど、常に一定のサイズを保ちたい要素
2. %（パーセント）
%（パーセント）は、親要素（ボックスやページ）のサイズを基準とした相対的な単位です。親要素のサイズが変わっても、子要素のサイズ比率が維持されます。
ユースケース
複数カラムレイアウトの幅指定
3. auto（オート）
auto（オート）を親ボックスに設定すると、内包されるコンテンツに応じて自動的にサイズが調整されます。様々なレイアウトに対応しやすくなるため、特に親ボックスの縦幅は基本的にautoに設定することを推奨します。
上部の単位選択に加え、ボックスの境界線をダブルクリックすることでもautoに変更できます。
ユースケース
レスポンシブ時やもっと見るボタンなどで、コンテンツ量が変動する親ボックス
4. flex（フレックス）
横に並ぶボックス同士の幅の比率を指定する単位です。姉妹ボックス間でスペースを分配する際に使用します。
ユースケース
写真ギャラリーのレイアウト
カラムレイアウトの比率指定
例えば３つ横並びのボックスの横幅を「1flex : 2flex : 1flex」と指定すると、以下の例のように、３つの要素が1:2:1の比率で表示されます。
フレックスを使用すると、複雑なレイアウトを効率的に作成することができます。以下のような横幅が異なる写真のギャラリーの作成に適しています。
5. vw（ブラウザの表示領域に合わせた横幅）
ブラウザの横幅（表示領域）を基準にした単位です。「100vw」と指定するとブラウザの横幅に応じて、サイズ（比率）が自動調整されます。
ユースケース
横幅いっぱいの背景画像
6. vh（ブラウザの表示領域に合わせた縦幅）
ブラウザの縦幅（表示領域）を基準にした単位です。「100vh」と指定すると、高さが親ボックスに左右されないので、どんなブラウザサイズでも縦幅いっぱいに表示されます。
7. dvh（実際の表示領域に合わせた縦幅）
ブラウザ上の実際のコンテンツ表示領域を基準にした単位です。
スマートフォンでWebサイトを見るとき、画面上部のURLバーが表示されたり隠れたりすることで、実際に見える領域が変化します。「dvh」はこのような画面スクロールによって変化する見える領域に合わせて自動的に高さを調整します。
高さの動的な変化を避けたい場合は「vh」をご利用ください。
vhとの違い
vh：ブラウザの画面全体を基準にするため、URLバーの表示/非表示で見え方が変わる
dvh：実際に見える領域を基準にするため、常に適切な高さで表示される
ユースケース
全画面表示のセクション
高さを画面いっぱいに取るモーダル
画面の上部や下部にボタンやバナーなどを固定表示する場合
使い分けのポイント
サイトのデザインやレイアウトによって適切なサイズ単位を選択することで、より柔軟で管理しやすいレイアウトが実現できます。以下の一般的な使用例を参考にサイトにあったサイズ単位を選択してください。
固定サイズが必要な場合：px
親要素に対する相対指定：%
コンテンツに応じた自動調整：auto
要素間の比率指定 ：flex
画面サイズ（ビューポート）に連動 ：vw/vh/dvh
width heights 幅 高さ 横幅 縦幅 unit フルスクリーン