---
type: reference
title: サイズとレイアウト
summary: width、height、overlay-width、overlay-height の各属性が、inline、modal、fullscreen の各レイアウトで caputchin-game 要素のサイズをどう決めるか。
---

`<caputchin-game>` は 3 つのレイアウトでレンダリングできます（`layout` 属性で設定）：`inline`、`modal`、`fullscreen`。どうサイズを決めるかはレイアウトによります。modal と fullscreen のレイアウトは**2 つの別々のボックス**を見せるからです。

- **ページ内の要素**：あなたのページのフローに収まるもの。`inline` ではそれはゲームパネル全体で、`modal` / `fullscreen` では、訪問者がゲームを開くためにクリックする小さなチェックボックスです。
- **ゲームボックス**：`modal` / `fullscreen` で上に開くダイアログで、中にゲームが入っています。（`inline` では別のダイアログはありません。パネルがゲームそのものです。）

4 つの属性がこの 2 つのボックスのサイズを決めます。各値は `auto`（既定）、`full`（利用可能なスペースを覆う）、または `480` のような正のピクセル数のいずれかです。

| 属性 | サイズを決める対象 | 適用先 |
|---|---|---|
| `width` / `height` | ページ内の要素 | すべてのレイアウト |
| `overlay-width` / `overlay-height` | ゲームボックス（ダイアログ + ゲーム） | `modal`、`fullscreen` |

## Inline

inline はボックスが 1 つなので、`width` / `height` がパネル全体のサイズを決めます。`overlay-width` / `overlay-height` はここでは何もせず無視されます（設定するとウィジェットが警告をログに記録します）。

```html
<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>
```

## Modal と fullscreen

ここでは 2 つのボックスは独立しています。`width` / `height` はあなたのページの**入口チェックボックス**のサイズを決め、`overlay-width` / `overlay-height` は訪問者がクリックしたときに開く**ダイアログとゲーム**のサイズを決めます。

```html
<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>
```

`overlay-width="full"` はゲームをその軸に沿ってダイアログいっぱいに広げます。ピクセル値はゲームをそのサイズに固定します（モーダルがその周りをぴったり包みます）。`fullscreen` ではダイアログがすでにビューポートを覆っているので、`overlay-*` はゲームが伸びて埋めるか、自分のサイズで中央に収まるかを制御します。

## ゲームボックスを未設定のままにするとき

`overlay-width` / `overlay-height` を設定しないと、ゲームボックスは**ゲームの作者**がゲームのために選んだサイズを使います（その好ましいフットプリントで、ゲームの `caputchin.json` で宣言されます）。なのでほとんどの場合、あなたのページレイアウトには `width` / `height` だけが必要で、ゲームは自分のサイズを適切に決めます。それを上書きしたいときだけ `overlay-*` を設定してください。

## ピクセル値

ただの数字は CSS ピクセルです：`width="500"` と `width="500px"` は同等です。ゼロ、負、非数値の値は拒否されます（属性は既定に戻り、ウィジェットが警告をログに記録します）。

## あわせて読む

- [ゲームウィジェット要素](/docs/getting-started/add-a-game)：`<caputchin-game>` の属性一式。
- [ウィジェットのメソッドとイベント](/docs/references/widget-methods-and-events)：ウィジェットを駆動し、それに反応する。