文字コード指定したHTMLファイルが、ブラウザで文字化けした件について

3160 ワード
UTF-8 HTML 文字コード 文字化け Shift_JIS HTML テキストリンク

はじめに

こんにちは。
先日、文字コードをShift-JISで指定したHTMLファイルをブラウザで開いたところ、文字化けを起こしてしまいました。ここではその失敗談と解決策を書き留めます。

HTMLで文字コードを指定する方法

HTMLで文字コードを指定する方法は簡単。HTMLファイルのhead開始タグのあとに、文字コードを指定するための一文を書き加えます。たとえばutf-8で指定するならこのように、

<meta charset = "utf-8">

meta要素でcharset属性を使用することで、文字コードを指定できます。
実際に以下のHTMLファイル("makuranosousi.html")をブラウザで開いてみます。

makuranosousi.html
<!DOCTYPE html>
<html lang = "ja">
    <head>
        <meta charset = "utf-8">
        <title>枕草子</title>
    </head>
    <body>
        <p>春はあけぼの。やうやう白くなりゆく、山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。</p>
        <p>夏は...</p>
    </body>
</html>

ブラウザで開くと、

しっかりと文字が表示されていることが確認できます。

文字化けの発生

つづいて、先程文字コードをutf-8で指定していたところを、Shift-JISに変えてブラウザで開いてみます。

<meta charset = "Shift-JIS">

これをブラウザで開いてみたところ、

見事に文字化けが発生してしまいました。
なぜShift-JISで文字コードをしっかりと指定したのに、文字化けしてしまったのでしょうか。

原因と解決策

この文字化けの原因は、
ファイルを保存する際に使用した文字コードと、ブラウザがファイルを読み込むために指定した文字コードが異なっていたことにありました。

私がmakuranosousi.htmlのファイルをutf-8で保存してしまっていたので、ブラウザで開くと文字化けが起きたというわけです。

これを解決するためには、
makuranosousi.htmlのファイルを文字コードShift-JISを使用して保存します。ファイル保存に使用する文字コードは、テキストエディタの設定から変更することができます。

ちなみにVScodeやAtomではファイルを開いた際に、右下のバーに使用している文字コードが表示されるので、そこをクリックして変更することができます。

お使いのテキストエディタの機能で確認してみてください。エディタでShift-JISに変更して保存したあと、再度ブラウザで読み込んでみると文字化けが解消されたことが確認できるはずです。

最近の文字コードではutf-8が主流なので、基本的にutf-8を選択しておくことをおすすめします。みなさんもファイルを保存する際の文字コードには気をつけましょう。

「HTMLファイルを保存する際に使用する文字コード」と、
「HTMLファイル内で指定する文字コード」
を一致させる。