リアルタイムHTMLエディタ

ブラウザ上で動作する、軽量でシンプルなHTML/CSS/JavaScriptエディタです。 コードを入力すると、即座にプレビュー画面に結果が反映されます。

✨ 特徴 (Features)

リアルタイムプレビュー: 左側のエディタパネル（モバイルでは上部）にコードを入力すると、右側のプレビューパネル（モバイルでは下部）にすぐに反映されます。入力時のちらつきを抑えるためのデバウンス処理が組み込まれています。

Tabキーサポート: エディタ内で Tab キーを押すと、自動的にスペース2つが挿入され、コードのインデントを簡単に整えることができます。

コードのコピー機能: ワンクリックで記述したコード全体をクリップボードにコピーできます。

リセット機能: 編集中のコードを破棄して、初期のサンプルコードに戻すことができます。

レスポンシブデザイン: パソコンの広い画面では左右の2カラムレイアウト、スマートフォンなどの狭い画面では上下レイアウトに自動で切り替わります。

トースト通知: コピーやリセットなどのアクション時に、画面右下にわかりやすい通知メッセージを表示します。

🛠 使用技術 (Tech Stack)

HTML5 / CSS3 / JavaScript (ES6+)

Tailwind CSS: スタイリングとレスポンシブデザインのためにCDN経由で使用しています。

外部ライブラリ（ReactやVueなど）に依存せず、1つのHTMLファイルで完結しています。

🚀 使い方 (Usage)

index.html ファイルをブラウザ（Chrome, Safari, Edge, Firefoxなど）で開きます。サーバーを立ち上げる必要はありません。

「エディタ」と書かれたパネル（黒い背景の領域）に、HTML、CSS（<style>タグ内）、JavaScript（<script>タグ内）のコードを入力します。

入力した内容が、自動的に「プレビュー」パネル（白い背景の領域）にレンダリングされます。

右上の「コードをコピー」ボタンをクリックすると、現在のエディタの内容をクリップボードにコピーできます。

右上の「リセット」ボタンをクリックすると、エディタの内容が初期のサンプルコードに戻ります。

📁 ファイル構成

index.html: エディタのUI、スタイリング、プレビュー用のロジックがすべて含まれた単一のファイルです。

📝 仕組み

エディタ部分には <textarea> を使用しています。

プレビュー部分には <iframe> を使用しており、入力されたコードを iframe 内のドキュメントに直接書き込むことでレンダリングを行っています。