Convika
免费注册

此页面目前只有日文版。

HTML ファイルを開いたら文字化けする・画像が出ない。スマホでもパソコンでも直す方法

要約

HTML ファイルの文字化けの多くは、ファイルを保存した文字コード（Shift_JIS など）と、ページが宣言している文字コード（UTF-8）が合っていないか、宣言がないために起きます。直すには、head のすぐ後に <meta charset=\"utf-8\"> を入れ、ファイルを UTF-8 で保存し直します。画像や CSS は HTML とは別のファイルなので、HTML だけを送っても表示されません。1 つのファイルにまとめるか、リンクで渡します。

HTML ファイルをリンクにする

Free プラン: カード登録なし、公開 1 ページまで

目次

ChatGPT に作ってもらったクイズを iPhone で開いたら、縺薙ｓ縺ｫ縺｡縺ｯ のような見たことのない漢字が並んだ。メモ帳で直したページが、ブラウザでは � だらけになった。画像のところには、壊れたアイコンしか出ない。

壊れているのは、たいていファイルの中身ではありません。読む側が、保存したときとは別の文字コードで読んでいるか、画像のファイルが一緒に届いていないだけです。このガイドでは、化け方から原因を見分けて直す手順と、画像や CSS が出ないときの直し方を説明します。Chrome・Safari・iPhone では、2026 年 10 月 25 日に同じファイルを開いて確かめました。文字は読めるのに、コードが出る・ボタンが動かないなら、iPhone で HTML ファイルを開く方法 か Android で HTML ファイルを開く方法 を見てください。

自分で作ったファイルを人に見せたいなら、ページ冒頭のボックス にファイルを入れると、登録なしでプレビューのリンクができます。このプレビューではスクリプトとフォームが止まります。「このページを受け取る（無料・カード不要）」から登録すると、ページがアカウントに入り、スクリプトも動くようになります。

化け方で、原因がわかる

文字化けは、ファイルを保存したときの文字コードと、読むときの文字コードが食い違うと起きます。日本語の HTML ファイルでよく出てくるのは、UTF-8 と Shift_JIS の 2 つです。HTML の仕様をまとめる WHATWG は、ファイルを UTF-8 で書くことを求めています。それでも、Windows のメモ帳の「ANSI」のように、UTF-8 以外の文字コードで保存されたファイルがあります。

どちらにずれたかは、化け方でわかります。「こんにちは。」が次のように出たら、原因はこうです。

見え方例原因直し方
「縺」「繧」のような漢字と、半角のカナや記号が並ぶ縺薙ｓ縺ｫ縺｡縺ｯファイルは UTF-8 なのに、Shift_JIS として読まれた<meta charset="utf-8"> を入れる。shift_jis と書いた行は消す
黒いひし形に「?」の記号が並ぶ����ɂ��́Bファイルは Shift_JIS なのに、UTF-8 として読まれたUTF-8 で保存し直してから、<meta charset="utf-8"> を入れる

例の文字は、下の試験で Chrome と Safari に実際に出たものです。iPhone の「ファイル」アプリのプレビューでは、化けた文字の中に四角い記号も混じりました。

どのアプリで化けるか

同じファイルでも、開くアプリによって化けたり化けなかったりします。文字コードの宣言がないと、アプリが推測で読むからです。WHATWG の HTML の仕様では、宣言がないとき、ブラウザは中身から文字コードを推測してもよく、推測しないときの既定はブラウザしだいで、ふつうは使う人の地域で決まります。仕様の表が勧める日本語の既定は Shift_JIS です。

5 種類のファイルを作り、2026 年 10 月 25 日に開いた結果です。縺 型と � 型は、上の表の化け方です。Mac は macOS 26.5.2（言語は日本語）。iPhone は Apple の iPhone シミュレーター（iOS 26.5、iPhone 17 Pro、言語は日本語）で、「ファイル」アプリに保存してタップしたプレビューです。

ファイルの中身Chrome 155（Mac）Safari 26.5.2（Mac）iPhone の「ファイル」（iOS 26.5）Convika の HTML ビューアー
UTF-8、<meta charset="utf-8"> あり正しく出る正しく出る正しく出る正しく出る
UTF-8、宣言なし正しく出る縺 型縺 型正しく出る
Shift_JIS、宣言なし正しく出る正しく出る正しく出る� 型
Shift_JIS、<meta charset="utf-8"> あり� 型� 型� 型� 型
UTF-8、<meta charset="shift_jis"> あり縺 型縺 型試していない縺 型

つまずきやすいのは 2 行目です。コードの一部だけをコピーしたり、<head> を消したりすると、UTF-8 のファイルから宣言がなくなります。すると Mac の Safari と iPhone のプレビューでは化け、Chrome では中身から UTF-8 だと判断されて正しく出ました。作った人の Chrome では読めて、相手の iPhone では読めない、ということが起きます。

1 行目のように宣言と中身がそろっていれば、試したどのアプリでも正しく出ました。直すときは、この形にそろえます。Chromebook の Chrome では試していません。Chromebook での開き方は Chromebook で HTML ファイルを開く方法 にまとめています。

文字化けを直す 4 つの手順

1. 化け方を見る

上の表で、縺 型か � 型かを確かめます。縺 型なら、ファイルは UTF-8 で、宣言を直せば済みます。� 型なら、ファイルは UTF-8 ではないので、保存し直しも要ります。

2. HTML ビューアーで開いて確かめる

迷ったら、無料の HTML ビューアー でファイルを開きます。ビューアーは、ファイルの先頭の BOM か <meta charset> に書かれた文字コードで読み、どちらもなければ UTF-8 として読みます。宣言のないファイルがここで正しく出れば、中身は UTF-8 です。� が並べば、中身は Shift_JIS などの別の文字コードです。開くだけなら、ファイルは Convika のサーバーに送られません。

人から届いたファイルで、心当たりのないものは開かずに送った人に確かめてください。少しでも気になるファイルは、選ぶ前に「スクリプトを動かす」のチェックを外すと、HTML と CSS だけを表示します。

3. <meta charset="utf-8"> を head の先頭に入れる

テキストエディタでファイルを開き、<head> のすぐ後に次の 1 行を入れます。charset を書いたほかの行があれば消します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

WHATWG の仕様では、この宣言はファイルの先頭から 1024 バイト以内に収める決まりです。W3C も、<head> の開始タグのすぐ後に置くのがよいとしています。

4. UTF-8 で保存し直して、開き直す

宣言を書いても、ファイルそのものが Shift_JIS のままなら化けます（表の 4 行目）。W3C は、UTF-8 と宣言したらファイルも UTF-8 で保存するよう書いています。メモ帳とテキストエディットでの保存の仕方は、次の節で説明します。保存したら、ブラウザやビューアーで開き直して確かめます。

Windows のメモ帳、Mac のテキストエディットで保存し直す

Windows のメモ帳

Microsoft は 2018 年 12 月 10 日の Windows Insider ブログ（Windows 10 Insider Preview ビルド 18298）で、メモ帳が新しいファイルを BOM なしの UTF-8 で保存するのを既定にし、画面の下のステータスバーにファイルの文字コードを出すようにしたと発表しました。ステータスバーに UTF-8 以外が出ていたら、保存し直します。

  1. メモ帳でファイルを開きます。
  2. 「ファイル」メニューの「名前を付けて保存」をクリックします。
  3. 保存のダイアログの下にある、文字コードを選ぶ欄で UTF-8 を選び、保存します。

この欄で文字コードを変えて保存する流れは、Microsoft の開発者向けの説明「INF ファイルでの一般的な Unicode 要件」が、メモ帳を例に書いています。この欄に ANSI と出ていたら、UTF-8 ではありません。Microsoft の説明では、「ANSI」は Windows のコードページのことで、コードページの表では、日本語のコードページ 932 が Shift_JIS です。このガイドでは、Windows 11 のメモ帳の画面は試していません。

Mac のテキストエディット

Apple のテキストエディットのヘルプによると、テキストエディットは HTML ファイルを、ブラウザで見るときと同じように整えた文章として表示します。そのまま編集すると、まっすぐな引用符がカールした引用符に置き換わります。コードとして直すには、次のように開きます。

  1. 「テキストエディット」＞「設定」＞「開く/保存」で、「HTMLファイルを、フォーマットしたテキストではなくHTMLコードとして表示します」を選びます。
  2. 文字が化けて見えるときは、「ファイル」＞「開く」でファイルを選び（まだ開かずに）、ウインドウの左下の「オプションを表示」をクリックします。「標準テキストのエンコーディング」で文字コードを選んでから「開く」を押します。
  3. 保存するときの文字コードの既定も、同じ「開く/保存」で選べます。Apple の説明では、「標準テキストファイルのエンコーディング」が標準テキストのファイルを開くときと保存するときの既定、「HTML保存オプション」の「エンコーディング」が HTML ファイルを保存するときの既定です。

テキストエディットで文字コードを変えて保存し直す流れは、このガイドでは試していません。保存したら、手順 4 のとおり開き直して確かめてください。

iPhone・Android で化けるとき

上の表のとおり、iOS 26.5 のシミュレーターでは、「ファイル」アプリでタップしたプレビュー（クイックルック）が、宣言のない UTF-8 のファイルを 縺 型に化けさせました。Shift_JIS で宣言のないファイルは、逆に正しく出ました。iPhone で化けたら、まず <meta charset="utf-8"> が抜けていないかを疑います。

  • 自分で作ったファイルなら、手順 3 で宣言を入れます。宣言を入れた UTF-8 のファイルは、iPhone のプレビューでも正しく出ました（表の 1 行目）。
  • 人から届いたファイルなら、Safari で HTML ビューアー を開いて選ぶと、宣言のない UTF-8 のファイルも正しく出ます。心当たりのない送り主なら開く前に確かめ、選ぶ前に「スクリプトを動かす」のチェックを外します。

プレビューでボタンやゲームが動かないのは、文字コードとは別の理由です。iPhone で HTML ファイルを開く方法 で説明しています。Android の端末では、このガイドの試験はしていません。Android で開く手順は Android で HTML ファイルが開けないときの対処 にまとめています。

画像・CSS が出ない

HTML ファイルの中の <img src="neko.jpg"> や <link rel="stylesheet" href="style.css"> は、HTML ファイルと同じフォルダーにある別のファイルを指しています。HTML ファイルだけをメールや LINE で送ると、そのファイルは届きません。

2026 年 10 月 25 日に Chrome 155 で試すと、画像と CSS を同じフォルダーに置いたページは、どちらも読み込みました。HTML ファイルだけを別のフォルダーに移すと、画像は壊れたアイコンになり、見出しの色を決めていた CSS も効かなくなりました。

よくあるのは、次の 3 つです。

  • 学校や仕事の資料で、images/photo.jpg のようにフォルダーの中の画像を指している。
  • メモ帳で <img src="C:\Users\…\Pictures\neko.jpg"> と、自分のパソコンの中の場所を書いている。ほかの端末には、その場所に画像がありません。
  • AI が index.html と style.css を分けて作った。

HTML ビューアーで開くと、読み込めなかったファイルの名前がページの下に出ます。直し方は 2 つです。

  • CSS と JavaScript を HTML ファイルの中に書き、画像は https:// から始まる URL にする。
  • 画像をコードの中に埋め込む。ただし、ビューアーと Convika のボックスが受け付けるのは 2 MB までです。

iPhone の「ファイル」アプリのプレビューは、https:// の画像も読み込みません（Convika が iOS 26.3 のシミュレーターで確認、iPhone で HTML ファイルを開く方法）。スマホの相手には、ページを公開してリンクで送ります。

ファイルを作った AI には、こう頼めます。

CSS と JavaScript を 1 つの HTML ファイルの中に入れてください。画像は https:// から始まる URL にしてください。文字コードは UTF-8 にして、<meta charset="utf-8"> を入れてください。

LINE・メールで受け取ったファイルが化けるとき

LINE やメールで届くのはファイルそのもので、どう読むかは受け取った人のアプリしだいです。送った人の Chrome では正しく出て、相手の iPhone では化ける、ということが起きます（表の 2 行目）。

  • 受け取った人は、送った人に <meta charset="utf-8"> を入れて送り直してもらうか、リンクで送ってもらいます。
  • 送った人は、ファイルではなくリンクを送れば、相手のアプリの読み方に左右されません。

LINE で送る手順は HTML ファイルを LINE で送る方法、メールは HTML ファイルをメールで送る方法 で説明しています。iPhone の「メール」アプリで添付を開いたときの表示は、試していません。

リンクで送れば、相手の端末の設定で化けない

Convika のボックスにファイルを入れると、ビューアーと同じ決まり（BOM、<meta charset>、どちらもなければ UTF-8）で文字を読み、UTF-8 で保存します。公開したページは、文字コードが UTF-8 だと添えて届けます。WHATWG の仕様では、ブラウザはこの添え書きを、ファイルの中の宣言や地域ごとの既定より先に見ます。

2026 年 10 月 25 日に、宣言のない UTF-8 のファイルを「UTF-8」と添えて Mac の Safari 26.5.2 に届けると、言語が日本語の Mac でも正しく出ました。ビューアーで正しく出たファイルなら、リンクにしても同じ文字で届きます。

  1. ページ冒頭のボックス にファイルを入れるか、「コードから」に切り替えてコードを貼り付け、「プレビューのリンクをつくる」を押します。登録はいりません。
  2. 「プレビューを開く」で、文字が化けていないかを確かめます。このリンクは 3 分間しか開けず、スクリプトとフォームは止まっています。人に送るリンクではありません。
  3. 「このページを受け取る（無料・カード不要）」から登録すると、ページがアカウントに入り、スクリプトも動きます。
  4. 管理画面で「ページを公開する」を押し、「このページを開ける人」で「一般公開」を選んで「次へ」を押します。はじめての公開では、続いて大きな「無料で公開する」のボタンが出ます。押すとすぐに公開され、ページの下に Convika のバナーが出ます。出したくないときは、その下の「Convika のバナーなしで公開する」から Pro のお申し込み画面に進みます。お申し込み画面の大きなボタン「1日間無料で申し込む」は、カードを登録して始める Pro のトライアルで、最初の 1 日間のあとは、解約しなければ月 ¥1,800 かかります。1 回払いがよければ、そのボタンの下の「Pro 1年パス（¥4,400・1回払い）にする」で、365 日間・自動更新なしのパスに切り替えられます。無料で公開したページは、下に Convika のバナーが出ます。
  5. 公開したページのリンクを、LINE のトークやメールの本文に貼って送ります。

公開の画面の流れと、ほかの送り方との違いは、HTML ファイルを URL にして共有する方法 にまとめています。

よくある質問

HTML ファイルが文字化けするのはなぜ？

ファイルを保存した文字コードと、読む側が使った文字コードが違うためです。多いのは、UTF-8 のファイルに <meta charset="utf-8"> がなく、アプリが日本語の既定の Shift_JIS で読んだ場合です。2026 年 10 月 25 日の試験では、このファイルは Mac の Safari 26.5.2 と iOS 26.5 のプレビューで化け、Chrome 155 では化けませんでした。

HTML の文字化けを直すには？

<head> のすぐ後に <meta charset="utf-8"> を入れ、ファイルを UTF-8 で保存し直します。宣言はファイルの先頭から 1024 バイト以内に置く決まりです（WHATWG）。宣言だけ直しても、中身が Shift_JIS なら � が並ぶので、メモ帳なら「名前を付けて保存」で文字コードを UTF-8 にして保存し直します。

iPhone で HTML ファイルが文字化けするのはなぜ？

宣言のない UTF-8 のファイルを、「ファイル」アプリのプレビューが別の文字コードで読むためです。iOS 26.5 のシミュレーター（言語は日本語）では、宣言のないファイルが 縺薙ｓ縺ｫ縺｡縺ｯ のように化け、<meta charset="utf-8"> を入れたファイルは正しく出ました。作った人に宣言を入れてもらうか、リンクで送ってもらうのが確実です。

Safari で文字化けする？

はい、宣言のない UTF-8 のファイルでは化けました。macOS 26.5.2（言語は日本語）の Safari 26.5.2 で開くと 縺 型に化け、<meta charset="utf-8"> を入れると正しく出ました。同じファイルを Chrome 155 で開くと、宣言がなくても正しく出ました。

メモ帳で保存した HTML が化けるのはなぜ？

ファイルの文字コードと、ファイルの中の宣言が合っていないためです。Shift_JIS で保存したファイルに <meta charset="utf-8"> が入っていると、試したどのアプリでも � 型に化けました。メモ帳の画面の下に出る文字コードを確かめ、「名前を付けて保存」で UTF-8 にして保存し直します。

スマホで HTML ファイルの画像が表示されないのはなぜ？

画像が HTML とは別のファイルで、一緒に届いていないためです。2026 年 10 月 25 日に Mac の Chrome 155 で試すと、HTML ファイルだけを別のフォルダーに移したページは、画像が壊れたアイコンになりました。iPhone の「ファイル」アプリのプレビューは、https:// の画像も読み込みません（Convika が iOS 26.3 のシミュレーターで確認）。スマホの相手には、ページを公開してリンクで送ります。

Chrome で文字コードを変えられる？

いいえ。Chromium は 2016 年 8 月に、文字コードを手で選ぶメニューを外し、中身から判定する仕組みに置き換えました（変更「Remove text encoding UI」）。2026 年 10 月 25 日に Chrome 155 で試すと、宣言のないファイルは UTF-8 も Shift_JIS も正しく出ました。宣言と中身が食い違うファイルは化けたので、ファイルの側を直します。

HTML ビューアーで開くと文字化けは直る？

宣言のない UTF-8 のファイルなら、直ります。ビューアーは、BOM も <meta charset> もないファイルを UTF-8 として読むからです。Shift_JIS で宣言のないファイルは � 型に化けます。<meta charset="shift_jis"> と書いてあれば、その文字コードで読みます。

出典

次のステップ

HTML ページにパスワードをかけて、知っている人だけに見せる方法

JavaScript で作った画面は、ソースを開けばパスワードが読めてしまいます。ChatGPT や Claude で作った HTML をアップロードし、自分のドメインのままサーバー側で確かめるパスワード付きのページにする方法を説明します。

関連記事

人に渡す方法

記事を共有する

ファイルではなく、どの端末でも同じ文字で開くリンクを送る

HTML ファイルかコードを入れて公開すれば、相手の端末の言語の設定に関係なく、UTF-8 のページとして届きます。

HTML ファイルをリンクにする

Free プラン: カード登録なし、公開 1 ページまで