複数ファイルを 1 つの HTML ファイルにまとめる方法

SharingHTML にアップロードできる HTML は 1 ファイルだけです。ページが相対パス（images/logo.png、style.css、app.js など）で別々の画像・CSS・JS を参照している場合、それらのファイルは一緒にアップロードされないため、ブラウザが読み込めず、ページが崩れたり正しく動作しません。

対処はシンプルです。すべてを 1 つの自己完結した HTML ファイルにまとめて、画像・スタイル・スクリプトを 1 つの .html 文書に埋め込んでから、1 回アップロードするだけです。

複数ファイル構成のページとは

よくある複数ファイルのプロジェクトは次のとおりです。

website/
├── index.html
├── style.css
├── script.js
└── images/
    ├── logo.png
    └── hero.jpg

index.html だけをアップロードすると、ブラウザは次のファイルを読み込もうとします。

images/logo.png
style.css
script.js

これらのファイルはオンライン上に存在しないため、画像・スタイル・操作性が失われます。

方法 1：AI ツールを使う（おすすめ）

HTML・CSS・JS・画像を 1 つのフォルダ にまとめ、AI ツールに自己完結した HTML ファイルを作ってもらいます。

日本語環境で使いやすいツール：

• ChatGPT
• Claude
• Gemini
• Microsoft Copilot

プロンプト例（日本語）

フォルダ内の index.html、style.css、script.js と images ディレクトリを、1 つの自己完結した HTML ファイルにまとめてください。要件：

1. CSS はすべて <style> タグにインライン化する
2. JavaScript はすべて <script> タグにインライン化する
3. 画像は Base64 の Data URL として埋め込む
4. 元の見た目と動作を変えない

最後に完全な .html ファイルを 1 つだけ出力してください。

プロンプト例（英語）

Merge index.html, style.css, script.js and the images/ directory into a single self-contained HTML file:

• inline all CSS into a <style> tag;
• inline all JavaScript into a <script> tag;
• embed images as Base64 data URIs;
• keep the original look and behavior.

Output only one complete .html file.

AI ツールがローカルフォルダを読める場合はフォルダを直接指定し、読めない場合はフォルダを zip に圧縮して添付します。生成された結果を .html ファイルとしてダウンロードしてください。

方法 2：手作業でまとめる

自分で作業したい場合は次の手順です。

1. CSS をインライン化：style.css の中身を <head> 内の <style> タグにコピーします。

2. JS をインライン化：script.js の中身をページ末尾の <script> タグにコピーします。

3. 画像を埋め込む：画像を Base64 の Data URL に変換します。例：

   <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAA...">
   

   コマンドラインでは次のように変換できます。

   base64 -i logo.png
   

   出力の先頭に data:image/png;base64, を付けます。

まとめた後の確認

アップロード前に、必ずローカルで統合後のファイルを確認してください。

1. 統合した .html をブラウザで開きます。
2. 画像・スタイル・インタラクションが動作するか確認します。
3. F12 で開発者ツールを開き、Console と Network に 404 がないか確認します。
4. 問題なければ SharingHTML にアップロードします。
5. アップロード後に「プレビュー」を開き、公開ページをもう一度確認します。

FAQ

公開したページで画像やスタイルが表示されないのはなぜ？

単一ファイルの HTML ホスティングでは、.html ファイルを 1 つだけアップロードします。images/logo.png、style.css、app.js のような相対参照は別ファイルであり、アップロードされていないためブラウザが見つけられず、表示が崩れることがあります。

HTML・CSS・JS・画像を 1 ファイルにまとめるには？

index.html、style.css、script.js、画像を 1 つのフォルダにまとめ、AI ツール（ChatGPT や Claude など）に、CSS・JS をインライン化し画像を Base64 の Data URL として埋め込んだ自己完結型の HTML を作ってもらいます。

AI ツールで実際に統合するには？

AI ツールにフォルダへのアクセスを渡す（または zip を添付する）うえで、上のプロンプト例を使ってください。生成された .html をダウンロードしてアップロードします。

統合後に何を確認すればいい？

統合した .html をブラウザで開き、画像・スタイル・インタラクションが動作するか確認し、開発者ツールで 404 がないかを見てから、アップロードして公開リンクでもう一度プレビューします。

まとめ

アップロードしたページで画像・スタイル・操作性が欠けている場合、原因はたいてい「単一の HTML ファイルと一緒にアップロードされていないローカルリソース」です。

HTML とそのすべてのリソースを 1 つの自己完結した HTML ファイル にまとめるのが、単一ファイル ホスティングを使ううえで最も簡単で確実な方法です。1 回まとめて 1 回アップロードすれば、リンクはきちんと表示されます。