【プログラミング初心者】HTMLが文字化けしたときの対処法

htmlの文字化け 対処法はカンタン!

文字化けって地味に困りますよね。。。でも、すぐに直せたよ(/・ω・)/

メダカ皇帝
こんにちは!メダカ皇帝@medakakoutei )です!ブログの毎日更新を400日達成!当ブログはリンクフリーです!

プログラミング学習をしていて、たとえばこんなことありませんか?

htmlの文字化け 対処法はカンタン!

文字化け・・・。

htmlの文字化け 対処法はカンタン!

文字化け・・・。

でも、これは初心者にありがちなことであって、カンタンに直せます!

meta charset のタグ指定が無いか間違ってる

htmlの文字化け 対処法はカンタン!

先ほどの文字化けが起きたファイルはHTMLで、下記のような記述となっています。

<form action="checkbox2.php" method="get">
    <input type="checkbox" name="men[]" value="うどん">うどん<br>
    <input type="checkbox" name="men[]" value="そば">そば<br>
    <input type="checkbox" name="men[]" value="ラーメン">ラーメン<br>
    <input type="checkbox" name="men[]" value="パスタ">パスタ<br>
    <input type="submit" value="注文する!">
</form>

でも、これだと文字化けする可能性が高いです。

文字化けを回避するには、meta charsetを指定しましょう!

やりかたはカンタン。下記の一行を追加するだけです。

<meta charset="UTF-8">

つまり、こうすればOK!

<meta charset="UTF-8">
<form action="checkbox2.php" method="get">
    <input type="checkbox" name="men[]" value="うどん">うどん<br>
    <input type="checkbox" name="men[]" value="そば">そば<br>
    <input type="checkbox" name="men[]" value="ラーメン">ラーメン<br>
    <input type="checkbox" name="men[]" value="パスタ">パスタ<br>
    <input type="submit" value="注文する!">
</form>

はい、これで文字化けを回避できました!

htmlの文字化け 対処法はカンタン!

文字化けの回避方法は下記の方々に教えていただきました!ありがとうございました!

HTMLには文字化け対策が必要です!

htmlの文字化け 対処法はカンタン!

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

ですから、きちんと文字コードを宣言しておく必要があるんですね。

文字化け対策のより詳しい情報は下記より確認してください。

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

プログラミング学習には難しいことがいっぱいありますね。

でも、解決策がわかればカンタンに修正できることもあります。

プログラミング学習が不安な方や独学が難しい方は、プログラミングスクールの無料体験などいかがでしょうか?



【無料体験】プログラミングスクールのTechAcademy 詳しくはコチラ

まとめ 【プログラミング初心者】HTMLが文字化けしたときの対処法

htmlの文字化け 対処法はカンタン!

というわけで、HTMLが文字化けする原因は文字コードの宣言がなかったからでした。プログラミング経験者なら当たり前のようなことでも、プログラミング初心者だと何がなんだかわからずに焦ってしまいますよね。

解決方法としては、meta charset のタグ指定が無いか間違ってることが考えられます。

下記の一行を追加してみましょう。

<meta charset="UTF-8">

挿入場所は<head>~</head>の中か、学習用のコードで<head>~</head>が無い場合は、一番上の行に追加してみましょう!

以上、【プログラミング初心者】HTMLが文字化けしたときの対処法でした!



最後まで記事をお読みいただき、ありがとうございました!

リンクフリーなので、記事はお気軽にシェアして下さい(/・ω・)/


よろしければ以下のコメント欄に感想などお寄せくださいm(__)m
今後のブログ運営の参考にさせていただきます!









-プログラミング

Copyright© メダカ皇帝のブログ【毎日更新中】 , 2020 All Rights Reserved.