独自の CSS、ヘッド、フッター、JavaScript
HTML と CSS がわかる方は、右側の列の下にある「詳細」で「開発者モード」をオンにします。このスイッチはこのブラウザーにのみ適用されます。オンにすると、左側に「開発者」エリアが表示されます。そこには「CSS」「ヘッドHTML」「フッターHTML」「JavaScript」の四つの枠があり、それぞれ最大 200 kB まで入力できます。
あなたの CSS は生成されたスタイルシートの後に読み込まれるため、詳細度が同じ場合はあなたの CSS が優先されます。狙った箇所に正確に適用できるよう、各セクションには固定のアンカーが付いています。ヘッダー部分は #kt-hero、各セクションは並び順に #kt-s0、#kt-s1 … です。セクションを移動すると、その番号も一緒に変わります。アンカーをクリックすると、カーソル位置に挿入されます。外部スクリプトは https:// 経由でのみ読み込めます。
内容と構成の元になるのは引き続きドキュメントで、コードは見た目と追加要素を担います。Kenji があなたのコードに手を加えることはなく、あなたのコードがセクションを書き換えることもありません。
- 右下の「詳細」を開き、「開発者モード」をオンにします。
- 左側の「開発者」をクリックし、「CSS」などの枠を選びます。
- コードを書き、「下書きを保存」をクリックします。Ctrl+S キーを押しても保存できます。
下書き、プレビュー、公開、以前の状態への復帰では AI ご利用枠を消費しません。
サンドボックスでのプレビュー
「プレビュー」では、エディターに現在入力されているコード（未保存のものも含む）でページ全体を表示します。表示は独立した枠の中で隔離されており、Cookie、保存されたデータ、そして枠を埋め込んでいるページにはアクセスできません。二つの制限はそれぞれ単独では、誰かが誤って緩めてしまう可能性のある設定であるため、二重に保護しています。
通常の編集画面には、あなたの CSS だけが反映されます。HTML と JavaScript は、このプレビューと公開中のページで確認できます。
- 「開発者」エリアで「プレビュー」をクリックします。
- 「下書きコードでプレビュー」でページを確認し、「閉じる」で閉じます。
コード専用の公開とバージョン
コードには独自の下書きと独自の公開があります。「開発者」エリアの「公開する」を使うと（任意でメモを付けられます）、保存した下書きがバージョンになり、ヘッダー上部の「公開する」ボタンとは関係なく、すぐに公開中のページに反映されます。ウェブサイトがオフラインの場合、コードは再びオンラインになるまで待機します。
「バージョン」には、各バージョンが番号、日時、作成元（手動、「Kenji からの提案」、または復帰）、あなたのメモ、前のバージョンとの差分とともに表示されます。現在有効なバージョンには「稼働中」と表示されます。「このバージョンに戻す」を使うと古い内容で新しいバージョンが作成され、下書きと公開中のページがすぐにその状態になります。
- 「公開する」をクリックし、必要に応じてメモを入力して「今すぐ公開」をクリックします。
- 「バージョン」を展開し、バージョンをクリックすると差分が表示されます。
- 「このバージョンに戻す」をクリックし、続けて「はい、戻す」をクリックします。
古い状態が必ずしも正常な状態とは限りません。戻した後は公開中のページを確認してください。
Kenji からのコード提案
コードの下の欄に、コードで実現したいことを一文で書くと、Kenji が提案を作成します。提案はあなたの下書きの横に、説明とあなたのコードとの差分付きで表示されます。下書きに直接書き込まれることはありません。
「適用する」を押すと提案が下書きに書き込まれ、「破棄する」を押すと提案は取り下げられます。公開されるのは専用のボタンを押したときだけです。コードについて最終的に承認するのはあなたです。未処理の提案は、ページを再読み込みしても残ります。
- コードの下の欄に、コードで実現したいことを書いて送信します。
- 説明と差分を読みます。
- 「適用する」または「破棄する」をクリックします。
提案では AI ご利用枠を消費します。適用と破棄では消費しません。使えない提案は破棄され、AI ご利用枠は消費されません。