今回はHTMLで文字化けを直す方法を説明していきます。
文字化け対策自体は、非常に簡単ですが知らないと対処に困ってしまうと思うので、ぜひ覚えておきましょう。
HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
目次
文字化けさせない書き方
HTMLファイルを書いてブラウザで確認してみたら画像のように文字化けされてしまったなんてことはないでしょうか。
文字化けの対処は簡単ですが、知らないと分からないのでぜひ忘れずに書いておきましょう。
書き方ですが、<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で表示するように指定で良いですか？
その通り！そうすると文字化けは起こらないよ。
やったー！
実際に書いてみよう
実際に書いてみて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デザインオンラインブートキャンプを開催しています。
大谷翔平・野球ニュース