---
title: "エレメントのスタイリング"
description: "エレメントの見た目（塗りつぶし、ボーダー、エフェクト、タイポグラフィ、状態、プロジェクト全体のスタイル）を設定します。"
---

右パネルの **Design** タブで、各エレメントの見た目を設定します。使用できるプロパティはエレメントの種類によって異なりますが、多くのエレメントは共通のスタイリングオプションを持っています。

## サイズとスペース \{#size-and-space\}

:::link
メイン記事: [エレメントの配置](manage-paywall-ui-elements)
:::

### 表示 \{#visibility\}

**Visibility** トグルは、エレメントを画面に表示するかどうかを制御します。

* Show **Show**（デフォルト）: エレメントは常に表示されます。
* Conditional **Conditional**: 特定の条件が満たされた場合のみエレメントが表示されます。詳しくは[条件付き表示](onboarding-element-visibility)を参照してください。
* Hide **Hide**: エレメントは常に非表示になります。エレメントを削除せずに一時的にフローから除外したい場合に使用します。

### サイズ指定 \{#sizing\}

各エレメントには **Width** と **Height** の設定があり、3つのモードから選択できます。

* **Fill**: 親要素の空きスペースをすべて占有するように伸長します
* **Hug**: エレメントのコンテンツに合わせて縮小します
* **Fixed**: 寸法に正確なピクセル値を設定します

### スペーシング \{#spacing\}

**Spacing** セクションには、2つのレイヤーを持つボックスモデルが表示されます。

* **Margin**: エレメントと隣接要素との間のスペースです。値に関わらず、親コンテナの境界を超えて広がることはありません。
* **Padding**: エレメントのボーダーとコンテンツの間のスペースです。

各辺ごとに個別に値を設定できます。

:::note
テキストエレメントにはマージンのみがあります。スクリーンにはパディングのみがあります。コンテナや子コンテンツを持つその他のエレメントでは、両方が使用できます。
:::

## 塗りつぶし \{#fill\}

**Fill** セクションはエレメントの背景を設定します。ソリッドカラー、グラデーション、画像、動画の4種類の塗りつぶしタイプが使用できます。

このプロパティを使用して、スクリーン全体のヒーロー画像・動画を設定することもできます。

* **ソリッドカラー** Solid color。カラーピッカーを使用するか、16進数値を入力するか、[プロジェクト全体のカラースタイル](#color-styles)を割り当てます。**opacity** を調整して背景を半透明にできます。
* **グラデーション** Gradient。2つ以上のカラーストップでグラデーション塗りつぶしを追加します。ストップをドラッグしてトランジションを調整し、グラデーションの角度を変えて方向を制御します。

* **画像** Image または **動画** Video。[画像・動画](custom-media)をエレメントの背景として設定します。

## ボーダー \{#border\}

ボーダーはデフォルトでオフになっています。右パネルの **Border** の横にある Plus をクリックして追加します。ボーダーを削除するには、**Border** 見出しの横にある Close をクリックします。

ボーダーが存在する場合、以下を設定できます。

* **Color**: カラーピッカーを使用するか、16進数値を入力するか、[プロジェクト全体のカラースタイル](#color-styles)を割り当てます。**opacity** を調整してボーダーを半透明にできます。
* **Width**: ボーダーの太さ（ピクセル単位）。

## コーナー \{#corners\}

**Corners** セクションはボーダー半径（角丸）を設定します。

* **Radius スライダー**: 4つすべてのコーナーに同じ半径を設定します
* **コーナーごとの切り替え** Per Corner: 有効にすると、各コーナーに異なる半径を個別に設定できます

## エフェクト \{#effects\}

**Effects** の横にあるプラスボタン Plus をクリックして、1つ以上のビジュアルエフェクトを追加します。

* **Drop shadow**: エレメントの背後に影を表示します
* **Inner shadow**: エレメントの境界内に影を表示します
* **Background blur**: 背景をぼかします
* **Layer blur**: エレメントとその子要素をぼかします

同じエレメントに複数のエフェクトを重ねることができます。表示トグル Show で一時的にエフェクトを無効化できます。

## アニメーション \{#animation\}

**Animation** の横にある Plus ボタンをクリックして、アニメーションエフェクトを追加します。現在、利用できるアニメーションは **Pulse** のみです。エレメントがリズミカルに拡大・縮小して注目を集めます。

Pulse アニメーションは以下のパラメーターで設定できます。

| パラメーター | 説明 |
|-----------|-------------|
| Scale amount (%) | 元のサイズに対してエレメントがどれだけ拡大するか |
| Duration (ms) | 1回のアニメーションサイクルの長さ |
| Delay between loops (ms) | 繰り返しの間の一時停止 |
| Shadow color | 点滅するシャドウエフェクトの色 |
| Shadow size (px) | 点滅するシャドウのサイズ |

### アニメーションのプレビュー \{#preview-the-animation\}

ビルダーはデフォルトで静止したスクリーンを表示します。アニメーションを確認するには、以下のいずれかの方法でオンにします。

- デバイスプレビューの上にある **Toggle animations** Toggle animations ボタンをクリックします。スクリーンのアニメーションのオン・オフを切り替え、オンにすると再度クリックするまでアニメーションが連続再生されます。このボタンは、アクティブなスクリーンに少なくとも1つのアニメーションが含まれている場合にのみ表示されます。
- スクリーンレイヤーの横にある三点アイコンからスクリーンの[コンテキストメニュー](paywall-layout-and-products#screen-actions)を開き、**Play Animation** を選択します。

## 外観 \{#appearance\}

* **Opacity**: 0%（透明）から100%（不透明）の範囲で設定します
* **Rotation**: 度数値を入力してエレメントを回転させます

## タイポグラフィプロパティ（テキストエレメント） \{#typography-properties-text-elements\}

テキストエレメントには以下のコントロールを含む **Typography** セクションが表示されます。

### フォント \{#font\}

:::link
関連記事: [カスタムフォント](using-custom-fonts-in-paywall-builder)
:::

フォントドロップダウン Font select をクリックしてフォントピッカーを開きます。2つのタブがあります。

* **Styles**: プロジェクトに保存された[テキストスタイル](#text-styles)の一覧です。スタイルを選択すると、そのタイポグラフィ設定がすべて一度に適用されます。
* **Fonts**: 利用可能なすべてのフォントファミリーの一覧です。検索またはスクロールして必要なものを見つけてください。

### サイズとウェイト \{#size-and-weight\}

* **Weight**: ドロップダウンからフォントウェイトを選択します
* **Size**: ドロップダウンからサイズを選択するか、カスタム値を入力します

### 色 \{#color\}

カラースウォッチをクリックしてカラーピッカーを開きます。16進数値を入力するか、パレットを使用するか、[再利用可能なスタイル](#reusable-styles)から選択します。不透明度スライダーを調整してテキストを半透明にできます。

### 揃え \{#alignment\}

2グループの揃えコントロールがあります。

* **水平**: 左揃え Align left、中央揃え Align center、右揃え Align right
* **垂直**: 上揃え Align top、中央揃え Align middle、下揃え Align bottom

### 装飾 \{#decoration\}

* **None** None: 装飾なし（デフォルト）
* **Underline** Underline: テキストに下線を追加します
* **Strikethrough** Strikethrough: テキストに取り消し線を追加します

### トランケーション \{#truncation\}

トランケーションを有効にすると、**Max Lines** の設定を超えたテキストを切り捨てます。
複数の言語をサポートする場合に便利です。翻訳後の文字列が元の文字列より長くなっても、
トランケーションによってレイアウトが崩れるのを防ぎます。

:::note
テキストエレメントを選択すると、キャンバス上でその上部に**インラインツールバー**も表示されます。このツールバーから、右パネルをスクロールせずにフォント、ウェイト、サイズ、揃えにすばやくアクセスできます。
:::

## 状態別設定（インタラクティブエレメント） \{#state-specific-settings-interactive-elements\}

インタラクティブエレメントは複数のビジュアル状態をサポートします。該当するエレメントを選択すると、右パネルに **States** セクションが表示されます。状態を切り替えて、それぞれに異なるビジュアルプロパティを設定します。

各状態では、塗りつぶし、ボーダー、タイポグラフィの色、不透明度など、あらゆるビジュアルプロパティを上書きできます。

### セレクタブル状態 \{#selectable-states\}

:::link
メイン記事: [セレクタブルエレメント](flow-selectable-elements)
:::

セレクタブルグループ（クイズの選択肢、プロダクト、タブ、トライアルトグル）に属するエレメントには、デフォルトで2つの状態があります。

* **Default**: エレメントの通常の外観
* **Selected**: ユーザーがこのオプションを選択したときの外観。塗りつぶし、ボーダーカラー、テキストカラーなどのプロパティを上書きして、アクティブな選択肢を強調表示します

インタラクティブでないときのスタイルを設定するには、3番目の状態を手動で追加します。**States settings** Settings を開いて **Disabled state** を追加します。

**Disabled** 状態は条件によって決まります。選択した後、**Set conditions** set conditions をクリックして、エレメントが実行時に無効になる条件（例: 必須フィールドが空の場合など）を定義します。

### インプット状態 \{#input-states\}

入力フィールドには追加の状態があります。

* **Default**: 通常の未フォーカス状態の外観
* **Active**: フィールドがフォーカスされ、入力可能な状態
* **Invalid**: 入力値がバリデーションに失敗した状態
* **Disabled**: フィールドがインタラクティブでない状態

### その他の状態を持つエレメント \{#other-state-bearing-elements\}

一部のエレメントは、標準の **Default / Selected / Disabled** パターン以外で状態別スタイリングを公開しています。

- **[プログレスインジケーターのステップ](builder-loaders-and-progress-bars#step-states)** — ステップごとに3つの状態: **Completed**、**Current**、**Upcoming**。
- **[カルーセルのドット](builder-containers#dots)** — 2つのカラーバリアント: 非アクティブなドットの **Color** と現在のスライドのドットの **Active Color**。

## 再利用可能なスタイル \{#reusable-styles\}

左サイドバーの **Styles** Styles パネルでは、フロー全体に適用される再利用可能なスタイルを定義できます。テキストスタイルとカラースタイルの2種類が使用できます。ダークモードのサポートを有効にするにはカラースタイルを使用する必要があります。

### テキストスタイル \{#text-styles\}

:::link
メイン記事: [テキストコンテンツ](onboarding-text)
:::

テキストスタイルには、フォントファミリー、ウェイト、サイズ、行の高さ、揃え、装飾などのタイポグラフィ設定一式が保存されます。すべてのフローテンプレートにはデフォルトのプリセットが含まれており、カスタムスタイルを作成することもできます。

テキストスタイルを作成するには:

1. **Styles** Styles パネルを開き、**Text** タブを選択します。
2. **Plus Create style** をクリックします。
3. 名前を入力し、タイポグラフィの設定を行います。
4. **Create** をクリックします。

テキストスタイルを適用するには、テキストエレメントを選択し、**Typography** セクションのフォントドロップダウンからスタイルを選択します。

### カラースタイル \{#color-styles\}

カラースタイルは、フロー全体で参照できる名前付きの色です。各カラースタイルには名前（「Primary text」や「Brand」など）、16進数値、および参照しているエレメント数を示す使用カウントがあります。

カラースタイルを作成するには:

1. **Styles** Styles パネルを開き、**Colors** タブを選択します。
2. **Plus Create style** をクリックします。
3. 名前を入力して色を選択します。

カラースタイルを更新すると、それを参照しているすべてのエレメントが自動的に更新されます。

### ダークモード \{#dark-mode\}

:::link
メイン記事: [ダークモード](paywall-dark-mode)
:::

必要に応じて、各カラースタイルにライトモード Light mode とダークモード Dark mode の2つのバリアントを追加できます。SDK はデバイスの現在のカラースキームに基づいて自動的に適切なバリアントを適用します。

ビルダーでダークモードをプレビューするには、[下部ツールバー](builder-ui#view-controls-bottom-toolbar)にある **theme toggle** Dark mode を使用します。