ローカルでは正常なのに共有すると崩れるHTML：画像・CSS・フォントの直し方

自分のパソコンでは正常なのに共有後のHTMLが崩れる場合、ブラウザーより先に ファイルパスと外部リソースを確認します。HTMLだけをアップロードしても、 別ファイルのCSS・画像・フォントは一緒に送られません。CDNやAPIへの依存も 一時レビューURLでは同じように動かないことがあります。

最初に確認する三つのパス

次のコードは元のフォルダー構成が残っている場合だけ動きます。

<link rel="stylesheet" href="./styles/report.css">
<img src="./images/chart.png" alt="月別利用量のグラフ">
<img src="file:///home/example-user/Desktop/logo.png" alt="会社ロゴ">

index.htmlだけをアップロードしても、styles/report.cssと images/chart.pngは公開されません。file:///は作成者の端末を指すため、 受け取った人のブラウザーからは開けません。/images/chart.pngのような ルート相対パスも既存サイトのルートを前提にしています。

WHATWG URL Standardが定義するように、相対URLは 基準URLに対して解決されます。文書の場所がローカルフォルダーから共有URLへ 変われば、同じ文字列でも参照先が変わります。

単一HTMLの中へ移すもの

CSSは<style>へ入れる

読むために必要なスタイルを文書内へ移します。

<style>
  :root { color-scheme: light dark; }
  body { margin: 0; font-family: system-ui, sans-serif; }
  img { max-width: 100%; height: auto; }
</style>

Tailwind CDNや別のCSS bundleがなくても読める状態が目標です。すでにbuild済みの CSSがあるなら、ローカルファイルへのlinkではなく必要な出力を<style>へ 入れます。

小さな画像はdata URLかinline SVGにする

iconや単純なchartにはinline SVGが向いています。小さなPNG・JPEGはdata: URL にできますが、base64はファイルを大きくします。大きな写真やdownloadを多く 含むなら、asset folderを提供できる静的ホスティングを選びます。

system fontを優先する

Google Fontsなどのweb fontはnetwork requestに依存します。レビュー用文書は system-ui、sans-serif、serif、monospaceから始めると、相手の環境でも 読みやすさを保ちやすくなります。

見た目は出るのにscriptが動かない場合

HTML2WEBは共有HTMLを隔離したframeで実行します。inline JavaScriptは使えますが、 外部script、fetch、iframe、form送信など、別のnetworkや閲覧contextに依存する 処理は制限されます。共有コードとhost applicationを分けるための境界であり、 完全なapplication runtimeではありません。

次が必要なら通常のapplication hostingへ移します。

• APIからlive dataを取得する。
• login、cookie、payment、form送信を使う。
• 複数のJavaScript moduleとassetを配信する。
• 外部chart、map、script、font CDNが不可欠である。

共有前の2分チェック

• file://、C:\、/Users/のようなローカルパスがない。
• src="./..."、href="./..."、CSSのurl(...)をすべて確認した。
• 必要なCSSがinlineで、web fontなしでも読める。
• 画像を埋め込んだか、同じ情報をtextでも説明した。
• 外部scriptやAPIなしで主要な操作が動く。
• desktopとmobileの幅で共有URLを直接開いた。

修正した文書をHTMLをURLに変換するツールへ再度アップロードし、 private windowとスマートフォンでも確認します。複数ファイルやbackendが必要なら、 共有・変換・デプロイの選択ガイド を基準に正式なhostingへ移してください。