> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 要素を編集する

> Canvas のフレーム内の個々のパーツを選択して編集しましょう。

**要素**はフレーム内の個々のパーツで、見出し、ボタン、画像、フォームフィールド、またはフレームがレンダリングするその他のコンポーネントです。要素は、フレーム全体を再生成せずに1つのパーツを変更したいときにターゲットにするものです。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-edit.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=d04a99a7f567c79c879a0168146b9f02" alt="Edit ツールがアクティブな Canvas — ウェブサイトアーティファクトの画像要素が選択（青くハイライトされ「img」チップラベルが付いている）され、Visual Editor パネルに Layout（Outer/Inner space）、Color（Opacity）、Border（色、幅、半径）コントロールと Discard および Save edits ボタンが表示されている。" width="1725" height="1041" data-path="images/replitai/canvas-edit.png" />
</Frame>

## 要素を選択する

ツールバーの [Edit ツール](/references/design/toolbar#edit) を使います。Edit がアクティブな状態でライブフレーム内をクリックすると、カーソル下の要素が選択されます。選択された要素はハイライトのアウトラインが付き、Agent に変更を依頼できる小さなインラインプロンプトが表示されます。

<Note>
  Edit は Canvas に少なくとも1つのフレームが存在するまで無効で、デスクトップのみで利用できます。
</Note>

## 選択した要素を操作する

### Agent に変更を依頼する

インラインプロンプトを使って、要素のコピー、色、レイアウト、スペーシング、動作を更新するよう Agent に依頼します。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-ask-element.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=eda4762818345d2f3f0924ca584a5521" alt="Canvas 上の選択された要素のインラインプロンプトのクローズアップ：「img」チップに続いて「Ask about selected element…」プレースホルダーテキストと送信ボタン。" width="1500" height="500" data-path="images/replitai/canvas-ask-element.png" />
</Frame>

### 要素を Inspect する

フレームごとのアクションバーの **Inspect** ボタンで要素を Inspect すると、その要素をターゲットにした **Visual Editor** が開きます。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-inspect.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=f20feafe013fe64735f992163d729357" alt="フォーカスモードの McLaren 765LT 詳細ページ（右下に「Preview: Velocity — Supercar Rental」とラベル表示）。McLaren の画像要素が選択（青くハイライトされ「img」チップが付いている）され、Visual Editor パネルが開いて Image source パス、Upload Image ボタン、Layout、Color、Border セクションが表示されている。" width="3442" height="2164" data-path="images/replitai/canvas-inspect.png" />
</Frame>

<Note>
  Inspect はフレームがフォーカスモードで、要素が選択可能な DOM ノードの場合のみ利用できます。
</Note>

## Visual Editor

要素を選択すると **Visual Editor** が開きます — インラインプロンプトとペアになった右サイドパネルです。パネルはすべてのコントロールを明確なセクションにグループ化して、必要なものを素早く見つけられます：**Text**、**Layout**、**Color**、**Border**。（画像要素を選択すると **Image** セクションも表示されます。）

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-element-panel.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=5d1c8d24fed53efbe4bbcfc17e721659" alt="div 要素（McLaren の予約サイドバー）が選択された Canvas。右の Visual Editor パネルに Text（Font size 16、Font weight Regular、Alignment）、Layout（Outer space 0/0、Inner space 20/20 とリンクトグル、24px ギャップ）、Color（Text #e4e4e7）、Background セクションが表示されている。" width="3442" height="2164" data-path="images/replitai/canvas-element-panel.png" />
</Frame>

### Layout

**Layout** セクションでは、Agent を通さずにコンテナ内の子要素の配置を調整できます。フレックスコンテナを選択して Layout を展開すると、以下が表示されます：

* **Alignment**: コンテナ内の両軸に沿ったアイテムの配置のための 3×3 ドットピッカー。
* **Direction**: 子要素を行または列に積み重ねる2つの矢印ボタン。
* **Gap**: アイテム間のスペースのピクセル値。Gap 入力の隣のアイコンは現在の方向に合わせて変わるため、水平方向か垂直方向のスペーシングのどちらを調整しているかが常にわかります。その隣の矢印アイコンは **Distribute space between items** をトグルし、子要素をコンテナの反対側の端に押しやります。
* **Outer space**: 要素の外側のスペースの各辺の入力（各辺に1つの入力と、すべての4辺を一度にロックするリンクトグル）。
* **Inner space**: 要素の内側のスペースの各軸の入力と、両軸を一度にロックするリンクトグル。

Layout セクションは選択した要素に少なくとも1つのレイアウトコントロールが適用される場合のみ表示されます。スペーシングやレイアウトプロパティを持たないプレーンなテキストノードはセクションを完全に非表示にするため、エディタはコンパクトに保たれます。

**Text**、**Color**、**Border**、**Image** セクションについては、[Visual Editor ガイド](/learn/design/visual-editor) をご覧ください。

## 関連ページ

* [Canvas](/references/design/canvas) — 概要と構成要素。
* [Frames](/references/design/frames) — 要素が存在するコンテナ。
* [Toolbar](/references/design/toolbar) — Edit ツールがある場所。
* [Visual Editor](/learn/design/visual-editor) — 完全な要素編集ウォークスルー。