文字化けを防ぐ&解消する方法

Web制作で良くあるのが文字化け。この文字化けを防ぐための方法について説明します。

独学!未経験からWebデザイナーになる!! > Web制作Tips > 文字化けを防ぐ&解消する方法

文字化けを防ぐ&解消する方法

※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。

Webサイトを作ったことのある方で、体験したことのない方はいないのでは！？というほど、コーディングを始めたころに遭遇するのが文字化けです。このやっかいな文字化けですが、なぜ発生するのかの理由や、いざ発生した際の対処法を知るということは、Webデザイナーにとって極めて重要なことです。

本ページにて、文字化けが発生する理由や、回避のためのチェックポイントをご紹介します。

文字化けが発生する理由

回避策だけを知るよりも、根本的なところから知っておく方がより理解できるはずです。まずは、なぜ文字化けが発生するのか、その基本&理由を大雑把に知っておきましょう。

文字コードの存在

皆さんもご存じだと思いますが、コンピュータは0と1の二進数で処理をしています。ですので、例えば「あ」というような文字が、PC内にそのまま登録されているわけではありません。ではどうやってPC上で文字を表現しているかというと、コンピュータで理解できる情報（バイト表現）を、人間が理解できる文字と対応させることで表しています。このバイト表現が文字コードであり、ある文字コードでは、[ 82A0 ]が[ あ ]、のような感じに表されます。

さらりと「ある文字コードでは」と言いましたが、文字コードは1つだけではありません。日本では、Shift-JIS, EUC-JP, UTF-8などという文字コードがよく使われており、それ以外にも複数の種類が存在します。つまり、人間から見れば同じ「あ」でも、文字コードが異なれば、PC内部では全く異なる情報ということになります。

参考：Webサイトによく使われる文字コード
文字コード 簡易説明
Shift_JIS 読み：シフトジス
主にWindows系のOSで使われる。モバイルサイトでもこちらが主流。
EUC-JP 読み：イーユーシージェイピー
主にUNIX系のOSで使われる。
UTF-8 読み：ユーティーエフハチ・ユーティーエフエイト
最近の主流。多言語対応。システムとの親和性が高い。

文字コードの解釈違いが原因

このような前置きをしたのにはわけがあります。文字化けが発生する理由は、文字コードについて最低限知っておかないと説明のしようが無いからです。文字コードの基本はお話ししましたので、いよいよ文字化けが発生する理由に進んでいきましょう。

ずばり文字化けが発生する原因は、「HTMLファイル自体の文字コードと、ブラウザが解釈した文字コードが異なるとき」に発生します。例えば、Shift_JISで保存されたHTMLファイルを、ブラウザがUTF-8だと勘違いして表示してしまうと文字化けが発生する……という具合です。

通常Webブラウザは、サーバからHTMLを受け取り、レスポンスヘッダ（後述）やHTMLを分析した上で、「文字コードはこれだろうな」と解釈して、ページを表示します。正しくWebページが作られていれば、たいていはWebブラウザが正しく解釈してくれるので、通常は文字化けが起こりません。しかし、制作者がきちんとした指定をしないと、Webブラウザによって誤って解釈される（または解釈させてしまう）ことがあるのです。

というわけで、私たちにできる文字化け対策は、正しく文字コードを指定し、正しくWebブラウザに文字コードを解釈してもらうこと、と言えるでしょう。

チェックポイント

それでは、Webブラウザに正しく文字コードを解釈してもらうためのチェックポイントについてご紹介します。もし文字化けが発生した際は、以下を順番にチェックすることで、たいていは解消することができるはずです。

ファイルの文字コード

まず重要なのが、もともとのHTMLファイルがどの文字コードで保存されているかです。大抵のエディタでは、任意の文字コードを指定してHTMLファイルを保存することが可能ですが、何で保存したかを明確にしてみてください。

「特に何も指定していないんだけど」という場合の文字コードについては、デフォルト(初期値)の文字コードはお使いのエディタにより異なりますので調べてみないと分かりません。

いずれにしても、分からない場合は、HTMLファイルがどの文字コードで保存されているかを真っ先にチェックしましょう。

例えばDreamweaverなら、「修正」→「ページプロパティ」→「タイトル/エンコーディング」の、「エンコーディング」から確認・変更できます。Terapadなら、「ファイル」→「文字/改行コード指定保存」で、現在開いているファイルの文字コードの確認・変更ができます（調べ方はエディタによって異なりますので、エディタの説明書をお読みください）。

HTMLタグで指定する文字コード

どの文字コードでHTMLファイルが保存されているかをチェックしたら、次はHTML内で指定する文字コードをチェックします。実は、HTMLファイル内で、Webブラウザに対して「このHTMLファイルの文字コードはこれですよ」と助言するためのタグがあるのです。

そのタグは、下記のようなmetaタグを、<head></head>内に記載します。例えば、UTF-8ならこんな感じです（赤字部分は、HTMLの文字コードに応じて異なります。以後も例はUTF-8で記述しますが、適宜読み替えてください。）

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

HTMLのバージョンによっては下記（HTML5）のような場合もあります。

<meta charset="UTF-8">

もしすでにhead内に上記のようなmetaタグがあれば、文字コード部分（赤字部分）が、HTMLファイル自体の文字コードと同じかをチェックしましょう。もし上記metaタグが無ければ、上記のような感じでHTMLファイルの文字コードを記述します。これにより、ほとんどの場合、Webブラウザが正しくHTMLの文字コードを解釈してくれます。

なお、Dreamweaverでは新規ページを作成する際、自動的にHTMLファイルの文字コードに対応させた上記metaタグがついてくるので、たいていはそのままでも大丈夫です。

XHTMLの場合でXML宣言している場合

XHTMLの場合でXML宣言している場合、なおかつ<html>タグの上（つまりファイル冒頭）に下記のような表示がすでにある場合は、下記の赤字の部分の文字コードが、ファイルの文字コードと揃っているかをチェックしてください。

なお、XML宣言していない場合、あえてXML宣言しない場合、またはこの部分の意味がよく分からない場合は、下記は気にしなくてかまいません。

<?xml version="1.0" encoding="UTF-8"?>

レスポンスヘッダの文字コード

上記2つをチェックすれば、たいていの文字化けは防げるはずです。もし上記を正しく設定しても文字化けが発生する場合は、レスポンスヘッダの文字コード指定がおかしい可能性もあります。

※サーバを介していない場合（例えばWindowsのエクスプローラで、ダブルクリックして開いた場合など）は、ヘッダが発生しないため除きます。

レスポンスヘッダとは、HTMLファイルの中身よりも先にサーバから受け取る、一般ユーザーの目には見えない情報のことです。プログラムを書かない限りあまり意識することはないのですが、どんなときでも必ずヘッダがついてきています。私たちには見えないところで、おまけの情報がついている、というくらいにイメージしてください。 この部分に、ファイルの文字コードを指定できる部分があるのです。

ヘッダは、Firefoxのアドオンである Live HTTP Headers等のツールを使えば見られます。が、ここではヘッダを見ることが目的ではないので、文字化けを解決するためのポイントだけお話しします。.htaccessが使えるサーバーなら、.htaccessに以下を記述するだけです。

AddType "text/html; charset=UTF-8" html htm

赤字部分は実際の文字コード、青字部分はご利用のファイル拡張子（複数記述する場合は半角スペース区切り）に直して記述してください。これは簡単に言えば、HTMLファイルはUTF-8のレスポンスヘッダを送信してね、という命令です。

なお、PHPが使えるサーバーかつ、PHPが動く拡張子のファイルなら、文字化けのファイルの最初の部分（<html>やXMLl宣言よりも上）に下記のようなコードを書いても同じです。

<?php
header("Content-Type: text/html; charset=UTF-8");
?>

これで文字化けが直らなければ問題を切り分けて解決するしかありませんが、普通の静的な（プログラムが絡んでいない）ページなら、ほぼ解決するはずです。

文字化けを発生させないために

文字化けを発生させないために最も大事なことは、HTMLを書いているとき、いや、サイトを企画する段階で、何の文字コードでサイトを制作するかを決めておくことです。実際、Web制作の実務でも、たいていのケースでは制作前の企画段階から文字コードを選定しているんですよ。

また、HTMLをコーディングしている最中、そのサイトやそのページの文字コードはなんであるか、ということを常に頭の片隅においておくといいでしょう。慣れてしまうと、結構自然にできるものですよ。

どんな文字コードがよく使われる!?

実際のWebサイトで、どの文字コードがよく使われるかですが、昔はEUC-JPが多かったように思います（Shift_JISも多かったかな）。ページ途中でも触れましたが、現在はUTF-8が標準ですね。個人的にも、特にWebシステムが絡む場合の新規案件はUTF-8一択になってきていますし、特に理由がない場合も同様にしています。

↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)

12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。

独学！未経験からWebデザイナーになる！！

コメント

初心者 さん　2012年05月10日20時40分
HP作成初心者です。
文字化けで困っています。ご教授頂ければと思いコメント致します。
dreamweavercs5.5(osはmac)にてHPを作成しています。
BrowserLabにて確認したところ、IE9.0では文字化けしていないのですが、IE8.0以下では化けてしまいます。
具体的には、「で」が「て 〝」のように濁点が全角で表示されてしまいます。半濁音も同じ状況です。
safariやfirefoxでは問題ありません。
どのようにしたらよいのでしょうか？
よろしくお願い致します。
馬場誠 さん　2012年05月11日12時27分
初心者さん、こんにちは。

濁点や半濁点が全角になるだけで、他は問題無く読めるということでしょうか。

もしそうであれば、UTF-8-MAC関連の問題っぽい気がします（気になる場合は、「UTF-8-MAC」で検索してみてください）。

ものは試しに、やってみました。

■制作環境
MacOS X 10.5
Dreamweaver CS4

環境は異なりますが、上記で新規ファイルを作り、UTF-8でファイルを保存してアップしました。
http://www.be-webdesigner.com/tips/coding/mojibake_test.htm

オンラインのBrowserLabで見たところ、特に文字化けはしていないようです。
ただ、IE8等は漢字のフォントだけ明朝系で表示されてしまいました。ちなみに本物のWindows IE8で見てみましたが、もちろんそういったことはありません。

BrowserLabも完璧にエミュレートしているわけではないと思いますので、まずは他でもチェックしてみるといいと思います。「クロスブラウザテスト」で検索すれば、他にも同様のサービスがでてくると思います。

他で大丈夫であれば、BrowserLab側の問題で、実環境では大丈夫な可能性もあるかもしれません。
初心者 さん　2012年05月11日17時37分
馬場誠様

ご回答ありがとう御座います。
Abobeに問い合わせたところ、BrowserLab上の問題とのことでした。
Abobe側で同じ環境で同じ現象が確認でき、ブラウザで確認したところ正常に表示されたそうです。
このような現象は初めてとのことで、今後の開発に役立てたいとのことでした。

自分のコーディングミスとばかり思っていました。
BrowserLab上の問題だったとは…。他でもチェックできるものがあるのですね。検索してみます。
大変助かりました。本当にありがとう御座いました。
馬場誠 さん　2012年05月11日19時24分
濁点だけの文字化けはUTF-8-MACで起こる現象なので、そのアプリケーション（BrowserLab）のUTF-8-MACの実装ミスが疑わしいかな、と思っていたので納得です。

お役に立てたかは分かりませんが、解決してよかったです！
くも さん　2013年08月03日12時58分
ありがとうございます！解決しました！
プログラマではない私にとって、非常に読みやすいページでした！
ノウハウを公開してくださってありがとうございました。
馬場誠 さん　2013年08月04日07時38分
私も当初はよく文字化けに悩まされました(^^;)
解決されたようでなによりです！
徳重　正 さん　2014年04月29日04時15分
 　問い合わせフォーム付のホームページを作成しサーバーに転送しましたが、

　問い合わせ以外のページは文字コードを

　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

　に表示しておりインターネットExplorerもグーグルでも問題なく表示されます。

　ところが、問い合わせフォーム付のぺージは、サーバーに送信したFTPの

　問い合わせフォーム付ページの文字コードをShift_JISにし

　ヘッド内のメタタグを下記のように記述しました。

　<meta http-equiv="Content-Type" content="text/html; charset=s-jis">

　結果ク゛ーク゛ルでは、文字ばけもなく問題なく送信も受け取りもできますが、

　インターネットExplorerでは、ページが文字ばけしてしまいレイアウトが

　崩れてしまいます。

　UTF-8では、レイアウトはくずれませんが、送信したデーターを受け取った場合

　文字ばけしてしまいます。

　ク゛ーク゛ルでは、問題なく表示もされ送信したデーターも問題なく受け取れますが、

　インターネットExplorerでは、文字化けしレイアウト崩れが発生するのはなぜですか？

　大変もし訳けありませんが、ご指導いただければありがたいです。

　宜しくお願いします。
馬場誠 さん　2014年04月29日08時46分
徳重正さん、こんにちは。
その問い合せフォームは、Shift_JISで正しく動作するフォームなのですよね！？
また、グーグル＝（Google ）Chromeとして回答します。

文章を拝見した限りでは、Internet Explorerではブラウザが文字コードを誤って解釈している（Shift_JISと解釈してくれていない）ように読めます。

Chromeでは表示できるというのは、たまたまChromeがそう判断しただけかもしれません（明示的に指定されていない場合は、それぞれのブラウザが適当に文字コードを解釈します）。


コードやサーバの設定次第なので、いただいた文章だけでは確定的なことは言えませんが、おそらくレスポンスヘッダの文字コードがShift_JISに指定されていないような気がします。

そのお問い合わせフォームが何のスクリプトなのか分かりませんが、
PHPなら<?php ～ ?>内のなるべく最初の方に
header("Content-Type: text/html; charset=Shift_JIS");

Perlならなるべく最初の方に
print "Content-Type: text/html; charset=Shift_JIS\n\n";
でShift_JISのレスポンスヘッダが出力されます。

※誤って記述するとプログラムが動作しなくなるため、事前にバックアップをとってから行ってください。

また、本ページのレスポンスヘッダの文字コードも参考になさってください。
プログラムをいじるのが難しい場合は、お問い合わせフォームのディレクトリだけ別にして、その中に上記リンク先の.htaccessを配置し対応するのが一番簡単です。


あとは余談ですが、s-jisという表記はあまり見ませんね。
それでも良いのかもしれませんが、下記のShift_JIS表記が一般的です。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
Haru さん　2014年07月30日10時35分
こんにちは、今回初めてHPをつくってみた者です。　超～初心者で…ホントは途中で止めようと思ったくらい難しいです。
先日やっと出来上がり、アップしてみたところ…　文字化けの状態で、最初は何がなんだかわかりませんでした。　　でもこのHPを見て「一つずつチェック、修正してみよう。」と思いました。
問題を紐解いて行こうと思います。
ありがとうございました。感謝します。
馬場誠 さん　2014年07月30日21時14分
Haru様、こんにちは。

初めてのHP制作、最初は難しいですが、とても楽しいですよね☆
一つずつチェックしながら問題箇所の原因を切り分けていくのは、今回の件に限らず役立つと思います。
うまく解決できるといいですね(^-^)
Haru さん　2014年08月02日13時16分
馬場様こんにちは、先日のHaruです。
あれから文字化けの件で問題箇所を紐解いていたのですが、ダメです。とうとう行き詰まりました
・゜・(ノД`)・゜・
どこがどう悪いのか手ほどきいただけないでしょうか。

・ホームページの作成はhtmlファイル。メモ帳で作成
・ブラウザはinternet explorer
・作成の途中ではプログラムから開いて何度も見ていましたが特に問題はありませんでした
・ひとまずアップを…と、ffftpのソフトでアップロードするのですが
・接続し、ローカル側（画像の左側）までは特に文字化けの様子は見られませんが、ホスト側（画面の右側）に行ったときには文字化けしてます。


<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="　○○○">
<meta name="description" content="×××">
<title>□□□</title>
<link rel="stylesheet" href="style.css" type="text/css">
<BASE target="_top">
</head>
   
<body>

<table width="800" cellspacing="0" cellpadding="0" style="border:0px solid blue;" bgcolor="pink" align="center">
  <tr>
    <td>
　　　　

　　　　<!--タイトルバー▼-->
　　　　<table width="100%" style="border:1px solid #cccccc;  background:#dcdcdc">
           <tr align="center">
              <td>
              　 <h1>▼▼▼♡</h1>
　　　　　　　　<p>❤◇◇◇ヾ(*´∀｀*)ノ </p>
              </td>
            </tr>
          </table>
文字化けの症状は<p>❤◇◇◇ヾ(*´∀｀*)ノ</p>の辺りから決まって起こります。
どこがどうおかしいのかわかりませんがhead内でおきているのではと思いコピーいたしました。
上記内容で原因箇所が判明できましたら、教授していただけないでしょうか。m(_ _)mいたします。
あっもしかして絵文字はタブーですか?
馬場誠 さん　2014年08月02日14時46分
Haruさん、こんにちは。

FFFTP上で、左の画面（ローカル側）をクリックして開けば文字化けしなくて、右の画面（本番サーバー側）からクリックして開けば文字化けする……ということでしょうか！？

それであれば、FFFTPがファイルをアップするときに、文字コードを変換してしまっているように考えられますね。

FFFTPの画面上部にアイコンが横に並んでいると思います。その中に、サーバーにアップロードするときに、文字コードの変換をするボタンがあります。それが、変換しないという意味の「無」になっていますでしょうか。

※私のFFFTP Ver 1.98gでは、右から７個目に「無」ボタンがあります。
「無」でなく、EUCやらJISならのボタンが押されている場合、文字コードが自動変換されてしまいます。

一度チェックしてみてください。なお、絵文字は、半角・全角文字を組み合わせた普通の絵文字は大丈夫です。
haru さん　2014年08月02日17時06分
こんにちは馬場さん。早急のお返事ありがとうございます。


>FFFTP上で、左の画面（ローカル側）をクリックして開けば文字化けしなくて、右の画面（本番サーバー側）からクリックして開けば文字化けする……ということでしょうか！？


その通りです！！　　分かっていただけて嬉しいです。

馬場さんのおっしゃる　「文字コードの変換ボタン」は「無」になっています。

ある程度の文字化けの原因を調べてはみましたが「もうこれ以上素人のわたしには…」といった域に入っているのでしょうか?　
意地でもやり遂げたい気はあるのですが、難しい原因でしょうか?

念のため、本番のホスト側の状況をコピーしました。


<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">਍ഀ
<html>਍ഀ
<head>਍ഀ
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"htm htm>਍ഀ
<meta name="keywords" content="フリーマーケット,リユース,ハンドメイド,温故知新,Haru,帽子,乳がん">਍ഀ
<meta name="description" content="自分のこれから姿勢を考えて作ったサイトです。">਍ഀ
<title>温故知新・・Haru・・</title>਍ഀ
<link rel="stylesheet" href="style.css" type="text/css">਍ഀ
<BASE target="_top">਍ഀ
</head>਍ഀ
   ਍ഀ
਍ഀ
<body>਍ഀ
਍ഀ
਍ഀ
<table width="800" cellspacing="0" cellpadding="0" style="border:0px solid blue;" bgcolor="pink" align="center">਍ഀ
  <tr>਍ഀ
    <td>਍ഀ
　　　　਍ഀ
਍ഀ
　　　　<!--タイトルバー▼-->਍ഀ
　　　　<table width="100%" style="border:1px solid #cccccc;  background:#dcdcdc">਍ഀ
           <tr align="center">਍ഀ
              <td>਍ഀ
 

            　 <h1>reuse＆handmade 温故知新・・Haru・・へようこそ♡</h1>਍ഀ
　　　　　　　　<p>❤茶の間でフリマ気分❤ より快適で਍빎橼기襦地鈰䈰腬昰☰︠⠰⨀됀 䀢⫿⤀褀⃿㰀⼀瀀㸀ഀ
਍              㰀⼀琀搀㸀ഀ
਍            㰀⼀琀爀㸀ഀ
਍          㰀⼀琀愀戀氀攀㸀ഀ
਍ഀ
਍ ഀ
਍          㰀℀ⴀⴀ쬰ﰰ퀰ﰰ배ⴥⴀ㸀ഀ
਍ 000‰㰀琀愀戀氀攀 眀椀搀琀栀㴀∀㄀　　─∀ 栀攀椀最栀琀㴀∀㌀　∀ 挀攀氀氀猀瀀愀挀椀渀最㴀∀　∀ 挀攀氀氀瀀愀搀搀椀渀最㴀∀　∀ 戀最挀漀氀漀爀㴀∀⌀㘀㠀㤀㤀搀㄀∀ 愀氀椀渀最㴀∀挀攀渀琀攀爀∀ 㸀ഀ
਍            㰀琀爀 瘀愀氀椀最渀㴀∀洀椀搀搀氀攀∀  愀氀椀渀最㴀∀挀攀渀


おばかなHaruで大変恐縮に思います。
やりとり回数が多大になりそうで…Σ(゜д゜lll)　　すみません。
馬場誠 さん　2014年08月02日19時33分
> 難しい原因でしょうか?


FFFTPの左側を開いて文字化けしないのに、右側で文字化けするということは、左から右（ローカルから本番サーバー）へアップロードする際に文字化けていることが切り分けられます。

問題箇所は分かっているので難しくない気もしますが、文字だけだと難しいかもです(^^;)
おそらくFFFTPあたりの問題でしょうね。

確認することとしては、「無」は大丈夫なようなので、あとは

・HTMLファイルの文字コードがShift_JISである（ファイル内のShift_JIS表記のことでは無く、保存形式が、です。メモ帳で何も指定しない場合はShift_JISです）

・ファイル拡張子は.html または.htmである。

・「無」の少し左の方にある2個目の[SJIS]＝マウスオーバーで「ローカルの漢字コードはShift_JIS」のボタンが選択状態になっている。

・その１つ左の[A/B]のアイコン=マウスオーバーで「ファイル名で転送モード切替」のボタンが選択状態になっている

その上で、サーバーのファイルを一度削除してから、再度アップロードしてみてください。
もしそれでもだめな場合は……「filezilla」などの別の有名ソフトでやってみてはいかがでしょう。

こちらで出来れば、FFFTPに原因があることが切り分けられると思います。
Haru さん　2014年08月03日16時50分
馬場様
いつもわかり易い表現で説明いただきたりがとうございます。
あれから、格闘しました。　アップロードに関して(;_;)
確認することとしては、「無」は大丈夫なようなので、あとは


>・HTMLファイルの文字コードがShift_JISである（ファイル内のShift_JIS表記のことでは無く、保存形式

が、です。メモ帳で何も指定しない場合はShift_JISです）
  　✔


>・ファイル拡張子は.html または.htmである。

　　✔


>・「無」の少し左の方にある2個目の[SJIS]＝マウスオーバーで「ローカルの漢字コードはShift_JIS」のボ>

タンが選択状態になっている。
　　✔


>・その１つ左の[A/B]のアイコン=マウスオーバーで「ファイル名で転送モード切替」のボタンが選択状態になっている

　　✔
全てクリアの上で一から新規作成としてやり直しましたが…相変わらずでした。

ご紹介頂いた、filezillaに関しては上手くインストールができず断念。
その他のClassicFTPでやって見ました。こちらに関しても同じで、アップしたサイトにアクセスしたら、以前と変わらない状態の文字化けでした。

2つのソフトでダメ。同じ状態。　　FFFTPには問題なしという事でしょうか？
馬場誠 さん　2014年08月03日17時33分
うーん、そうなると、どこが問題か、文章だけだと難しいですね。
実際のHTMLファイルがあればすぐ分かると思います。

乗りかかった船なので、もしよろしければですが、大事な箇所を削った上でメールの添付ファイルでHTMLファイルを送っていただければ確認しますよ☆
（もちろん非公開で）

ご記入いただいたメールアドレスにメールしておきました(^-^)
斎藤 さん　2014年08月13日23時46分
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type”content=“text/html;charset=utf-8” />
<title>人生</title>
<style type=“text/css”>




</style>
</head>
<body>

<h1>人生</h1>


</body>
</html>

macで初めて、HPを作成しているのですが、タイトルのところで既に文字化けが起こりました。
素人なので、原因が全くわかりません。

解決法を教えて頂けますか。
馬場誠 さん　2014年08月14日08時04分
斎藤さん、こんにちは。

どのような状況で文字化けが発生しているのかが分からないので、コードだけでは何とも言えないところです。

下記が分かれば、また違った回答が可能です。

・HTMLを保存するのに用いたソフト名。
・FTPソフトを使っている場合はソフト名。
・ファイルの閲覧は、httpからアクセスしているのか、それともMacのFinderからHTMLファイルを開いているのか。


一般論としては、ファイル自体の文字コードをUTF-8で保存すること（ソフトにより方法が異なります）。
加えて“” が全て全角になっているようですので、半角の"になおしてみてください（“”→"）。
斎藤 さん　2014年08月17日22時59分
素早いご返信ありがとうございます。

「HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる」という本にそって実行しております。
ファイルの閲覧は、MacのFinderからHTMLファイルを開いています。

''なのですが、半角で打ち込もうとするとEnterキーを押した後全角になってしまいます。

教えて頂けますでしょうか？
馬場誠 さん　2014年08月18日07時23分
斎藤さん、こんにちは。

Finderから開いている場合であれば、UTF-8で保存されていないか、UTF-8として認識されていないかのどちらかでしょうね。おそらく、全角の”があるために後者なのかなと推測します（Safariは文字化けして、Chromeでは文字化けしない場合は特に）。

Mac標準では、「英数」キーを一度押した後、「shift」キーを押しながら数字の「2」キー（「ふ」のキー）を押せば入力できます（enter/returnキーを押す必要はありません）。

※もとの入力モード（全角）に戻したいときは、「かな」キーを押せば戻ります。
まさと さん　2014年09月01日13時38分
はじめまして、こんにちは。
先日ホームページを作ったばかりの初心者です。
自分のホームページを、スマホで検索すると文字化けはありません。しかし、スマホに自分のホームページのショートカットを作ると、タイトルが文字化け。
また、パソコンで自分のホームページを検索すると、ホームページタイトルが文字化けで出て来ます。（中身は問題なしでした）
どうすれば改善できるか教えてください、お願いします！
ちなみに、HTMLはメモ帳で打ち込んでいます。
馬場誠 さん　2014年09月01日19時03分
まさとさん、こんばんは。
検索するとホームページタイトルが文字化け……というのは、検索結果一覧内のページタイトル（だけ）が文字化けしているという意味でしょうか？

何がどのように文字化けているのかが分からないので一概に言うのは難しいですが、本記事内のチェックはされておりますでしょうか？

1.ファイルの文字コード
2.HTMLタグで指定する文字コード
3.レスポンスヘッダの文字コード

特に3は難しいと思いますが、最低限、1と2が同じ文字コードになっているかを確認してみてください。
（メモ帳で何も指定せずに保存する場合は、Shift_JISで保存されていると思います）

後は、タイトルに機種依存文字を使うと文字化けることがあります。特に記号などは注意です。
まさと さん　2014年09月01日19時46分
こんばんは、返信ありがとうございます！
はい、ページタイトルだけです。が、フレームページのheadの下にmetaタグを打つと直りました。本当にしょうもないことが原因でした、すみません(>_<)
Kevin さん　2014年12月10日01時31分
出来ましたらご教示下さい。

Windows8.1(64bit)のマシンで Office Outlook　Mailを使っています。 

メールアド変更の確定用メールを受信したのですが・・・

本文が文字化けで読めません。

相手側からのメールを一部抜粋で転載しますが、エンコードをUTF-8に設定変更しても
治らないので、マイクロソフトに相談しましたが、エンコードをUTF-8に設定変更しても
駄目な場合は、１案件9,500円の有料サポートになるとのこと、小生は７１才の年金生活
なので経費節約のため諦めようかと思っています。

他のメールでは文字化けは一切ないのですが、Office 2013をアンインストールして再インストールしても１件のメールに限って治らないので、可能であれば助けて貰えたらと、このサイトに書き込ませて頂きました。
よろしくお願いします。


以下はメールの一部転載です。
----------------------------------

プチリリメールアドレス変更用のメールが文字化けしているとのことですね。
原因といたしましては、メール本文と受信側のメールソフトとの文字コードの設定が
異なっている可能性がございます。
プチリリのメールはUTF-8フォーマットで送信されております。

メールソフトによりましては、文字コードの設定をすることができますので、
文字コードの設定をUTF-8に変更してメールを確認してみてください。
馬場誠 さん　2014年12月10日21時29分
Webページの文字化けと異なり、メールの文字化けは判断するのが少し難しいです。
メールソフト側に問題があるのか、メール送信側に問題があるのかは、今回の内容だけでは残念ながら私にも判断できません（１つずつ問題を切り分けていかないと、確実なことが分からないです）。

通常は正しく送信されているメールであれば、大抵メールソフトが自動で文字コードを判別し、文字化けせずにメールを読むことが出来ます。

一歩ゆずって、もしもメールソフトが文字コードの自動判別に失敗したとしても、手動で文字コードをUTF-8に変更すれば見られるはずです。

今回は、文字コードを変更してもだめなようなので、メール送信の時点から、問題がある可能性もありますね。
このあたりは、実際に受信テストなどをしてみないと、何とも言いがたいです。
もう一度運営元のサポートに、UTF-8に変更しても文字化けする旨、連絡してみると良いかもしれませんね。

※いただいたコメントの中に、個人情報（メールアドレス）が含まれる部分がありましたので、その部分は非表示にしておきました。
星野軍次 さん　2014年12月23日16時08分
受信メ－ルが、文字化けしているようで、内容がまったく読めない状態です。
いろなアドバイスや説明を参考に、対応を試みていますが、解決出来ません。
手順として、始めは、文字化けして届いたメ－ルをダブルクリックし、エンコ－ドから、
日本語(自動選択)をクリックしても、また別の項目で試してみましたが、解決
出来ません。パソコンは、今だ未熟です。宜しくお願いいたします。
馬場誠 さん　2014年12月23日18時09分
一つ上のコメントにもありますように、メールの文字化けはちょっと難しいです。
メール送信者側に問題がある場合と、受信側に問題がある場合があり、しかもどんなふうに文字化けているのかなどいろいろあり、簡単に原因が分からないのですm(___)m

具体的に原因を挙げると、以下の様なケースに大別できると思います。
1. そもそものメール送信自体が正しく行われていない
2. メールソフトが文字コードに対応していない
3. メールソフトが文字コードの自動判別に失敗している

1の場合は、後述する3の方法を試してみて、それでも駄目でしたら難しいです。送信側にコンタクトをとることをお勧めします。

2の場合は、古いメールソフト等をお使いの時にあります。ここ５年くらいのメールソフトであれば、大抵の文字コードには対応しているとは思います。

3の場合は、メールソフトの自動判別（自動選択）になっている部分を、メールの文字コードに指定し直してみることが考えられます。

ただ、どんな文字コードかはメールのヘッダという情報が無いと分からず、難しいと思いますので、適当に指定してみると良いでしょう。

基本的には、ISO-2022-JPだったり、UTF-8であることがほとんどです。

他に、基本的にはあまり使われていませんが、Shift_JISや、EUC-JPなども念のため指定してみてもよいかもしれません。


ただ、大抵は送信側が正しくメールを送信していれば、自動判別に成功する（＝文字化けない）ことが一般的です。大事なメールであれば、先方にコンタクトをとってみられるのがよいかもしれませんね。
ほぼ初心者さん さん　2015年02月20日15時44分
はじめまして、こんにちは。
エンコード由来と思われる文字化けで困っています・・・
既に自分のホームページを持っているのですが、先日グーグルウエブマスターからレスポンシブにせよとメールが来た為、現在レスポンシブデザインに取り組んでいます。

色々調べて、bootstrapというｃｓｓフレームワークスが良いとの事で、早速取り入れる事に。
今までのHPはホームページビルダーで作っており、そこに新たにサイトを作って、bootstrapやindexファイルを読み込んだ所、indexページが見事に文字化けしました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>〇〇〇</title>

と入力したら文字化け、その後ビルダー側で勝手に下記のように書き換えられました

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Style-Type" content="text/css">
    <title>〇〇〇</title>


<meta charset="utf-8">は赤で表示され、<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">がくっついてきます。
これだと文字化けはしませんが、このままで大丈夫なのでしょうか？

エンコード関係は全く素人なので、サッパリ分かりません・・・
ご助言頂ければ幸いです。
よろしくお願い致します。
馬場誠 さん　2015年02月20日23時27分
「ほぼ初心者さん」さん、こんばんは。
ソースを拝見したところ、ホームページビルダーで書き換えられた後、文字コードの指定が重複しているようですね。

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta charset="utf-8">

上の行はShift_JIS、下の行はUTF-8が指定されています。
これだと、ブラウザがページを読み込んだ際、Shift_JISなのかutf-8なのか誤って認識してしまう可能性がありますので、このままではよくありません（おそらくはエラーという意味で赤くなっているのだと思います）。


まず、そのファイルの文字コードはShift_JISでしょうか、それともUTF-8でしょうか。
一般にはUTF-8の方が使われるのでそうだと仮定すると、

・ファイルをUTF-8で保存する（ホームページビルダーの保存設定をご確認ください）
・<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">を削除する

で普通は問題無いはずです。

これでもまた<meta～charset=Shift_JIS">が勝手に挿入されてしまうようであれば、ホームページビルダーの設定（もしくは仕様）の可能性があると思います。

まずは、charset＝UTF-8であると、ホームページビルダーに認識させることです。
下記の設定で、UTF-8に変更できるようです。
文字エンコード（charset）を変更する方法について


これで改善すれば問題ありませんが、もしも
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
とUTF-8が並んでしまう場合は、短縮形のcharsetの記述にソフトが対応していない可能性があるので、その場合は下段の指定を削除した方が良いかもしれません。


※ちなみに、ホームページビルダーはほとんど使ったことが無いので、大変恐縮ですが、あくまでも推測になります。それと、ホームページビルダーのバージョンによっても異なる可能性があります。
初心者 さん　2015年03月07日02時37分
Š¢—э؁X”ü‚̍D‚«‚Ȑl‚ÍŠ¢—Ñ—³‘¾‚Å‚·

•à”ü‚̍D‚«‚Ȑl‚Í—EŽ÷‚Å‚·

Š¢—э؁X”ü‚̍D‚«‚Ȑl‚ÍŠ¢—Ñ—³‘¾‚Å‚·

Š¢—т̍D‚«‚Ȑl‚͍؁X”ü‚Å‚·

Š¢—э؁X”ü‚̍D‚«‚Ȑl‚ÍŠ¢—Ñ—³‘¾‚Å‚·

Š¢—э؁X”ü‚̍D‚«‚Ȑl‚ÍŠ¢—Ñ—³‘¾‚Å‚·

Š¢—э؁X”ü‚̍D‚«‚Ȑl‚͍؁X”ü‚Å‚·

全く解読の仕方が分かりません。
色々と調べてはみたものの結局解決の糸口も見つからず
この様な文字は出てこないのでお手上げ状態です。
なにかいい方法はありますか？
馬場誠 さん　2015年03月07日09時11分
初心者さん、こんにちは。

すでに文字化けしている結果を解読するのは非常に難しいです。
これがファイルやメールの中の文字でしたら、解読ではなく、文字コードを変えて表示することで、読める可能性はあります。

いずれにしても、もう少し状況を詳しく書いていただかないと、何とも言いがたいです。。。
スコットまゆみ さん　2015年04月25日12時25分
初心者です。「HTML/XHTML&スタイルシートレッスンブック」ソシム社を使っています。
Mac仕様です。テキストエディット使用。HTMLコードUTL-8です。
<title></title>で既につまずいている状態なのですが、タイトルを英語だと問題なくトップページ作成できるのですが、日本語にすると文字化けしてしまいます。
海外在住、海外で購入したMacです。キーボードに日本語はありません。
日本語だけが文字化けしてしまう事と関係があるのでしょうか？
英語、日本語両方が書き込める様にするにはどうしたらよいでしょうか？
馬場誠 さん　2015年04月25日17時00分
スコットまゆみさん、こんにちは。
国際標準であるUTF-8で保存する限り、キーボード自体に日本語が無くても、入力さえできれば日本語は問題無いと思います。

タイトルが日本語の時だけ文字化け……という状況からすると、そのHTMLファイルを保存する文字コードと、表示する際に使用された文字コードが異なっているとことが考えられます。

まず、確実にファイルがUTF-8で保存できているかどうか（テキストエディットの場合は、保存時にUTF-8を指定すれば大丈夫です）。

そして、表示する際に、Webブラウザによって正しくUTF-8として解釈してもらえているかが重要です。

このあたりは、当ページ内のチェックポイントを参考にしていただければと思います。
スコットまゆみ さん　2015年04月26日05時07分
迅速に対応して頂きありがとうございました。
表示の際のWebブラウザによる問題でした。

ありがとうございました。
ベティ　山崎 さん　2015年06月21日20時14分
フォームで文字化けを起こしたり起こさなかったりしています。同じコンピュータから送っても同じです。解決法をご教示頂けると幸いです。

    <p class=MsoNormal align=left style='mso-margin-bottom-alt:auto;text-align:
left;mso-pagination:widow-orphan'><img src="logo111122.gif" width="202" height="24" border="0" font face="HG丸コ゛シックM-PRO" alt="お問い合わせフォーム"><br>
<form name="requestform" method="post"
action="http://example.jp/hoge.cgi">
<input type="hidden" name="mailto" value="info@example.jp">
<input type="hidden" name="title" value="お問い合わせページ">
<input type="hidden" name="subject" value="お問い合わせ">
<input type="hidden" name="required" value="お名前"/>
<input type="hidden" name="required" value="メールアドレス"/>
<table border="0" cellpadding="0" cellspacing="0" summary="お問い合わせフォーム">
<tr>
<td>お名前<span><font color="red">（必須）</font><span></span></span></td>
<td><input type="text" name="お名前" size="35" style="ime-mode:active;"/></td>
</tr>
<tr>
<td>メールアドレス<span><font color="red">（必須）</font></span></td>
<td><input type="email" name="メールアドレス" size="35" style="ime-mode:inactive;"/></td>
</tr>
<tr>
<td>電話番号</td>
<td><input type="tel" name="電話番号" size="35" style="ime-mode:inactive;"/></td>
</tr>
<tr>
<td>FAX番号</td>
<td><input type="tel" name="FAX番号" size="35" style="ime-mode:inactive;"/></td>
</tr>
<tr>
<td>携帯電話番号</td>
<td><input type="tel" name="携帯番号" size="35" style="ime-mode:inactive;"/></td>
</tr>
<tr>
<td>ご住所</td>
<td><p><textarea name="ご住所" rows="2" cols="40" style="ime-mode:active;"></textarea></p>
</tr>
<tr>
<td>お問い合わせ内容</td>
<td><p><textarea name="お問い合わせ内容" rows="8" cols="40" style="ime-mode:active;"></textarea></p>
</td>
</tr>
</table>
<input type="submit" value="送信する" style="font-size:12pt;font-family:HG丸コ゛シックM-PRO;" onclick="document.charset='Shift_JIS';"/><input type="hidden" name="url" value="http://example.jp/">
<input type="reset" value="リセット" style="font-size:12pt;font-family:HG丸コ゛シックM-PRO;"/>
</form>
<br>
  </div>
馬場誠 さん　2015年06月22日07時46分
メール送信フォーム自体が文字化けするのか、メールを受信する際に文字化けするのかどちら（または両方？）でしょうか。

いずれにしても、HTMLファイルの文字コードに原因の可能性が考えられるとは思います。記載いただいたコードに、文字コードの指定部分（head内）の記載がありませんでしたが、何の文字コードをお使いでしょうか。

1. HTMLファイルを保存する際の文字コード
2. HTMLファイル内の、文字コードの指定
3. メール送信プログラムが期待する文字コード（プログラム作成者にしか分かりません）

を合わせてやれば、大抵のケースでは文字化けは防げます。

※おそらくWordなどから書き出したHTMLのように見受けられますので、もしそうであれば＆変更していなければ、1と2はShift_JISの可能性があります。

プロバイダが提供しているフリーのメール送信プログラムのようですので、制作者（プロバイダ？）に問い合せるか、プログラムの説明ページも熟読されると良いと思います。
ベティ　山崎 さん　2015年06月22日13時27分
プロバイダーが提供しているフリープログラムではないので、プロバイダーでも対応してもらえなくて困っています。

全体のプログラムを以下に示します。文字種はShift_JISを指定している心算です。
最初と最後はホームページビルダー作成したものです。なお、一部はホームページビルダーで自動修正されている部分があります。

フォームに必要事項を記入して、送信すると確認画面が現れます。この時点では文字化けしていません。確認して送信した情報を「Webメール」で受信すると文字化けを起こしたら起こさなかったりします。この原因がプロバイダーのWebメールにあることが分ればプロバイダーに対応の依頼が出来るのですが、切り分けが出来なくて困っています。
お忙しいところ申し訳ありません。
馬場誠 さん　2015年06月23日11時00分
ベティ　山崎さん、こんにちは。

制作者がいる場合はその人に確認するのが一番ですが、さくっと調べてみたところ、仕様が同じなのでこちらのCGI（プログラム）ではないでしょうか。上記はプロバイダの設置方法説明ページですので、プロバイダが自社のユーザーに開放しているプログラムのようにお見受けします。

とは言えCGIは自己責任かつサポート外としているプロバイダも多く、自分で解決しなければならないケースも多いと思います。

確認画面で文字化けしていないようでしたら、プログラムが期待する文字コードも、（100%ではありませんが）Shift_JISの可能性が高いとは思います。（EUC-JPやUTF-8でも試しにやってみることで、切り分けることもできます）


前回の1～3が正しくできていることが前提ですが、

・メール送信プログラムのバグ・または仕様
・メーラー（Webメール）で対応出来ないメールである可能性

が考えられます。
まずは、後者に問題が無いか切り分けるのが良いでしょう。

説明書を読むと、フォーム内下記位置のvalueのメールアドレスを変えれば、メール送信先を変更することができるはずです。
<input type="hidden" name="mailto" value="メールアドレス">

他の複数のメールアドレス（メーラー）にも送ってみて、確かめてみてはいかがでしょいうか。
他の全メーラーで問題が無ければ、最初にお使いのメーラーの不具合が考えられます。

※検証用のメールアドレスをお持ちで無い場合は、GmailやYahoo!メールなど、フリーメールを利用するのも手です。


他のメーラーでも文字化ける場合は、メール送信プログラムの使い方を誤っているか、プログラム自体のバグ（または仕様）の可能性があります。

説明書がしっかりしたフリーのCGIは探せばたくさん出てくると思いますので、他のCGIに乗り換えてみるのも一つの手ではあると思います。

※コード全体があると、分かる人がみればサイトが分かってしまうので、コードは非公開にしておきますね。
ベティ　山崎 さん　2015年06月23日23時08分
お手数をおかけしました。
本日プロバイダーからお詫びと確認依頼のメールが届きました。
それによると、Webメール側が対応できていなかったようです。
簡単なメールを送ったところ文字化けは起こしませんでした。プロバイダーには暫く使ってみる旨連絡しました。
プロバイダーのメーラーに問題があるとは思ってもみませんでした。
ありがとうございました。
馬場誠 さん　2015年06月24日09時46分
ベティ　山崎さん、こんにちは。

受信側に問題があったとのこと、私もメールの送受信関連はプログラムで関わることもありますが、この辺りはなかなかにセンシティブなんですよね。

別コメントの方も拝見しました。私の方も状況を正しく理解できていない可能性もありますが、とにかく解決して良かったです。

少しでもお役に立てていたら幸いです。
邪王真眼 さん　2017年04月17日12時18分
ホームページ作り初心者です
パソコンでは文字化けせずに閲覧することができるのですがiphoneなどSafariでみると文字化けしてしまうのですがどうすればいいでしょうか？
ご教授お願いします。
馬場誠 さん　2017年04月18日09時04分
邪王真眼さん、こんにちは。

ある環境ではOKで、他の環境ではNGというのは結構よくあります（特にスマホがNGというケースは多いですね）。

その多くは、明示的な文字コードの指定がされておらずにWeb閲覧ソフトの自動判別に頼っているか、文字コードの指定自体が間違っているかのどちらかと思います。

よろしければ、本ページ内の、「チェックポイント」を上から確認してみてください。
特に、「ファイルの文字コード」と「HTMLタグで指定する文字コード」を一致させることが基本です。

HTMLソースを見なければならないので最初は少し難しいかもしれませんが、文字コード指定は非常に重要な部分なので、是非チャレンジしてみてください。
yuri さん　2017年11月28日16時56分
はじめまして。

ワードプレスで制作し、お客さまの方で投稿などの更新をしているWEBサイトがあるのですが
４，５ヶ月前よりコピーペーストができない。
コピーしたものが英語や中国語に変換されてしまって困っていると連絡がありました。(文字化け)

コピー元が別サイトやWordからなど様々なのですが
運営しているWEBサイトの前の投稿記事からコピーペーストしても同じ様に文字化けが起こるそうです。
試しに運営している同じ投稿記事から私がコピーペーストした場合は文字化けもおこらず
普通にコピーできました。

ちょうど文字化けが起こり始めた４，５ヶ月前あたりにパソコンを新しくしたそうなのですが
パソコンの変更が原因で文字化けは起こるのでしょうか？

↓下記が文字化けしてるページの頭に記述されています。

Version:1.0 StartHTML:000000229 EndHTML:000003334 StartFragment:000002708 EndFragment:000003302 StartSelection:000002708 EndSelection:000003302 SourceURL:http://www.example.com/wp-admin/post.php?post=3425&action=edit
※URL実際ものではありません。

お客さまがコピーしたもの↓
縺薙ｌ縺九ｉ繧ゅ←縺・◇繧医ｍ縺励￥縺企。倥＞縺・◆縺励∪縺吶€・*^_^*)

私がコピーしたもの↓
これからもどうぞよろしくお願いいたします。(*^_^*)

私の方で何か作業できるものなのでしょうか？（ワードプレスに何か記述するなど？）
それともお客さまのパソコンの設定なのでしょうか？

ご教授いただければ幸いです。
馬場誠 さん　2017年11月29日09時22分
yuriさん、はじめまして。

コピペした部分のみが文字化けをしているのですよね！？
推測するに、WordPressの問題と言うよりは、クリップボード関連がうまくいっていないのかもしれません。

パソコンを新しくされたとのことですが、Windows10のデフォルトブラウザである、Microsoft Edgeにて文字化けするケースがあったような気がします（Edgeは動作検証の時くらいしか起動しないので、私もあまり詳しくありませんが）。

もしお客さまがEdgeをお使いでしたら、IE11やその他ブラウザでも再現するか確認していただくと良いと思います。
Edgeが原因でしたら、これですぐ直ります。


Edgeの問題で無ければ、以下を試してみるのも良いかもしれません。

・OSを最新にアップデートする。
・ブラウザ（ついでにアドオンも）最新にアップデートする。

その上で、
・常駐ソフトを全て無効にし、アドオンも無効にしてからコピペを試してみる。（セーフモードを利用する等）

OS・ブラウザ・アドオンの不具合・クリップボード関連の常駐ソフトが悪さをしている場合は、これで改善することがあります。

これで直らなければ、さらなる問題の切り分けが必要と思います。
お客さまの環境ということもあり、なかなか切り分けもお願いしづらいと思いますので、上記で直ってくれればいいですね。
yuri さん　2017年12月01日16時10分
馬場誠様

先日回答いただきましたyuriです。
馬場誠様のお話通りでお客様がつかっていたブラウザがMicrosoft Edgeでした。
Chromeで同じように操作いただいたところ問題なくコピーペーストできたとのことです。

ブラウザを変更しただけで直りました。

文字化けではないですけど
クレジッドカード決済や、
ファイルをアップロードする時にも
ブラウザにより反応する・しないなどありますね。

こちらの不具合なのか、
相手の不具合なのか、
それともパソコンの問題なのか
私自身どこまで理解しないとならないのか
Webの世界は本当に広く難しいです。

文字化けの問題解決していただきありがとうございました。
馬場誠 さん　2017年12月02日10時20分
yuriさん、こんにちは。

Chromeではできたようで良かったです。

おっしゃるように、どこに原因・問題があるかを発見するのはなかなか難しいですよね。
私も、これまでの実務で非常にたくさんの問題に遭遇してきました(^^;)

とは言え、問題をこなした分だけ、自然と解決もうまくなっていくようですよ☆
まどか さん　2018年04月03日10時14分
専門的な知識のない私でも、すんなり分かりました！
素晴らしい記事ですね(^^)/
Mihoko さん　2019年04月03日08時01分
はじめまして。文字化けで困っていて、ここのサイトにたどり着きました。教えていただければ、本当に有り難いです。
今まで、Yagoo!ジオシティーズを使って編集作業をしていましたが、2019年3月31日にサービスが終了となりました。今までに作ったホームページは移行させ、今も見ることができるのですが、新規に作るHTMLを今後どうホームページに載せていけばいいのか、分からず、途方に暮れています。
今までは、ジオシティーズのエディターを使ってeuc-jp で作っていました。今はその編集機能も使えないので、いったんwindows７のメモ帳に貼り付けて、編集をして、ffftpでアップしようと考えて実行しました。すると、メモ帳に貼り付けた段階で、見事に文字化けしていました。メモ帳がShift_JISなので、そうなっていると思うのですが、メモ帳上で文字化けせずに、euc-jp で作ったものが見える方法はないでしょうか。教えていただけると助かります。
以下のように、メモ帳上では、文字化けしてしまいます。
インターネットエクスプローラー上では、見ることができますが、編集ができません。

<html>
<head><!--オ-->

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=euc-jp">
<title>Dubai 2018
</title>
</head>

<body bgcolor="#FFF0F5">
<BODY style="border-style:ridge;
border-width:30px;
border-color:#FA8072">
<center>
<table width="650" border="0" cellspacing="0" cellpadding="0">
<tr> 
<td colspan="3"><img src="http://pic.geocities.jp/images/qp/07/title.gif" alt="Welcome to my homepage" width="650" height="124"></td><br>
</tr>
<tr align="center"> 
<td colspan="3"><b><font color="#FF8C00" size="5">・ノ・ミ・、、ホホケ。ハ・「・鬣ヨシケケ「ヒョ)2018
</font>  <img src="2.jpg"width="150" height="90"  border="0">
<img src="tower.jpg"width="80" height="150"  border="0">
</b><br>

<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><font color="#1C2410" size="2">
<iframe width="330" height="250" src="https://www.youtube.com/feature=player_detailpage" frameborder="0" allowfullscreen></iframe><br><br>
<MARQUEE scrollamount="4" >
<IMG src="irukauki.gif" width="80" height="60" border="0">
</MARQUEE>
</font></td>
</tr>
</table>

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><font color="#1C2410" size="2">
</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><div style="position: relative;">
   <img src="http://pic.geocities.jp/images/qp/07/side_dl.gif" width="230" height="124"><br>
   <div style="position: absolute; top:40px; left:220px; width: 250px;">
<b><font color="#FF8C00" size="4">
      セ螟ホニーイ隍レ、キ、ヌ、ヘ。」</font></b>
<br>
<a href="http://　　　/">
      HOME、リ、筅ノ、・
</a> 

   </div>
<td align="center">
   <img src="http://pic.geocities.jp/images/clear.gif" width="190" height="1"></td>
   </div>
</div>
<img src="http://pic.geocities.jp/images/clear.gif" width="190" height="1"></td>
<td><img src="http://pic.geocities.jp/images/qp/07/side_dr.gif" width="230" height="124"></td>
</tr>
</table>
</center><div align="center"><b><font color="#FF8C00" size="5"> Dubai(UAE)
</font>  <img src="hanaa8a.gif" border="0">。。テマソ゛
</b></div>
<div align="center"><DIV style="position: relative; left : 0px"><img src="604.gif" border="0"width="320" height="240" ><DIV style="position:absolute; top : 68px ; left : 240px ; ">
     <IMG src="small_dot.png" width="20" height="20" border="0">
     </DIV
<title>・・ッスク</title>
<body>
<h1><img src="hataUAE.gif" border="0" width="70" height="50">&nbsp; &nbsp;
<font size="4" color="#3300cc"font style="background-color:#ffff00;">
<a href="http://dlift.jp/countryinfo/country33"target="_blank">・「・鬣ヨシケケ「ヒョセ・/h1></font>
<a href="http://dlift.jp/countryinfo/country33" title=・「・鬣ヨ、ホ、ウ、ネ、筅テ、ネテホ、熙ソ、ッ、「、熙゛、サ、ォ。ゥ">
<font size="3" color="#3300cc">。ハUAE、ホエムクケケヤセ・- ・ル・ケ・ネ・キ。シ・コ・ヲタ、ウヲー莉コー・ヲテマソ゛、ハ、ノ。ヒ</font>
    </a>
</body>
</html>

教えていただけると、大変有り難いです。どうぞ宜しくお願いします。
馬場誠 さん　2019年09月26日17時57分
Mihokoさん、はじめまして＆大変申し訳ありません。
コメントを見落としていました。

ご覧になる可能性は低いと思いますが、一応ご返信まで。

結論としては、メモ帳はEUCを扱えないので、他のエディタ（Terapadなど）をお使いになるのが一番です。

メモ帳は本当におまけのようなソフトなので、他のエディタをインストールするメリットは大きいです。
しんじゆみこ さん　2023年11月29日16時45分
突然ホームページが文字化けして困っておりました！
こちら様の指示に従ってShift_JISの部分をUTFという風に変更しましたら、
無事、日本語で表示されました。

大変助かりました。
ありがとうございました！
Web制作Tips
デザイン
├フリーの写真素材を有効活用しよう
├デザイナーならこだわりたいカーニング（文字詰め）
├文字のジャンプ率で適切なサイトイメージを演出する
├TPOを考えてハズさないフォントを選ぶ
└失敗しない配色の基本
ユーザビリティ
├そのフォントサイズ、適切ですか？
├リンクテキストをわかりやすくする
├フォームのリセットボタンを考える
├リンク切れ時に適切な404ページを表示をする
└フォームの確定ボタンは右?左?
コーディング
├文法チェッカーで正しい(X)HTML/CSSを書こう
├インデントで読みやすいソースコードを
├文字化けを防ぐ&解消する方法
└背景画像ありのボックスの文字をはみ出させない方法
その他
├ディレクトリ構造は適切に
└絶対パス?相対パス?ファイルの指定方法いろいろ