[45-2] <meta charset=" ">の設定で文字コードを指定しよう

<meta>要素の「charset属性」を使って、<meta charset=" ">で「文字コード」を指定すれば、ブラウザが「自動判別」で文字コードを正しく表示してくれます。
これでビジタが 文字化けで悩まなくて済む。この指定、絶対必要ですよ。

*追加訂正(2012.09.04)
「文字化けで悩まなくて済む」などと書きましたが「機種依存文字」の存在を忘れてました!
「Shift-JIS」では、NEC機種依存文字、IBM拡張文字、Apple拡張文字などが存在するので、これらの機種依存文字を使うと、<meta charset=" ">の設定をしてても文字化けします。
インターネット上では機種依存文字を使わないのがマナー。要注意です。

ちなみに「文字化け(もじばけ)」、英語圏でも "Mojibake" で通用するらしいです。

使用する要素 <meta>
使用する属性 charset属性

「charset」は「character set」の略。
character(キャラクター)は、コンピュータ上で、文字(数字、記号も含む)のことです。

この「charset属性」は、HTML5から単独で使えるようになった属性です。

以前の指定は <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> などと、長々と書いていました。
HTML5で「charset属性」が単独で使えるようになったおかげで、めっちゃシンプルに指定できるようになりました。

「charset属性」は複数不可です。1つのHTMLに1回だけ使用。
HTMLの文字コードを指定するわけですから当然ですね。

<head>の中に、<title>より前に書こう

では使ってみましょう。めっちゃ簡単です。
このサンプルでは「UTF-8」を指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
</head>

<title>要素より前(上)に書いていますね。これ重要。
HTML文書をブラウザで表示する時の文字コードの指定ですから、<title>内の文字も当然対象です。
「本文は文字化けしてないのに、タイトルは化けてる〜」というトラブルは、<meta charset="">を書く位置の問題。 必ず<title>の上に書きましょう。

HTML5からは、文字エンコーディングはUTF-8が推奨されています

今の日本語環境の文字コードは、この2つが一般的です。
★Shift_JIS
★UTF-8(Unicode方式の1つ)

「Shift_JIS」は、マイクロソフトがメインになって1980年代はじめに作った方式で、かなり長い間、日本語標準文字コードになっていて、日本語環境では一般的でした。
比較的古い環境の人も対象にするサイトなら、間違いなくコレ、ってかんじです。

「UTF-8」は、90年代にできた新しい規格です。Unicodeという文字コードの中の1つです。
HTML5からは、文字エンコーディングに UTF-8を使用することが推奨されています。
なんといっても、世界中の人に、日本語サイトを文字化け無く表示するから。
(その人が漢字や仮名を読めるかどうかは別として。笑) 
逆に、アラビア語とか韓国語のサイトでも、こっちのブラウザに正しい文字で(文字化けせずに)表示します。(こっちが読めるかどうかは別として。笑!)
「UTF-8」は、Win、Mac、Linux、Unix、どんなOSでもOK。

日本語の文字コードで、他に、ISO-2022-JP(いわゆるJIS)もあります。これはもう古いかな。
日本語文字を7ビットで表示できるので、e-mailの始まりの頃には重宝したらしいですが、もう容量なんか気にしないからね。

また、EUC-JP というのもあります。AT&T社が Unix 上で日本語を使うために作ったとか。
(これには、韓国語や中国語などの文字コードもあるそうです。)今は日本でそんなにメジャーには使われていないようですね。

で、「文字コード」って何よ?

世界の人々が使う文字は、半角英数字や記号、日本語の漢字や仮名、アラビア文字や、ハングルやら、中国の漢字やら、いろ〜んな「セット」がありますね。
そのたくさんのセットの中で、1文字1文字に「コンピュータに分かる名前」がつけてあるんです。

で、複数のセットを一緒に(同時に)使うのが普通ですよね(「半角英数字のセット」と「漢字や仮名のセット」を一緒に使うとか)。なので、コンピュータが、複数のセットから正しく文字を引っ張って来れるようにする方式も制定されてます。

このように、文字をコンピュータに分かるようにセットにし、正しく表示するために制定された方式の総称を 「文字コード」って呼ぶようです。(詳細は次回「ちょっとメモ」で。)

その種類として、Shift_JIS 、UTF-8 があるんです。もちろんこれだけでなく、他に、
ASCII、JIS(ISO-2022-JP)、EUC-JP など、たくさんの文字コードがあります。

<meta charset=" ">でキチンと指定しておけば、ブラウザは「自動判別」で、指定したとおりの文字コードで表示してくれます。

ブラウザで、ユーザが文字コードを自由に選べるようになっています。

ブラウザでは「文字エンコーディング」または「エンコード」などという表現になっています。
(色々なサイトを、他の文字エンコードに変えてみて、文字化けさせてみて。もとのエンコードが分からなくなったら、サイトを再読み込みすればOK。)

エンコードとは「ある形式のデータを、ある方式で別の形式のデータに変換すること」を言い、デコードはその逆です。

実は、Shift_JIS や UTF-8 の「総称」がよくわからん…まいっか。

Shift_JIS や UTF-8 やらを、ブラウザに指定してあげる方法が、今日の記事のテーマなんですが、
実はこの、ふだん何気なく使ってた Shift_JIS 、UTF-8、ISO-2022-JP、EUC-JPなどの総称を
「そういや、何つんだっけ?」と気楽に調べはじめたら… 意外に奥が深かったんです。

ブラウザでは「文字エンコーディング」や「エンコード」というコトバを使ってる…けど、
いろいろ調べて迷ったあげく、この記事では 文字コード と言う呼び方にしました。
しかし、本音を言えば、 文字符号化方式(CES(character encoding scheme))
(要するに「文字エンコーディング」)のほうが合っているのではないかとも思っています…。

今回のところはとにかく Shift_JIS 、UTF-8 などの「文字をコンピュータ上で扱うための規格」があり、
これを<meta charset=" ">でキチンと指定するってことが重要。

次回予告

今回の記事を書いているうちに、
そもそもコンピュータは文字をどうやって表示するのか、文字コード、符号化文字集合、文字符号化方式とは?など、調べたことを、次回「ちょっとメモ」にメモっておきます。

そのあと、<meta>要素の「name属性」を。
「name属性」は、サイトの紹介文や著作者の名前など、サイトの情報を書いておける属性です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

お世話になります

スマホ対応のため、HTML5の勉強をしていて、たどり着きました。
15年前のHTML4の本で得た知識のまま、ウェブサイトを放置していましたことを深く反省しています。
分かりやすく解説されているので、今後もお世話になると思います。
ありがとうございます。

Re: お世話になります

ネコママさん
コメントありがとうございます。
HTML4でサイトを作ったことがあるんですね♪
私もHTML4から始めました。
ウェブサイトの技術はどんどん進化して、勉強しながら記事を書いていますが、
今アップしている記事も、すぐに古くなるんですよね。
覚えることがいっぱいあって大変ですが、お互いにがんばりましょう!
こちらこそ今後ともよろしくお願いします。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.