キャンバス上で直接編集する

変更方法を選ぶ

新しいセクション、レスポンシブ対応、または複数の画面にまたがる変更については、エージェントに明確な要件を伝えてください。小さな視覚調整には直接編集を使用します。ほかの2つの方法については、コメントとマーク付きフィードバックを参照してください。

編集可能なプレビューを開く

1. Design FilesでHTMLアーティファクトを開き、Previewを選択します。HTMLスライドのアーティファクトでもプレビューエディターを使用しますが、利用できるコントロールはファイルによって異なります。
2. プレビューツールバーでEditを選び、キャンバス上の要素を選択します。選択枠とパラメーターパネルが表示されるまで待ちます。
3. 通常のユーザーとしてリンク、フォーム、ボタンをテストする前に、Editを終了してください。編集モードで要素を選択する操作は、プロトタイプを操作する場合とは目的が異なります。

1行のテキストを変更する

1. Editで、変更するテキストをクリックします。テキストとリンクラベルはキャンバス上で編集できます。
2. 置き換えるテキストを入力します。Enterを押すとテキストが確定され、Shift+Enterを押すと改行が挿入されます。現在のテキスト入力をキャンセルするにはEscapeを押します。
3. 通常のPreviewで文言を確認します。ページがJavaScriptでそのテキストを生成する場合は、テキストを再度レンダリングする操作もテストしてください。

要素またはそのレイアウトを調整する

要素を選択すると、その要素で使用できるプロパティが表示されます。インスペクターには、タイポグラフィ、色、サイズ、間隔、境界線、角丸の設定があります。FlexとGridのコンテナでは、方向、配置、Gapなどのレイアウトコントロールが表示されます。リンクではHref、画像ではUpload imageが表示されることがあります。これらのコントロールは状況に応じて変わるため、すべての要素にすべてのフィールドがあるわけではありません。

選択した要素をドラッグして位置を調整できます。変更は小さく保ち、隣接する要素とモバイルレイアウトを確認してください。1つのデスクトップ表示に収まるよう移動しただけでは、レスポンシブレイアウトにはなりません。

ほとんどの間隔フィールドでは、任意のCSS式ではなく、数値またはpxを使用できます。値が拒否された場合は、保存を繰り返すのではなく、単位と選択中の要素を確認してください。空欄のフィールドは、値がゼロなのではなく、継承または計算されたスタイルを示している場合があります。

保存、キャンセル、元に戻す

保存した結果を確認する

1. Editを終了し、プレビューを再読み込みします。変更が保持されていることを確認してください。
2. ビューポートメニューをモバイルサイズに切り替え、実際のコントロールをテストします。
3. 以前のHTMLバージョンが必要な場合は、バージョン履歴を使用します。共有ファイルの場合は、新しいバージョンを確認してからリンクを更新してください。

HTMLアニメーションを編集しても、すでにレンダリングされたMP4は変更されません。新しくレンダリングするよう依頼し、その後、新しい動画を確認してください。

選択または保存できない場合

対応するHTMLファイルをPreviewで開いていることと、プロジェクトが編集可能であることを確認してください。読み取り専用の共有プロジェクトでは、コメントは許可されていても編集が無効になっている場合があります。Editをいったん終了して開き直し、必要に応じてファイルを再読み込みします。それでも選択枠やインスペクターが表示されない場合は、CommentまたはMarkを使って変更内容をエージェントに伝え、問題を報告する際にアプリのバージョンを記載してください。要素が選択されていない状態や結果を確認できていない状態で、Saveを繰り返しクリックしないでください。