【HTML基礎学習4】文字コードとは?文字化けが起こる原因とは?

htmlアイキャッチ HTML

こんにちは、かつコーチです。

僕は現在、プログラミングを学習していて、その学習の中で理解したことを、

毎回テーマを絞ってリアルタイムで発信しています。

今回は、HTMLの4回目です。

プログラミングを学習していて、最初に文字コードって出て来ますね。

なんとこれにもいろいろ種類があるようです。

かつコーチ
かつコーチ

もう1つにまとめてくれ!

と言いたくなりますね。。。

また、たまに文字化けしているサイトなんかを見かけますね。

中国語みたいになってたりするやつです。

あれってなぜ起こるのか。。。

今回は、プログラミングにおける、「文字コードと文字化け対策」についてご紹介します。

文字コードとは?

基本的にコンピューターは、「0」と「1」の2つの数字、つまり二進数でしか解釈できません。

16進数や10進数で表すこともできますが、それらも全て数字です。

つまり、人間の言葉である「あ」とか「A」とかをそのまま解釈できないので、

文字1つ1つをそれぞれ固有の数値(コード)で管理しています。

例えば、「あ=3041番ね!」、「A=0041番ね!」という感じです。

この固有の数値を「文字コード」と言います。

そして、それを一覧にしたものを「文字エンコーディング」と言います。

    文字化けの原因

    プログラミングだけでなく、インターネット上でも文字化けを見ることがあります。

    それが起こる原因はなんなのか?

    プログラミングにおいて、文字化けが起こるのは、ファイル自身の文字コードと、

    それを表示するブラウザの文字コードが違うからです。

    それもそのはずです。

    例えば、HTMLを書いているときに、「A」という決まりで書いた文書があって、

    それを表示させるブラウザが「B」という決まりだと、相違が起こるのは当然です。

    例えば、以下のように番号が違うということです。

    HTMLファイル自身の文字コードは、作成したテキストエディタの文字コードです。

    ブラウザの文字コードは、使っているユーザーが直接変更した場合を除いて、

    HTMLのタグで指定した文字コードになります。

    だから、テキストエディタでHTMLを作成したときの文字コードを、

    HTMLのタグで指定すれば文字化けは発生しません。

    日本では以下の3つがよく使われている文字コードですが、

    • 「UTF-8」
    • 「SHIFT_JIS」
    • 「EUC-JP」

    HTMLでは「UTF-8」で統一されつつあり、こちらを使用することが推奨されています。

    文字コードの指定方法

    最後に、文字コードの指定方法についても解説します。

    HTMLでは、headタグの中に、meta(<meta>)要素を使って以下のように指定します。

    <meta charset="UTF-8">

    meta要素は、ページに関する情報を表していて、

    このページは「この文字コード」で書きますと表してあげるということです。

    設定したい情報の種類を属性名で指定し、その内容を属性値に記述します。

    ここでは、charset属性(charset=character Setの略)を使って、

    属性値に「UTF-8」という文字コードを指定します。

    尚、meta要素は終了タグ(</>)が必要ないです。

    ここからここまでという指定がないためです。

    この終了タグ(</>)が必要ないものを「空要素」と言います。

    一般的に「UTF-8」で良いのですが、古い形式のファイルだと違う場合があります。

    XHTMLやHTML4.01などは指定方法が異なります。

    例えば、XHTMLの場合は、開始タグ(<>)の最後に、

    半角スペース+スラッシュ(< />)が必要になります。

    古いものには例外があることを知っておくと良いでしょう。

    まとめ

    以上、今回は、文字コードと文字化けについてご紹介しました。

    文字コードと文字化けについては、

    • とりあえず「UTF-8」と書こう!
    • でも、古いやつは書き方がちょっと違うあるから気をつけてね!

    ってことですね(笑)。

    プログラミングに関するいろんな本やサイトを見ていると、どうしても専門用語が多くなってしまいます。

    それをどうにかわかりやすくできないかと考えています。

    プログラミング学習の際の参考になれば幸いです。

    学習の参考になるサイト

    今やプログラミングの学習はネットで学ぶことができます。

    僕もここから始めています。

    ネット上にはたくさんの学習サイトがありますが、おすすめとしては、

    この2つが圧倒的にわかりやすく、どちらも無料で学べるので、超便利です!

    無料範囲から始めて、もっと気になったり、もっと勉強したいと思ったら、

    有料プランへ変更すれば良いと思います。

    有料プランはどちらも月額980円(税込)です。

    まだ、プログラミングをやったことがない人も、いきなり書籍から入って失敗するよりは、

    こちらからやってみることをおすすめします。

    初心者へおすすめの入門書籍(※2020年5月13日追記)

    ある程度、動画で学んだら、もっとしっかり学びたくなるもの。

    そう思ったら、書籍を利用してもっと理解を深めるのも良いでしょう。

    僕のおすすめの書籍は、以下の2冊めちゃくちゃわかりやすいです。

    それぞれご紹介します。

    1冊ですべて身につくHTML & CSSとWebデザイン入門講座

     

    まずは、今や鉄板のプログラミングの1冊目の本です。

    知識ゼロから体系的に学べる本で、最近のWebサイトの作り方も学べて、

    最後には1つのサイトを構築するまで網羅しています。

    僕は後になって購入しました。

    学習していて迷っている時、書籍でも勉強してみるかと思い手に取ると、

    「もっと早く手にしておけば良かった。」そう思わせてくれた本です。

    難しい内容がなく、3日くらいで一気に読んでしまいました。

    勿論、コードを打ちながらですが、楽しくてすぐに終わりました(笑)。

    その後も3周くらいして、一通り基礎を学べた本です。

    プログラミング学習者で初心者の方には絶対におすすめします!

    世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書

     

    2冊目のこちらは、もう少し詳細まで書かれてあり、ステップアップされたい方に向いています。

    とは言っても、初心者向けですので、無理なく読めます。

    知識なくとも十分に学べますが、やはり楽しいという感覚が大切だと思うので、

    動画などで勉強した後に、もっと詳しく勉強する際には、この本がおすすめです。

    こちらも最後には1つのサイトを作成するまでを学べます。

    タイトルとURLをコピーしました