htmlの文字化け

はじめに

先生!日本語表示させようとしたら文字化けしました!
日本語の文字化けは、厄介ですね。headの中身はどのように設定しているのですか?
titleタグだけ入れています。
それだけでは確かに日本語は文字化けしてしまいますね。
metaタグというものを知っていますか?
metaタグですか・・・
知らないですね。
htmlを書いていく上で見た目には見えないですが、大事なことをやってくれるタグなんですよ。
文字化けはそのmetaタグと言われる設定の中でも文字コードに関するものを設定することで解決しますよ。
そうなんですか!
ぜひ教えてください。
では、文字化けするものと文字化けしないコードを比較していきましょうか。

HTML基礎(文字化け編)

htmlでは、日本語を入力した際、次の画像のように入力した日本語が文字化けしてしまうことがあります。

上記の結果になるコードは次のようなコードになっています。

<!DOCTYPE html>
 <head>
  <title>html文字化け編</title>
 </head>
 <body>
   <h2>文字化け</h2>
   <p>この文字は文字化けします。</p>
 </body>
</html>

上記のコードでも、ブラウザが文字コードを自動で認識して文字化けしない場合があります。しかし、今回のサンプルでは、文字化けしてしてしまっているため、この問題を解決するためにmetaタグと呼ばれるもので文字コードを指定してあげる必要があります。

文字コードを指定するコード次のようなものがあります。

  • <meta charset="UTF-8">
  • <meta charset="shift_jis">
  • <meta charset="euc-jp">

文字コードをしっかり指定してあげることでブラウザがどの文字コードで読み込めばいいのかが理解できるようになるので、上記のmetaタグをコードに入れてあげましょう。meta charsetは1つしか指定することができません。今回は、UTF-8で保存してありますので、UTF-8を指定します。

meta charsetを追加したコードは次のようなものになります。

<html>
 <head>
  <meta charset="UTF-8">
  <title>html文字化け編</title>
 </head>
 <body>
   <h2>文字化け</h2>
   <p>この文字は文字化けします。</p>
 </body>
</html>

上記のようにheadタグの下に入れてあげることで文字化けを回避することができます。

サンプル(文字化け回避)

metaタグのcharsetをコードに1行入れることで、無事文字化けを回避することができました。ご自身がお使いのエディタでどの文字コードで保存したのか、また文字コードを指定しているのかということを今一度確認して文字化けの問題解決に挑んでください。

関連記事

  1. videoタグを使って動画を埋め込んでみよう

  2. HTMLでラジオボタン を作ってみよう

  3. HTML箇条書きを書く

  4. cssを読み込む

  5. HTMLで画像表示してみよう

  6. HTMLでテーブルを作ろう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930