全国5万人が受講している「サイタ」

ホームページ作成・作り方講座

ホームページ作成・作り方講座を選ぶ

初回60分無料体験OK

まずは60分の体験レッスンからスタート。
無料で実際のレッスンを体感できます。

月々4,900円〜の低料金

先生ひとりじめの個人レッスンを、この価格でご提供。レッスンは全てプライベート形式の60分間です。

通わない月は0円

曜日と時間を選べるので、
無理なくマイペースに通えます。

詳しくはこちら

Web・デザインスクールホームページ作成講座東京 初心者歓迎ホームページ作成講座 スクールブログ もう怖くない!...

もう怖くない!文字化けの原因と対策について

今日は、ホームページ制作時に起こりやすい問題の一つである、文字化けに関してです。

テキスト等を参考に、HTMLを書いていていると、何故か文字化けしてしって、上手くいかない事ってありますよね。
見た目がかなり崩れて見えるので、怖くなって挫折してしまう方もいらっしゃるかもしれません。

でも、文字化けの原因をしっかり理解すれば、それほど怖い問題でもありません。
その理由は、ファイルを保存した時の文字コードとファイルを開いた時の文字コードが違うからです。



???
つまりどういう事でしょう?

一つ一つ説明していきます。


■-□-■-□-■-□-■-□-■-□-■
文字コードに関して
■-□-■-□-■-□-■-□-■-□-■
まずは、文字コードの説明です。

いきなりですが、
「あ」
これは何でしょう?

「あ」という文字です。
人間の目には、「あ」という文字として認識されます。

ただ、パソコンは、「あ」という文字自体を認識している訳ではなく、
最終的には、「0」と「1」の羅列で記録されます。

その時の、「0」と「1」の羅列のルールを、文字コードと言います。

例えば、
文字コードAの場合
「あ」という文字は、
11000001000010
と記録する。

というルールです。

実は、この文字コードというのは、とても沢山の種類があります。
つまり、「あ」という文字を記録するときの「0」と「1」の羅列のルールが、
とても沢山あるという事です。

例えば「あ」という文字の場合
文字コードAでは、
11000001000010

文字コードBでは、
11001111001010

文字コードCでは、
11010111001011
.
.
.
こんな感じで、保存するときのルールが沢山あります。

この文字コードは、保存するときだけでは無く、
ファイルを開く時にも重要です。

開こうとしているファイルが、「文字コードA」のルールで保存されていた場合、
開くときも、「文字コードA」のルールで文字を表示しなければなりません。


■-□-■-□-■-□-■-□-■-□-■
これが、文字化けの正体!
■-□-■-□-■-□-■-□-■-□-■
もし、保存された時と、開くときの文字コードが違うと、文字化けが起こってしまいます。

保存したときは文字コードAで、「あ(11000001000010)」と保存したのに、
そのファイルを開く時に、文字コードBで開くと、別の文字になってしまいます。
文字コードBでは、「11000001000010」は、「あ」では無いからです。

この様に、文字化けは、保存したときと、ファイルを開く時の文字コードが一致しない時に起こります。
という事は、ちゃんと保存したときの文字コードで、ファイルを開きさえすれば、文字化けせずに、
きちんと表示されます。


■-□-■-□-■-□-■-□-■-□-■
ブラウザに、「この文字コードで開いて!」とお願いする
■-□-■-□-■-□-■-□-■-□-■
HTMLのhead領域に、HTMLを開く時の文字コードを指定する事が出来ます。
その表記方法は、HTMLのバージョンによって異なります。

XHTMLの場合
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

HTML5の場合
<meta charset="UTF-8">

上記の様な感じになります。
この場合、「UTF-8」という文字コードで開いて!!
という意味になります。
この「UTF-8」の部分に、ファイルを保存したときの文字コードを指定すれば、
文字化けしなくなります。


■-□-■-□-■-□-■-□-■-□-■
まとめ
■-□-■-□-■-□-■-□-■-□-■
文字化けとは、ファイルを保存するときと開くときの、文字コードの違いで起こります。
ファイルを開く時に、保存した時と同じ文字コードを指定すれば、文字化けは解消されます。
テキストエディターなど、HTMLを書く為のソフトの、保存時の文字コードの指定は、そのソフトの設定で変える事が出来る様になっている場合が殆どです。


■-□-■-□-■-□-■-□-■-□-■
今日の出来事
■-□-■-□-■-□-■-□-■-□-■
もうすっかり秋ですが、秋刀魚って食べましたか?
僕は昨日食べました☆
しかも、人生で初なのですが、秋刀魚をまるまる買ってきて、
はらわたを自分で取りました☆
自分には、上手く出来ないだろうなぁと思っていたのですが、
以外とちゃんとできました。
何事も、やってみるのは大事ですね♩

それでは、また^^


■-□-■-□-■-□-■-□-■-□-■
石川健太(イシカワケンタ)
無料体験はこちら

記事の一覧ページはこちら

こちらでも、webサイト制作に関しての情報を書いています。
webサイト作成方法の紹介ページ
■-□-■-□-■-□-■-□-■-□-■

 

(2014年9月18日(木) 20:35)

前の記事

次の記事

この記事を書いたコーチ

250名以上の生徒を指導!テキスト通りにいかないケースも論理的に説明

初心者歓迎ホームページ作成講座
石川健太 (ホームページ作成)

新宿・新大久保・高田馬場・目白・池袋・初台・幡ヶ谷・笹塚・明大前・下高井戸・桜上水・...

ブログ記事 ページ先頭へ