概要
gusuku Everysiteのレイアウト作成において、要素のサイズを指定する方法はいくつかあります。本ドキュメントでは、px、vw、vh、%、remのそれぞれの指定方法の特長と、メリット・デメリットをまとめます。プロジェクトや要素の特性に応じて適切な指定方法を選択することで、柔軟でメンテナンス性の高いデザインを実現できます。
サイズ指定方法の特長と使い分け
※幅100vwを指定して全画面表示にしたい場合でも、ブラウザによっては、スクロールバーの幅分はみ出るため、横スクロールが発生する場合があります。
参考：100vwで画面からはみ出るのはスクロールバーの幅を含むから【解決方法は？】
サイズ指定の使い分けの原則
絶対的なサイズが必要な場合：pxを使用します。（例：罫線の太さ、特定のアイコンサイズ）
画面幅に連動させたい場合：vwを使用します。（例：メインビジュアルの高さ、画面幅いっぱいに広がる要素）
画面の高さに連動させたい場合：vhを使用します。（例：画面いっぱいのヒーローセクション、スクロールを伴わない要素）
親要素との相対的な比率で指定したい場合：%を使用します。（例：コンテナ内のカラム幅、パディング）
アクセシビリティを考慮し、ユーザーの文字サイズ設定に連動させたい場合：remを使用します。（例：フォントサイズ、行間、マージン）
応用: remとpxの併用
ベースとなるフォントサイズや主要な間隔にはremを使用し、ユーザーの設定に柔軟に対応できるようにします。
ブレイクポイントの設定(下部※参照)や、デザイン上でサイズが固定であるべき要素（例：画像やアイコンの基本サイズ）にはpxを使用することで、柔軟性とデザインの正確性を両立できます。
※現在、ユーザー側でブレイクポイントの設定をする機能はありません。エブリサイトが指定するブレイクポイントはあります。（2025/12/16現在）
レイアウトに関する制約 (補足)
gusuku Everysiteでは、現時点でCSSのcalc()に相当する機能は提供されていません。（2025/12/16現在）
そのため以下のようなレイアウトは現状、実現が難しい点にご留意ください。
固定幅・固定の高さのタイルと可変タイル（%やvw/vh指定）を組み合わせて、常に画面の幅・高さにぴったり収まるような動的な全画面レイアウト。
例: ヘッダー（固定50px）とメインコンテンツ（残りの高さ）を組み合わせたレイアウト。
レイアウト設定においては、先に説明したpx、vw、%などの単位指定と、「内容に応じて幅/高さを拡張する」設定を組み合わせて対応してください。
レイアウト設定「内容に応じて幅を拡張する」
各タイルの「レイアウト設定」には、「幅」タブに「内容に応じて幅を拡張する」、「高さ」タブに「内容に応じて高さを拡張する」というチェック項目が用意されています（初期設定ではオン）。
この設定は、タイル内に配置されたコンテンツ（内容）に合わせて、タイルの幅や高さを自動的に広げるかどうかを選択するためのものです。
例えば、「幅」の指定サイズよりも大きなコンテンツが挿入された場合、以下のような挙動の違いがあります。
「内容に応じて幅を拡張する」を選択した場合:
コンテンツのサイズに合わせて、タイルも幅が拡張されます。「内容に応じて幅を拡張する」を選択しない場合:
コンテンツは指定したタイルの幅とは関係なく描画され、タイルの幅は変わりません。
補足： どちらの指定方法でも、挿入されるコンテンツが大きい場合は、画面の表示範囲を超えてはみ出す可能性がある点にご留意ください。
「レイアウト設定」のその他の設定項目については、以下の記事も併せてご確認ください。