サイタ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)

前の記事

次の記事

目的・種類別にホームページ作成・作り方講座を探す

新着記事

今日はCMSに関して書いていきます。 一般的に、ブログの更新の様に、HTMLタグを知らなくても、 ホームページを更新していく事が出来る仕組みを、CMS(コンテンツマネジメントシステム)と呼びます。 企業が独自で開発したもの、有料の物、無料の物、色々あります。 現状一番人気で、世界的...

今日は、CSSの子孫セレクタと複数セレクタに関してです。 特に子孫セレクタは、HTMLのツリー構造をしっかり理解していないと、 使いこなす事が出来ないので、しっかり練習しましょう。 ■-□-■-□-■-□-■-□-■-□-■ HTMLのツリー構造とは? ■-□-■-□-■-□...

今日は、よく使うCSSのセレクタに関してです。 CSS3の登場で、非常に多くの、有用なセレクタが出てきて、とっても便利になりました。 とはいえ、一気に覚えるのは大変なので、まずは基本的な物を覚えていきましょう。 基本的なセレクト方法だけでも、工夫する事で大体のホームページは作れます。 ...

今日は、CSSの文法に関してです。 ルールをきちんと覚えてしまえば、さほど難しく無いので、是非覚えましょう ■-□-■-□-■-□-■-□-■-□-■ 「何に」、「何を」、「どうするか」 ■-□-■-□-■-□-■-□-■-□-■ CSSは、無理矢理日本語に翻訳するなら、 ...

今日は、HTMLの初心者が一番最初につまずきやすい、パスに関して書いていきます。パスにも、いくつかの種類がありますが、今回は、基本となる相対パスに関して書いていきます。 HTMLで画像等の外部ファイルを読み込むときは、「パス」という考え方をしていきます。 この「パス」の考え方は、HTM...

レッスン無料相談窓口のご案内

サイタでは、ホームページ作成レッスンに関する疑問に
専門カウンセラーがお電話にてご案内しております。
お気軽にご利用ください。

お電話相談窓口はコチラ

ブログ記事 ページ先頭へ