はじめに
ソースコードなどのテキストファイルを他のエンコードタイプでブラウザ表示させると文字化けしてしまいます。
HTMLで文字エンコーディングを指定し、文字化けを直す方法を説明していきます。
目次
1.文字エンコードって何？
2.エンコードタイプとは、コードと文字の対応表
3.HTMLでエンコードタイプを指定する
4.エンコーディングを変換する
1.文字エンコードって何？
一言でいうと、「文字データを数値へ変換させること」です。
コンピューターはデータを「数値」でしか理解できません。そのため、「文字」を扱う場合には、「数値」に変換して処理を行います。この変換のことを文字エンコードと言います。
2.エンコードタイプとは、数値と文字の対応表
コンピューターに「文字」を理解させるためには、「数字」と「文字」の対応表が必要です。
この対応表にはいくつかの種類があって、OSの種類によって、扱う対応表も異なります。例えば、WindowsはShift_JIS、UNIXやMacはUTF-８など異なった対応表でテキストを扱います。
この対応表のことをエンコードタイプといい、アルファベットはどの種類のエンコードタイプでも同じ数値データが割り当てられています。なので、英語で書かれたテキストファイルはそれを作成したコンピューターと違うコンピューターで表示しても文字化けはしません。
ところが、ひらがなや漢字などはエンコードタイプによって、割り当てられている数値データが異なります。
そうするとWindowsでテキストファイルを作って、Macでそれを表示すると文字化けが発生して読めません。
どのOSも全てのエンコードタイプを扱えるようにはなっていますが、デフォルトで扱うエンコードタイプが異なるため文字化けが発生してしまいます。
3.HTMLでエンコードタイプを指定する
まず表示するページで使われるエンコードタイプをHTMLファイルに指定しなければいけません。もし指定しないと、コンテンツ内の文字が誤って解釈されてしまいます。
そのためには、ソースコードが書かれたHTMLファイル内のmeta要素でcharset属性を使います。
また、文字化けしてしまうことを想定しているため、言語は日本語としています（lang="ja"）。
UTF-8で表示させたい場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
・・・
Shift_JISで表示させたい場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
・・・
このcharset属性はHTML5から追加された属性の為、HTML5より前のバージョンのHTMLでは下記の方法で記述します。
HTML5より前の文字コードの指定方法
<meta http-equiv="content-type" content="text/html; charset=文字コード">
HTML5より前のバージョンでShift_JISで表示させたい場合
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
4.エンコーディングを変換する
HTMLファイルを表示するにはエディタを使います。
現在ではテキストのエンコードタイプを自動で判別して表示してくれるものが多いですが、自動で判別してくれないときはエンコードタイプを設定から自分で切り替える必要があります。
今回はVScodeを用いてShift_JISでの表示を行っていきます。
VSCodeのデフォルトのエンコードタイプはUTF-８になっています。そのため、Shift_JISで作成したテキストファイルを表示すると文字化けしてしまいます。
VSCodeにはデフォルトでエンコードタイプを変換する機能が備わっているため、変換に拡張機能はいりません。
VSCode画面下に表示されているエンコードタイプ（デフォルトはUTF-8）をクリック
↓
表示されたメニューの「エンコード付きで再度開く」を選択
↓
「Japanese (Shift JIS)」を選択
↓
文字化けがなくなりShift_JISで表示される