HTML Converter

HTML Converter は、単一のHTMLファイルをHTML/CSS/JSそれぞれの独立したファイルに分割したり、逆に分割されているファイルを1つの単一HTMLに結合したりできる相互変換ツールです。

🚀 ツールを開く

---

📌 主な機能

• 単一HTML → 分割 (Split)
  • <style> タグ内のCSSや <script> タグ内のJavaScriptを抽出し、それぞれ独立したコードとして分離します。
  • Webサイトのモックアップやコードペンからローカル環境へ移行する際に便利です。
• 分割 → 単一HTML (Merge)
  • HTMLソースコードと、別ファイルとして書かれたCSS/JSコードを入力し、それらを <style> および <script> タグで囲んで1つのHTMLファイルに結合します。
  • メールテンプレートの作成や、外部ファイルを読み込めない環境へファイルを渡す際に役立ちます。

---

📖 使用方法

単一HTMLを分割する場合

1. 画面上部のタブから 「単一HTML → 分割」 を選択します。
2. 上部のテキストエリアに、分割したい1つのHTMLコードを貼り付けます。
3. 「分割・抽出する」 ボタンをクリックします。
4. 処理が完了すると、下部の各テキストエリアに抽出された HTML、CSS、JavaScript のコードがそれぞれ表示されます。「コピー」ボタンで取得してください。

複数ファイルを単一HTMLに結合する場合

1. 画面上部のタブから 「分割 → 単一HTML」 を選択します。
2. HTML、CSS、JavaScript それぞれのコードを対応するテキストエリアに入力します（不要なものは空欄で構いません）。
3. 「1つに結合する」 ボタンをクリックします。
4. 下部のテキストエリアに、すべてのコードがインライン化された単一のHTMLが出力されます。「コピー」ボタンで取得してください。

---

⚠️ 注意事項

• 本ツールは静的なテキストの抽出・結合を目的としているため、外部URL（<link href="..."> や <script src="...">）として読み込まれている外部リソースの中身までは取得・結合しません。
• 複雑なテンプレートエンジンやフレームワーク（React/Vueなど）のコードではなく、純粋な静的HTML/CSS/JSファイルの変換にご利用ください。