HTMLで文字エンコードを指定する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLで文字エンコードを指定する方法について解説しています。文字エンコードを行う理由、head内で指定する方法を説明します。サイトの設定の基本となる部分なので仕組みを理解しておきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLで文字エンコードを指定する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

文字エンコードを指定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

エンコードとは

ファイルなどを形式が異なる他のバイナリデータに変換することです。作業としては、コンピュータが読み取れるデータに変換することです。

HTML文書の場合は、単純にブラウザが読み取れるデータに変換することです。なお、近年のブラウザは、ファイルの保存形式までUTF-8に合わせなくても、HTMLのコードにてUTF-8に指定するだけで、文字化けについて、おおむね防止できます。

 

文字エンコードする理由

ファイルに保存されたデータの保存形式には、幾つか種類があります。米国の英数字列の表現だけだと、日本語(ひらがな、漢字など)や諸外国の文字や数字を表現できないため、データの保存形式が幾つも派生してしまいました。

現在では、UTF-8と呼ばれる国際的な保存形式が実現されていますので、特に理由がなければ、UTF-8にて保存するべきですが、過去には、特定の保存形式(EUC-JP)しか読み込めれない仕様になっていました。この専用の仕様によって、ブラウザにWebページを表示させた時に、文字化けすることが多々ありました。

文字化けが発生する主な原因としては、SHIFT-JISなどの形式にて保存されたデータがEUC-JP専用の読み取りに処理された結果が顕著でした。サンプルとして、文字化けした場合、下図の表示になります。

「文字化け」のテキストが「��絖����� 」のテキストになって表示されています。この現象を防止するために、htmlでは、文字コードを指定することができます。次項の「文字エンコードを指定してみよう」では、文字化けを防ぐための記述方法を紹介します。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

文字エンコードを指定してみよう

HTML文書では、headタグの内部にメタ情報として指定します。

<head>
  <meta charset="utf-8">
</head>

サンプルコードとして、HTML文書の基本は以下になります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    文字化けを防止します。
  </body>
</html>

実際に、「index.html」を作成してから、上記のコードをコピーアンドペーストにて移してから、確認してみましょう。

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。