> ## 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上のフレーム内にある個々のパーツを選択して編集します。

\*\*要素（Element）\*\*とは、見出し、ボタン、画像、フォームフィールドなど、フレームがレンダリングする個々のパーツのことです。フレーム全体を再生成せずに一部分だけを変更したいとき、要素がその対象になります。

<Frame>
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-edit.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=94149292dc20f5bd7dbd4a754ef57099" alt="スーパーカーレンタルウェブサイトでdiv要素が選択されEditツールが有効になっている様子。Visual EditorパネルにText、Layout、Color、Borderのコントロールと、Discard、Save editsボタンが表示されている" width="2000" height="1269" data-path="images/replitai/canvas-edit.png" />
</Frame>

## 要素を選択する

ツールバーの[Editツール](/ja/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>

### 画像を直接入れ替える

画像要素を選択すると、Visual Editorの**Image**セクションにソースパスと**Upload Image**ボタンが表示されるので、プロンプトを書かずにファイルを入れ替えられます。

<Frame>
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-inspect.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=00277c014bbf729100f6c27c02f297bd" alt="McLaren 765LTの詳細ページがWebsiteフレーム内にあり、McLarenの画像要素が選択されている（青くハイライトされ「img」チップ付き）。Visual Editorパネルが開き、Imageのソースパス、Upload Imageボタン、Layout、Color、Borderの各セクションが表示されている" width="2000" height="1252" data-path="images/replitai/canvas-inspect.png" />
</Frame>

## Visual Editor

要素を選択すると、インラインプロンプトと対になる右側パネルの**Visual Editor**が開きます。このパネルはすべてのコントロールを明確なセクションにグループ化しているので、必要なものをより早く見つけられます: **Text**、**Layout**、**Color**、**Border**の各セクションです。（画像要素を選択した場合は**Image**セクションも表示されます。）

<Frame>
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-element-panel.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=8bf4cdf2b383cb61e8a9eed2c16f1cf3" alt="div要素（McLarenの予約サイドバー）が選択されたCanvas。右側のVisual Editorパネルに、Text（フォントサイズ16、フォントウェイトRegular、整列）、Layout（下側24pxのOuter space、リンクトグル付きの20/20のInner space）、Color（テキスト#e4e4e7、背景#0f0f12）の各セクションが表示されている" width="2000" height="1252" data-path="images/replitai/canvas-element-panel.png" />
</Frame>

### Layout

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

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

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

**Text**、**Color**、**Border**、**Image**の各セクションについては、[Visual Editorガイド](/ja/design/visual-editor)を参照してください。

## 関連ページ

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