プレビュー用Webエディタの使い方

1. プレビュー用Webエディタとは？

「移動中や外出先で、作成中のWebページがスマホでどう表示されるかサクッと確認したい！」と思ったことはありませんか？🐾

「プレビュー用Webエディタ」は、スマートフォンでの閲覧・確認に特化した軽量なWebエディタです。入力したHTML / CSS / JavaScriptのコードを即座にブラウザ上でレンダリングし、実際の表示結果を素早く確認できます。

💡 どういうときに使うツールなの？
管理人が自分のサイトの「コードをコピー」機能がきちんと動作しているか確認するときなどに使用しています。
自分用に制作したツールなのですが、もしかしたら他に必要な方がいるかも？と思って公開することにしました。

ワンタップで「編集」と「確認」を切り替え： 画面上部の「編集／確認」タブをタップするだけで、コード入力画面とLiveプレビュー画面をスムーズに行き来できます。
ワンタップ貼り付け機能： ツールバーの 📋（貼り付け）ボタンを押すだけで、クリップボード内のコードを瞬時に読み込んでプレビュー表示できます。
自動保存（LocalStorage）対応： 入力したコードや選択したテーマ、タブの状態はブラウザ内に自動保存されるため、誤ってページを閉じたり再読み込みしたりしても作業内容が失われません。
ダークモード搭載： 🌙 / ☀️ ボタンで、周囲の明るさに合わせてライトモードとダークモードをいつでも切り替えられます。
アンドゥ・リドゥ（やり直し）機能： 最大120履歴まで編集操作を遡ったりやり直したりできます。

画面上部に配置されている便利なアクションボタンの機能一覧です。

アイコン	機能	説明
🔙	元に戻す	直前の編集状態に戻します。
🔜	やり直し	「元に戻す」で戻した操作をやり直します。
📋	貼り付け	クリップボードのテキストをエディタに一括貼り付けします。
❌	すべて削除	エディタ内のコードを全消去します。
🌙 / ☀️	テーマ切替	ライトモードとダークモードを切り替えます。

本ツールをご利用する際は以下のポイントをご確認ください。

📝 外部ファイルの読み込みはできません
本ツールは複数ファイルの読み込みには対応していないため、HTMLファイルにCSSおよびJSファイルを読み込むことができません。プレビューを確認する場合はHTML / CSS / JavaScript が一体型したコードをご利用ください。

💡 本格的なコード編集には不向きです
本ツールはあくまで「コードを貼り付けて表示結果をプレビュー確認すること」を目的としたエディタです。補完機能や構文ハイライトなど、コードの編集を快適にする機能はついていません。

⚠️ 「コード削除」ボタンの挙動にご注意ください
「❌（全削除）」ボタンをクリックすると、「削除していいですか？」などの確認警告が出ずにコードが即座に削除されます。間違えて押してしまった場合は、🔙（元に戻す） ボタンを押すことで元の状態に復元可能です。

📱 スマホ優先ですがPCでも問題なく使用可能です
スマホでの利便性や操作感を最優先して設計されたツールですが、レスポンシブデザインに対応しているため、パソコンのブラウザからでも問題なく快適にご利用いただけます。