ふむふむ…HTMLファイルをブラウザで表示したときにバグってしまうのはエンコードがUTF-8じゃないからなのか…なるほど。
あれ〜、でも<meta charset=”UTF-8″>と書いてもやっぱりバグってしまうのはなぜ〜(涙)
このようなトラブルに遭遇したときの解決策をご紹介します＾＾
エンコードをUTF-8にちゃんと変更できていない可能性
htmlファイルがバグる問題に見舞われるのは初学者が経験しがちな「あるある問題」です。
なので今のあなたが同じような経験をしていたとしても当然ですし、あっという間に解決できますので、まずはご安心ください＾＾
デビューしたばかりの段階ですと、おそらく.txt（テキスト）ファイルを作ってそれを.txtの拡張子から.htmlに変更し、コードを書いた後、ブラウザにドラッグ&ドロップする流れでチャレンジしてみたかもしれませんね。
いずれにしても、ブラウザで開いたとたん、バグった文字が表示されたので…？？状態になってしまった、というわけですね。
わかります、わかりますよ〜 ！僕自身もそういう経験をしてきましたので＾＾
これは冒頭でもお伝えしたとおり、エンコードと言われる文字コードが表示指定した型と一致しない場合に文字化けが起こるためです。
大抵の場合は、<head>〜</head>内に<meta charset=”UTF-8″>と書いて保存すれば直る問題ではあります。
ただし、<meta charset=”UTF-8″>と書いている状態でもバグってしまうことはありますので、その場合にどうするべきかをお伝えしますね＾＾
他のエディタを使って手順を変えると解決できる
実は、使用するエディタと手順を少し変更するだけで解決できます。
ご存知かと思いますが、エディタとはデータを編集するときに使うソフトです。
例えば、テキストファイルを編集するときに使うメモ帳などもエディタの一つですね。
では仮にメモ帳のエディタにHTMLコードを書いて.htmlと拡張子を変えてもブラウザでバグってしまった場合には、他のエディタを利用してみましょう。
オススメは、サクラエディタなどの類です。
そして、以下の手順でもう一度試してみてください。
↓
.html拡張子に変える
↓
サクラエディタでそれを開く
↓
コードを書く
↓
保存する際に文字コードをUTF-8に変える
↓
ファイルを開きブラウザで確認
いかがでしょうか？
このような順序でやると問題なく綺麗に表示されると思います。(※ サクラエディタを開いた直後にエンコードの変更を求められた場合にはその時点でUTF-8に調整してもOK。)
或いは、Visual Stuidio Codeのエディタだったら、直接htmlファイルを作り、そこにコードを書いてUTF-8を指定すれば、サクラエディタのように文字コードの変更手順を介さなくてもバグらずに済みます。
こんな感じですね。
このトラブルを解決する点で厄介なのは、ちょっと手順を間違うとたとえUTF-8と書いていたとしても、文字コードがSJIS扱いになってしまう傾向がある点です。
なので、上記で紹介したエディタ類と手順にしたがってやってみると、成功する確率は格段に上がるのでオススメです＾＾
いずれにしても、ポイントは2点だけ。
- <meta charset=”UTF-8″>の記述を忘れない
- サクラエディタやVisual Stuidio Codeなど他のエディタを使う
ちなみに、上記のアドバイスはWindowsパソコンユーザー向けに書きましたが、MACユーザーの場合でしたら、テキストエディットを使えば簡単にhtmlファイルをブラウザに表示できますよ。
もし万が一、以上の方法でもバグり問題が解決できなかった場合には、遠慮なくお問い合わせからご連絡ください。
一緒に解決しながらプログラミングをマスターしていきましょう＾＾
<meta charset=”UTF-8″>の記述を忘れない