ボックスのレイアウト：サイズ（幅・高さ）を設定する

ボックスのサイズを設定する

利用できる単位の一覧

	単位	概要	ユースケース
1	px	固定サイズを指定する単位	ロゴやアイコンなど、常に一定のサイズで表示したい要素
2	%	親要素（ボックスやページ）のサイズを基準とした相対単位	複数カラムレイアウトの幅指定など、比率をそろえたいレイアウト
3	auto	内包されるコンテンツ量に応じて、自動的にサイズを調整する単位	コンテンツ量が変動する親ボックス
4	flex	横に並ぶ姉妹ボックス同士の幅の比率を指定する単位	写真ギャラリーやカラムレイアウトなど、比率で幅を決めたいレイアウト
5	vw	ブラウザの表示領域（ビューポート）の横幅を基準とする単位	ファーストビューなど、横幅いっぱいに表示したい要素
6	vh	ブラウザの表示領域の縦幅を基準とする単位	画面いっぱいに表示したいセクションなどの要素
7	dvh	実際のコンテンツ表示領域の縦幅を基準とする単位	全画面モーダルや、画面上部・下部に固定表示するボタンやバナー

設定後は、ライブプレビューでレイアウトを確認します。PC以外のブラウザでの表示も確認することを推奨します。

レスポンシブ対応の考え方は、レスポンシブデザインの記事を参照してください。

ピクセルは固定値の単位です。アイコンやロゴなど、サイズを厳密に揃えたいパーツに向いています。

注意：幅をpxで設定した場合

pxで設定した幅は、完全固定値とはなりません。設定した数値が最大値となり、画面幅がそれより狭くなると自動で縮小されます。

%（パーセント）は、親要素（ボックスやページ）のサイズを基準とした相対的な単位です。

親ボックスのサイズ変化に連動し、比率を維持したまま伸縮します。

カラム幅を均等または比率で揃えたいときに使うと、レスポンシブ対応がしやすくなります。

内包されるコンテンツに応じて自動的にサイズが調整される単位です。様々なレイアウトに対応しやすくなるため、特に親ボックスの縦幅は基本的にautoに設定することを推奨します。

Tips: ボックスの境界線をダブルクリックすることでも単位をautoに変更できます。

横並びボックスの幅の比率を指定する単位です。姉妹ボックス間のスペース配分に使用します。

例えば３つ横並びのボックスの横幅を「1flex : 2flex : 1flex」と指定すると、３つの要素が1:2:1の比率で表示されます。

フレックスを使用すると、複雑なレイアウトを効率的に作成することができます。

横幅が異なる写真のギャラリーの作成に適しています。

ブラウザの横幅（表示領域）を基準にした単位です。「100vw」と指定するとブラウザの横幅に応じて、サイズ（比率）が自動調整されます。

ブラウザの縦幅（表示領域）を基準にした単位です。

「100vh」と指定すると、高さが親ボックスに依存せず、どのブラウザサイズでも常に縦幅いっぱいに表示されます。

実際の表示領域を基準に高さを指定します。スマートフォンのURLバー表示・非表示に応じて高さが自動調整されます。

高さの動的変化を避けたい場合は「vh」を使用してください。

width heights 幅 高さ 横幅 縦幅 unit フルスクリーン