HTMLを学ぶ。文字化けを回避する方法。

HTMLを学ぶ。文字化けを回避する方法。

いざウェブサイトを作成したのに、文字化けしてうまく表示されない経験をされた方は多いのではないでしょうか。
今回はこの文字化けを回避する方法を解説していきます。

なぜ文字化けはおきるのか

ブラウザには文字コードで文字を認識する機能が備わっています。
例えば”1”に”あ”と設定されているブラウザと”1”に”か”と設定されているブラウザがあったとします。
自分のPC環境では”あ”と表示されたので、そのままウェブサイトを作成していったとします。しかしあるユーザーのブラウザでは”か”と表示される設定となっていた場合に文字化けが発生してしまうのです。
かなり強引な表現でしたが、簡単に解説するとそのような現象であると認識して下さい。
そこでHTMLでは「文字コード」を指定して「文字エンコーディング」という作業をする必要があるのです。
このHTMLソースは、この文字コードで表示して下さい。」とブラウザに指示するということです。

文字コードの種類について

代表的な文字コードとして以下の2つが挙げられます。
その他にも多くの文字コードは存在しているので、文字コードの指定がいかに必要なのかが分かると思います。

  • UTF-8
  • Shit-JIS

meta要素で文字コードを指定する

以前解説したHTMLソースから確認していきましょう。
以前の解説をご覧になっていない方は、以下のリンクを参照下さい。

HTMLを学ぶ。DOCTYPE宣言をしてみる。

<!DOCTYPE HTML>
<html lang=”ja”>
 <head>
  <title>タイトル</title>
 </head>
 <body>
  本文
 </body>
</html>

このHTMLソースに文字コードを指定するコードを記述すると、以下の通りとなります。

<!DOCTYPE HTML>
<html lang=”ja”>
 <head>
  <meta charset=”UTF-8″>
  <title>タイトル</title>
 </head>
 <body>
  本文
 </body>
</html>

meta(メタ)要素を使ってcharset(キャラセット)はUTF-8であると指定しました。
どうでしょうか。簡単ですよね。
またmeta(メタ)要素を記述するには、いくつかのルールがあるので紹介しておきます。

meta要素を記述するときのルール

head要素内に記述する。またtitel要素の上に記述することが良いとされています。
これはtitleにも日本語が使用されているケースが多いため、これらも含め文字コードを指定するために、良しとされる理由となっています。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

HTMLカテゴリの最新記事