日本語で作成したページがブラウザで確認するとよく分からない文字に変わっているなどの経験ないでしょうか?HTMLを始めたばかりの方が遭遇してしまうと、パソコンがおかしくなったのでは?と思ってしまうかもしれませんが、お使いのパソコンは正常です。私はパソコンを再起動した経験があります。(笑)
これを正しい日本語が表示されるようにするのはとても簡単で、HTMLにたった1行追加するだけで直ります。
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる


Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!



初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード


メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)


目次
文字化けの直し方
文字化けが起きた際は、下記のコードをHTMLの<head>タグ内に追加してください。
<meta charset="UTF-8">
コードの解説
- meta:Webページの情報をWebブラウザや検索エンジンに伝えるためのタグ
- charset:文字コードを指定する属性
これでブラウザが正しく日本語を表示してくれます。
これでも問題解決しない場合は、下記の記事をご参考ください。
あわせて読みたい




HTMLでUTF-8を指定しているのに文字化けが起きた時の原因と対処法
HTMLで文字化けが起きた際に解決する一般的な方法は、<head>タグ内に<meta charset=”UTF-8″>を追加します。8割程度この方法で解決するのですが、中にはそれ…