UIレイアウトは主にControlノード体系 + コンテナ + アンカーポイントによって構成されます。
レイアウトコンポーネント
コンテナ（自動レイアウトの鍵）
| コンテナ | 用途 |
|---|---|
HBoxContainer |
横方向に配置 |
VBoxContainer |
縦方向に配置 |
GridContainer |
グリッド形式 |
MarginContainer |
余白を設定 |
CenterContainer |
中央に配置 |
PanelContainer |
背景を持つコンテナ |
| ... | その他のコンテナ |
コンテナとその設定により、配置方向（上、下、左、右、中央）や拡張・収縮の挙動が決まります。
アンカーポイントによる配置
Godotでは重要なルールがあります：「親ノードの属性が子ノードの動作を決定する。」 簡単に言うと：もし親ノードがコンテナであれば、子ノードのアンカーポイントは無効になります。 アンカーポイントを使って配置を行うこともできます。事前設定されたものを使うことも、独自に設定することも可能です。
アンカーポイント（百分比で位置を指定）
アンカーポイントの値は通常0.0から1.0の範囲です。これは親ノードのサイズに対する各辺（左、上、右、下）の比率を定義します。
- 0.0： 親ノードの左端または上端。
- 0.5： 親ノードの中央。
- 1.0： 親ノードの右端または下端。
アンカーオフセット（ピクセルでの微調整）
オフセットはアンカーポイントに基づいたピクセル数の加算または減算です。
Anchor Leftが0.5（中央）で、Offset Leftが20の場合：- ノードの左端は親コンテナの中央 + 20ピクセルの位置になります。
Anchor Rightが1.0（右端）で、Offset Rightが-50の場合：- ノードの右端は親コンテナの右端から50ピクセル内側の位置になります。
コンテンツコンポーネント
基本的なUIコントロール
テキスト系
| ノード | 説明 |
|---|---|
| **Label** | 静的テキストを表示 |
| **RichTextLabel** | フォント色や画像、BBCode対応のテキスト |
| **LineEdit** | 単一行入力 |
| **TextEdit** | 複数行入力 |
ボタン系
| ノード | 説明 |
|---|---|
| **Button** | 標準ボタン |
| **CheckBox** | チェックボックス |
| **CheckButton** | スイッチ式ボタン |
| **OptionButton** | ドロップダウン選択 |
| **MenuButton** | メニュー付きボタン |
| **LinkButton** | リンクスタイルのボタン |
画像 / 表示系
| ノード | 説明 |
|---|---|
| **TextureRect** | 画像表示 |
| **NinePatchRect** | 九分割拡大背景 |
| **ColorRect** | 純色矩形（マスク、背景） |
| **VideoStreamPlayer** | 動画再生（UIで使用可能） |
進捗 / 数値表示コントロール
血条、ロードバー、音量調節などに使われます。
| ノード | 説明 |
|---|---|
| **ProgressBar** | プログレスバー |
| **TextureProgressBar** | カスタム画像のプログレスバー |
| **SpinBox** | 数値入力（増減ボタンあり） |
| **HSlider / VSlider** | スライダー |
| **HScrollBar / VScrollBar** | スクロールバー |
ウィンドウ / パネル系
| ノード | 説明 |
|---|---|
| **Panel** | 標準パネル |
| **Window** | 独立ウィンドウ（Godot 4で強化） |
| **Popup** | ポップアップベース |
| **PopupPanel** | パネル型ポップアップ |
| **AcceptDialog** | 確認用ダイアログ |
| **ConfirmationDialog** | 確認/キャンセルダイアログ |
| **FileDialog** | ファイル選択 |
| **ColorPicker** / **ColorPickerButton** | カラーピッカー |
Panel = 背景と枠線を持ち、Themeで制御可能なUIコンテナ/背景コントロール
よく使う場面：パネル設定、ポップアップの背景、HUDの背景、カード
PanelはTheme内のStyleBoxTextureを使用して背景と枠線を描画します：
- 背景色や背景画像
- 枠線の幅、色、角丸
- すべてThemeで統一的に制御可能
- 子ノードの配置やスペースを自動処理しない
- 内部にレイアウトコンテナを追加するか、
PanelContainerを使用する必要があります
テーマ内で新しいPanelタイプを設定し、スタイルを変更することも可能です。また、パネル内の「テーマオーバーライド」で新しい「StyleBoxTexture」を設定し、「AtlasTexture」を「サブ領域編集」することで、サブ領域を指定できます。
Panelのサイズについて、Panelは「サイズがある（rect）」場合にのみ背景を描画します。Panelは自身でサイズを生成しません。したがって、以下の2つの方法しかありません：
1️⃣ 親コンテナによって広げる（推奨） 2️⃣ 手動でサイズを指定
リスト / データ表示系
| ノード | 説明 |
|---|---|
| **ItemList** | シンプルなリスト |
| **Tree** | ツリー構造 |
| **TabBar** | タブバー |
| **OptionButton** | 軽量なドロップダウンリスト |
インタラクティブ & アシストコントロール
| ノード | 説明 |
|---|---|
| **TooltipLabel** | ヒント情報を表示 |
| **TextureButton** | 画像を表示するボタン |
| **TouchScreenButton** | タッチスクリーン用ボタン |
| **Control** | すべてのUIの基底クラス |
| **CanvasLayer** | UIレイヤー管理（HUDでよく使われる） |
コンテナのサイズ
GodotのUI（Control / Container）コンテナのサイズは基本的に以下の3つのいずれかからのものです： 1️⃣ 親ノードが割り当てた空間（最も一般的） 2️⃣ 自身の anchors / offsets（手動または予設） 3️⃣ Containerがルールに従って子ノードのサイズを計算・割り当て（逆は少数例外）
Godot UIにおいて：
🔽 親 → 子：サイズを制御できる 🔼 子 → 親：サイズには影響しない
これはWeb（HTML）の考え方に大きく異なります。
コンテナの状況分類
サイズが(0, 0)のコンテナ
通常のControl（Panelを含む）はサイズを設定しなければ：
- デフォルトのサイズは(0, 0)
- 子ノードがあるからといってサイズが大きくなるわけではない
- 親ノードのサイズを継承しない
👉 結果：
- Buttonは表示される（自身にサイズがある）
- Panelの背景は見えない（サイズが0）
✅ Control / Panel = 必ず親によってサイズを広げられるか、手動でサイズを指定する必要がある
Container（VBox / HBox / Gridなど）
コンテナの基本的なルール
コンテナのサイズ：親ノードに依存 コンテナは子ノードのサイズを割り当てるだけ
唯一の「子 → 親」への影響（例外）
🔹 最小サイズ（Minimum Size）
一部のControlは最小サイズの提案を提供します：
- Label（文字サイズ）
- Button（テキスト + パディング）
- TextureRect（画像サイズ）
- Panel
これらが有効になるのは以下のときのみ：
- 親ノードがContainer
- 親ノードがレイアウトを計算するときに
min_sizeを参照する ⚠️ しかし、親コンテナのサイズは変化しない
テーマの作成
Web開発におけるCSSとは異なり、Godotは**Theme（テーマ）とStyleBox（スタイルボックス）**を組み合わせたシステムを使用しています。 以下のような3つの主な方法でスタイルを作成または設定できます：
1. テーマエディタを使用（推奨）
これは最も一般的かつ効率的な方法です。Themeリソースを作成することで、ボタンやラベルなどのコントロールの外観を全体的に定義できます。
- テーマの作成：ファイルシステムで右クリック -> 新しいリソース -> Theme を作成
- スタイルボックスの編集 (StyleBox)：
- StyleBoxFlat：純色、角丸、枠線、影を表現する（最も一般的）
- StyleBoxTexture：画像を背景として使用（9分割拡大に対応、CSSの
border-imageに似る） - タイプのバリエーション (Type Variations)：ツールバーの特定のボタンを赤くしたい（例：「削除」ボタン）場合、テーマ内で
ToolButtonのバリエーションを作成します。基本タイプを設定した後、デフォルトのスタイルを編集できます。 - テーマの適用：特定のタイプのテーマバリエーションを使用するには、インスペクターの「Type Variation」で設定します（gd 4.6以前は手動で入力が必要、4.6では時々自動読み込みされず、テーマバリエーションを作成する必要がある場合があります）。
2. 局所的なオーバーライド（Theme Overrides）
特定のノードのスタイルを変更したいが、全体のテーマに影響させたくない場合は、この機能を使用します。ノードの「インスペクター (Inspector)」パネルにあるTheme Overridesを使用してください。
- この場所でフォントサイズ、色を変更したり、
StyleBoxを置き換えることができます。 - 注意：局所的なオーバーライドを多用するとUIの保守性が低下します。できる限り全体のテーマで処理することを推奨します。
3. GDScriptでコードでスタイルを記述
ゲームのロジックに応じてスタイルを動的に変更したい場合は、コードを使用します。
基本的な属性の変更
# 色を変更
$Label.add_theme_color_override("font_color", Color.RED)
# フォントサイズを変更
$Label.add_theme_font_size_override("font_size", 32)
動的にStyleBoxを作成
円角矩形の背景をコードで作成する場合：
func _ready():
var style = StyleBoxFlat.new()
style.bg_color = Color(0.2, 0.6, 1.0) # 天青色
style.set_corner_radius_all(10) # 角丸を設定
style.border_width_left = 2 # 枠線の幅を設定
# ボタンの"normal"状態に適用
$Button.add_theme_stylebox_override("normal", style)