今すぐ対策できる!HTMLで文字化けを直す方法【初心者向け】

初心者向けにHTMLで文字化けを直す方法について解説しています。書き方は難しくなく、誰でも簡単に対処することができますが、知らないと表示を見た時に焦ってしまうので、今のうちに理解しておくと良いでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

今回はHTMLで文字化けを直す方法を説明していきます。

文字化け対策自体は、非常に簡単ですが知らないと対処に困ってしまうと思うので、ぜひ覚えておきましょう。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

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

 

目次

 

文字化けさせない書き方

HTMLファイルを書いてブラウザで確認してみたら画像のように文字化けされてしまったなんてことはないでしょうか。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-30-11-44-08

文字化けの対処は簡単ですが、知らないと分からないのでぜひ忘れずに書いておきましょう。

書き方ですが、<meta>要素に記述します。

<meta http-equiv="content-type" charset="utf-8">

上記の「utf-8」の部分が文字コードになります。この記述がブラウザ一致しない時に文字化けという現象が起きます。

例えば「utf-8」で書いているのに、ブラウザが「Shift-JIS」だと判断したときに文字化けが起こるのです。

「ドイツ語」の文章を「フランス語」として読むと読めなくなりますよね。

そのために、上記の記述を行うと、ブラウザが「utf-8」だと解釈してWebページを表示するために、文字化けが起きなくなります。

 

大石ゆかり

文字コードを指定してあげれば、文字化けは起こらないってことですか?

田島悠介

作成したファイルの文字コードと、表示に指定した文字コードが一致していれば文字化けは起こらないよ。

大石ゆかり

utf-8で作成した場合、utf-8で表示するように指定、Shift_JISの場合は、同じようにShift_JISで表示するように指定で良いですか?

田島悠介

その通り!そうすると文字化けは起こらないよ。

大石ゆかり

やったー!

 

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

実際に書いてみよう

実際に書いてみてWebブラウザで確認してみましょう。

HTML

<!DOCTYPE html>
<html>
<head>
 <title>sample</title>
 <meta http-equiv="content-type" charset="utf-8">
</head>
<body>
 <p>こんにちは</p>
</boby>
</html>

文字化けを対策しているので、文字化けが起こりません。

Webブラウザーで見たとことでわからないのが当たり前なんですが、このようなわからないところにも多くの工夫と、対策が必要になります。

どんな人がHPを閲覧しに来たとしても、自分の意図した形で情報を伝えることは大切なことです。このような見えないところへの配慮にも気を付けて行っていきましょう。
 

大石ゆかり

上の方でutf-8とShift_JISの文字コードがありましたが、どちらを使用した方がいいとかあるんですか?

田島悠介

Webページでは、utf-8が標準になってるよ。

大石ゆかり

じゃあ、utf-8で統一しちゃおっかな♪

田島悠介

いいね!

 

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