iOS の「ファイル」プレビューで HTML が崩れる理由

「ファイル」のプレビューが実際にしていること

そのタップの裏で動いているシステムのプレビュー機能 Quick Look は、意図的に制限されたモードで HTML を描画します。忠実な再現ではなく、安全にちらりと見るための仕組みです。

• 外部スタイルシートは読み込まれません。生き残るのはインラインのスタイルだけです。
• JavaScript は決して実行されません。ページが実行時に組み立てるものは、そもそも存在しないことになります。
• 相対パスで参照されるファイル（画像、フォント、他のページ）は解決されません。
• たとえ意図的にであっても、ページにネットワークアクセスを許可する方法がありません。

症状から原因を切り分ける

• 文字は読めるがスタイルがまったくない → ページが外部または CDN のスタイルシートを使っていて、プレビューがそれを無視した。
• 完全に真っ白 → ページが JavaScript で描画されている（AI 生成のアプリやグラフのページによくあります）。スクリプトが動かなければ、表示するものは何もありません。
• 生のコードが表示される → 転送の途中でファイルが .txt になったか、拡張子が失われた。.html に戻せば、また正しく扱われます。
• 画像が壊れたアイコンになる → 画像は HTML ファイルの隣に置かれていて、単一ファイルだけをプレビューすると切り離されてしまいます。
• 文字化けする（中文/日本語 が記号になる） → ファイルが GB18030 や Shift-JIS などのレガシーエンコーディングなのに、プレビューが UTF-8 として読んでいます。

解決策：本物のレンダラーで開く

上に挙げた失敗は、HTML をきちんと描画するもので開けばすべて消えます。OpenHTML（無料）は端末内でそれを行います。ファイルを共有するか、読み込まずに「ファイル」から一度だけ開けば、スタイルが適用され、ローカルの JavaScript が動いた状態でページが表示されます。

• 複数ファイルのページ：フォルダまたは ZIP を読み込めば相対パスがそのまま動きます。iPhone で ZIP の Web プロジェクトを開くも参照してください。
• レガシーエンコーディングは自動で判別されるので、CJK のテキストも正しく表示されます。
• それでもおかしいときは、診断が見つからないファイルやブロックされたリソースを名指しで教えてくれるので、推測する必要はありません。可能な場合はワンタップの修正も付きます。

プレビューと違い、OpenHTML では、ページが本当に CDN を必要とする場合に、その書類だけネットワークアクセスを許可できます。他のページは完全にオフラインのままです。

Safari ではだめなのか

Safari は優れたレンダラーですが、ローカルファイルとその素材をまとめて渡す正式な方法がありません。回避策はあるものの、どれも危うさを抱えています。単一のファイルは共有 → Safari で開けることもありますが、隣のファイルは失われます。どこかにホスティングすれば、プライベートなデータをアップロードすることになります。ファイルを扱うなら、ビューアアプリという地味で確実な答えが正解です。iPhone で HTML を開く完全ガイドで、すべての選択肢を比較しています。