要素

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

​

要素を選択する

ツールバーのEditツールを使います。Editが有効な状態で、ライブフレーム内をクリックするとカーソルの下にある要素が選択されます。選択した要素にはハイライトの輪郭が表示され、Agentに変更を依頼できる小さなインラインプロンプトが現れます。

​

選択した要素に対する操作

​

Agentに変更を依頼する

インラインプロンプトを使って、要素のコピー、色、レイアウト、間隔、動作の更新をAgentに依頼できます。

​

画像を直接入れ替える

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

​

Visual Editor

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

​

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ガイドを参照してください。

​

関連ページ

• Canvas — 概要と構成要素。
• フレーム — 要素が存在するコンテナ。
• ツールバー — Editツールがある場所。
• Visual Editor — 要素編集の完全なウォークスルー。