Godot入門：MarginContainerの使い方と活用法

はじめに

ボタンやテキストを並べたとき、画面の端にぴったりくっついて窮屈に見えてしまった——そんな場面で活躍するのが MarginContainer です。子ノードの周囲に余白（マージン）を設定するだけのシンプルなコンテナですが、UIの見栄えを整えるうえで欠かせない存在です。

この記事では、MarginContainer の仕組みと使いどころ、マージンの設定方法を紹介します。

MarginContainerとは？

MarginContainer は ひとつの子ノードを内包し、その四辺（上下左右）に余白を加えるUIコンテナです。CSSの padding に相当する役割を担います。子ノード自体には手を加えず、コンテナ側でスペースを確保するのが特徴です。

額縁をイメージしてください。絵（子ノード）のサイズは変えずに、額縁（MarginContainer）の内側の余白を広げると、絵の周りに空間が生まれます。MarginContainer はまさにその「額縁の余白」を担うノードです。

継承ツリーは MarginContainer → Container → Control → CanvasItem → Node です。子ノードは 1つだけが基本で、複数並べたいときは内側に VBoxContainer や HBoxContainer を挟みます。




MarginContainer 余白なし vs 余白あり の比較図
左：余白なし（窮屈）／右：MarginContainer で余白を追加した状態

このノードを使うべき場面

  • パネルやダイアログの内側余白：Panel の中に MarginContainer を置いてコンテンツとの間にスペースを確保するとき
  • 画面端からの余白：HUD の要素を画面端から一定距離だけ内側に配置したいとき
  • ボタン・ラベルの周囲スペース：テキストが枠にぴったりくっついて見づらいとき
  • スクロールコンテンツの内側パディング：ScrollContainer 内のリストに上下左右の余白をつけたいとき
  • カードUIのコンテンツ余白：カード風パネルの内側にテキストやアイコンを余裕を持って配置するとき

別のノードが適切な場面：

  • 複数の子ノードを整列させたい → HBoxContainer や VBoxContainer でまず整列し、その外側に MarginContainer を被せる
  • 子ノード同士の間隔だけを調整したい → 各コンテナの separation テーマ定数で対応する方がシンプル

主なプロパティと機能

MarginContainer 固有の追加プロパティはなく、マージンは テーマオーバーライド（Theme Overrides）の定数 で設定します。インスペクターの「Theme Overrides > Constants」から4方向それぞれに値を入力します。




インスペクターの Theme Overrides > Constants でマージンを設定する画面” style=”max-width:100%;height:auto;”><figcaption>インスペクターの「Theme Overrides > Constants」でマージン値を入力する</figcaption></figure> <table> <thead> <tr> <th>定数名</th> <th>役割</th> <th>デフォルト値</th> </tr> </thead> <tbody> <tr> <td><code>margin_left</code></td> <td>左側の余白（ピクセル）</td> <td>0</td> </tr> <tr> <td><code>margin_right</code></td> <td>右側の余白（ピクセル）</td> <td>0</td> </tr> <tr> <td><code>margin_top</code></td> <td>上側の余白（ピクセル）</td> <td>0</td> </tr> <tr> <td><code>margin_bottom</code></td> <td>下側の余白（ピクセル）</td> <td>0</td> </tr> </tbody> </table> <p>コード例：GDScript でマージンを動的に設定する</p> <pre><code class=@onready var margin: MarginContainer = $MarginContainer func _ready() -> void: # 四辺すべてに16pxの余白を設定 margin.add_theme_constant_override("margin_left", 16) margin.add_theme_constant_override("margin_right", 16) margin.add_theme_constant_override("margin_top", 16) margin.add_theme_constant_override("margin_bottom", 16)

コード例：MarginContainer を使った基本的なシーン構成

# MarginContainer
#   └─ VBoxContainer
#        ├─ Label ("タイトル")
#        └─ Button ("スタート")

# MarginContainer に余白を設定するだけで
# 内側の VBoxContainer ごと余白が生まれる
margin.add_theme_constant_override("margin_left",  24)
margin.add_theme_constant_override("margin_right", 24)
margin.add_theme_constant_override("margin_top",   16)
margin.add_theme_constant_override("margin_bottom",16)

もっと使いこなす：カスタマイズできるパラメータ

まずは基本を動かしてみてから、余裕が出たら試してみてください。

パラメータ 変えると何が起きるか
四辺を同じ値に揃える 均一な余白になり、カードUIやダイアログに落ち着いた印象を与える。16〜24px が汎用的な出発点
左右だけ大きくする 横長テキストコンテンツの可読性が上がる。スマホUI でよく使われるパターン
上下だけ大きくする 縦スクロールコンテンツの先頭・末尾に「呼吸」をつくれる
実行中に値を変える アニメーションと組み合わせて「開く」「閉じる」ような演出に使える
MarginContainer を入れ子にする 外側は画面端マージン、内側はコンテンツ間パディング、と役割を分けて管理できる




MarginContainer を使ったHUDの余白設定例
HUD 全体を MarginContainer で包むと、画面端から一定の余白を確保できる

まとめ

MarginContainer は 「子ノードの周囲に余白を追加するだけのシンプルなコンテナ」 です。

  • マージンは Theme Overrides の定数（margin_left 等）でピクセル単位に指定する
  • 複数の子を並べたいときは内部に VBoxContainer / HBoxContainer を挟む
  • Panel や ScrollContainer と組み合わせると、洗練されたUIが手軽に作れる

次回は、子ノードを常に中央に配置してくれる CenterContainer を紹介します。

シリーズ：Godot 4 ノード解説

この記事はGodot 4.xをもとに執筆しています。

コメント