はじめてのHTML② 文字化けしないための文字コード指定 UTF-8とSHIFT_JIS

以下のhtmlコードをブラウザで表示したところ、「こんにちは」という日本語が正しく表示されなかった。画像参照。charsetをUTF-8とした場合は正しく表示された。

 

<!DOCTYPE html>

<html>

<head>

<meta charset="shift_jis">

<title>test</title>

</head>

<div align="center">こんにちは</div>

<div align="left">こんにちは</div>

<div align="right">こんにちは</div>

</body>

</html>

 

f:id:crude503:20180218152438p:plain

 

調べると、htmlファイルを保存する際の指定文字コードとhtmlでの宣言文字コードが一致していないと文字化けが起きるらしい。

使用エディターはmi。上部バーのテキストエンコーディング欄で文字コードが選べる。指定コードがUTF-8になっていたのでshift_jisを選び保存し直して再びブラウザで表示したところ、以下のように正しく表示された。

 

 

f:id:crude503:20180218153055p:plain

 

 

そもそも文字コードは、人間が読める文字を1文字ずつそれぞれ10進数や16進数などの数字に置き換える際の方式らしい。

同じ ”あ” でもコードごとに割り当てられている数字が違うので保存時の文字コードとブラウザで読み込む時の文字コードが異なれば全く別の文字として認識されてしまうということだろう。

ちなみに、shif_jisは1文字ごとのバイト数は少ないがカバーしている言語の範囲が少なく、UTF-8は容量は大きいがあらゆる言語をカバーしていて文字化けする可能性が低いらしい。なのでUTF-8を選択することが望ましい...?