---
title: "レイアウト要素：コンテナ、カルーセル、ボトムシート"
description: "フロービルダーで要素をコンテナ、カルーセル、ボトムシートにグループ化する方法を説明します。"
---

レイアウト要素は、他の要素をグループ化してスクリーン上の配置を制御します。

フロービルダーには4種類のレイアウト要素があります：

- **コンテナ**：子要素を縦または横の軸に沿って並べる
- **カルーセル**：一度に1枚のスライドを表示するスワイプ可能なコンテナ
- **ボトムシート**：画面の下から上にスライドし、背後のコンテンツの上に重なって表示されるパネル
- **ディバイダー**：行または列を区切る細い線

:::link
**タブ**もこのカテゴリに含まれますが、別の記事で説明しています。詳細は [タブ](builder-tabs) をご覧ください。
:::

## コンテナ \{#containers\}

:::link
メイン記事：[要素の配置](manage-paywall-ui-elements)
:::

コンテナは要素を縦または横にグループ化します。**縦コンテナ**は要素を行として並べ、**横コンテナ**は列として並べます。

:::tip
コンテナを入れ子にすることで、より複雑なレイアウトを構成できます。
:::

### コンテナの方向を変更する \{#change-container-direction\}

コンテナの方向は固定ではありません。右パネルの **Layout** セクションで **Vertical**、**Horizontal**、**Free** をいつでも切り替えられます。コンテナを削除して作り直す必要はありません。

同じ **Layout** セクションで、スペーシング、アライメント、配置を設定できます。子要素は **Layers** パネルに表示される順に描画されます。ドラッグして並び替えましょう。

### ラップとアンラップ \{#wrap-and-unwrap\}

既存の要素をコンテナに変換するには、要素を選択して **Wrap** [レイヤーアクション](paywall-layout-and-products#layer-actions)を使います。**Layers** パネルから新しいコンテナに追加の要素をドラッグして入れられます。スタックを削除して子要素を1つ上のレベルに昇格させるには、**Unwrap** を使います。

## カルーセル \{#carousel\}

**カルーセル**は、一度に1枚のスライドを表示するスワイプ可能なコンテナです。ユーザーが横にスワイプすると次のスライドが表示され、タイマーによる自動進行も設定できます。

カルーセルには複数の **Slide** レイヤーが含まれます。スライドがアクティブになると、そのレイヤー上の要素が画面に表示されます。

タブと異なり、カルーセルのアクティブなスライドは[選択可能グループ](flow-selectable-elements)として公開されません。スライドは条件や動的テキストから参照できません。ビジュアルのローテーションにはカルーセルを使い、ユーザーによる分岐にはタブを使ってください。

### アクティブなスライドを変更する \{#change-active-slide\}

カルーセルを選択すると、ビルダーに **Slide** ドロップダウンと **+ Add Slide** ボタンを含むポップアップコントロールバーが表示されます。

- **+ Add Slide** をクリックして新しい空のスライドを追加できます。
- **Slide** ドロップダウンでキャンバス上のアクティブスライドを切り替えるか、**Layers** パネルで対応するスライドレイヤーをクリックします。

スライドの順序を変更するには、Layers パネル内のカルーセル内でドラッグします。

{/* TODO: on-device GIF */}

### プロパティ \{#properties\}

#### 自動スクロール \{#auto-scroll\}

自動スクロールは、ユーザーがスワイプしなくてもスライドを自動的に切り替える機能です。

動作は2つのタイミング設定で制御します：

- **Delay** — 各スライドが表示される時間（ミリ秒）。
- **Duration** — スライド間のトランジションにかかる時間（ミリ秒）。

#### カルーセルのサイズ設定 \{#carousel-sizing\}

カルーセル自体のサイズと隣接するスライド間のスペーシングを専用のコントロールで設定します。異なるコンテンツ量のスライドをスワイプしてもレイアウトがずれないよう、**Height** は **Fixed** に設定することをおすすめします。

#### スライドのサイズ設定 \{#slide-sizing\}

スライドごとの **Width** と **Height** を設定します。デフォルトは Fill で、各スライドがカルーセルの寸法に追従します。固定幅を設定すると、隣接するスライドが一部見えるピーク効果を作れます。

#### ドット \{#dots\}

カルーセル下部のページインジケーターです。スライドの総数と現在表示中のスライドをユーザーに伝えます。

**Show dots** トグルをオフにするとスライドインジケーターを非表示にできます。ドットが表示されている場合、以下のプロパティで見た目を調整できます：

- **Color** — 非アクティブなドットの塗りつぶし色。
- **Active Color** — 現在表示中のスライドのドットの塗りつぶし色。
- **Size** — 各ドットの直径（ピクセル）。
- **Gap** — 隣接するドット間のスペーシング。
- **Padding** — ドット行とその上のカルーセルコンテンツとの間のスペース。

## ボトムシート \{#bottom-sheet\}

:::link
ウォークスルー：[ボトムシートですべてのプランを表示する](show-plans-bottom-sheet)
:::

**ボトムシート**は、画面の下から上にスライドして背後のコンテンツの上に重なって表示されるレイアウトパネルです。

シートは常に背後のコンテンツをぼかします。このぼかしはオフにできません。画面読み込み時ではなく、**Show all plans** リンクなどのタップ操作をトリガーにして表示してください。

### 構造 \{#structure\}

ボトムシートには2つのトップレベルレイヤーが含まれます：

- **Heading** — シート上部のコンテナ。**Title** テキストレイヤーと **Close button** Close が事前に配置されています。必要に応じて編集または削除できます。
- **Content** — メインコンテナ。プロダクト、ボタン、リンク、その他の要素を配置できます。

{/* TODO: on-device GIF */}

### 初期表示 \{#initial-visibility\}

デフォルトでは、ボトムシートは画面が描画されると同時に表示されます。必要なときだけ開くようにするには：

1. **シートのコンテンツを先に構築する** — 非表示レイヤーは編集できないため、コンテンツを入れ終わるまでシートを表示したままにする必要があります。
2. **Layers** パネルでボトムシートを選択します。
3. **Visibility** を **Hide** Hide に設定します。

シートはレイヤーツリーに残りますが、画面への描画は停止します。

### ボトムシートのトリガー設定 \{#triggering-the-bottom-sheet\}

非表示のボトムシートを開くには、別の要素に **Show** アクションを設定します：

1. トリガーとなる要素（ボタンやテキストリンクなど）を選択します。
2. 右パネルの **Interactions** タブを開きます。
3. **Add trigger** > **On tap** をクリックし、**Add action** をクリックします。
4. **Action** を **Show** に設定し、ドロップダウンからボトムシートを選択します。

## ディバイダー \{#dividers\}

**水平ディバイダー**と**垂直ディバイダー**は、コンテンツを区切る細い線です。行を分割するには水平ディバイダーを、横コンテナ内の列を分割するには垂直ディバイダーを使います。右パネルで太さ、色、長さを調整できます。