[45-2] meta要素の charset属性で文字コードを指定しよう

最終更新日:2017年12月08日  (初回投稿日:2012年08月30日)

<meta>要素の「charset属性」を使って <meta charset=" "> 「文字コード」を宣言します。

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

<meta>要素は内容が多いため 記事を数回に分けています。

[45-1] meta要素で基本情報を指定しよう
<meta>要素のルールと、属性のルール
[45-2] meta要素の charset属性で文字コードを指定しよう ←今日はココ
charset属性で文字エンコードを指定します。
[45-3] meta要素の name属性でサイトの情報を指定しよう
name属性でサイトの説明文、クローラーへの指示、ビューポートの指定などをします。
[45-4] meta要素の http-equiv属性で動作を指示しよう
http-equiv属性でページのリダイレクトを指定できます。
[45-5] meta要素で OGPを設定しよう
Facebook などの SNSでシェアされたときの「サムネイル画像や説明文などのセット」を表示させます。
本日のINDEX
  1. <meta charset=" "> のルール
    1. <head>の中の <title>より前に書こう
  2. HTML5からは UTF-8が推奨されています
  3. で、「文字コード」って何よ?

参考:
The meta element - HTML 5.1 2nd Edition | W3C Recommendation
The meta element - HTML Living Standard | WHATWG
meta 要素 - HTML | MDN

<meta charset=" "> のルール

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

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

以前(XHTML 1.1)の文字コードの指定は
<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>内の文字も当然対象です。必ず <title>の上に書きましょう。

「文字コードを指定する <meta>要素は <head>要素の内部かつ HTML の始めから 1024 バイト(1KB)以内に配置しなくてはならない」というルールもあるそうです。
ページの「文字集合」を選択するまで、始めの部分しか確認しないブラウザがあるためだって。
いずれにせよ、<head>要素の上の方に 文字コードの宣言をしておくのが良いです。

HTML5からは UTF-8が推奨されています

文字コードは、「Shift_JIS」「UTF-8」などがありますが、HTML5から、UTF-8 を使用することが推奨されています。

理由は「UTF-8」は Win、Mac、Linux、Unix、どんな OSでもOKなのと、2バイト文字(漢字や仮名などの日本語・中国語・ハングル・アラビア語など)も含めた、世界中の言語の文字を表示できるから。

それから、 CESU-8、UTF-7、BOCU-1、SCSU を使ってはならないそうです。
これらのエンコーディングで クロスサイトスクリプティング 攻撃が実証されているそうです。
また、 UTF-32 を使っても ブラウザは UTF-16 と区別できるとは限らないので、使うべきではないそうです。

ま、<meta charset="UTF-8"> と指定しておけば間違いないってことです。

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

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

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

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

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

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

「機種依存文字」が文字化け(もじばけ)の元
機種依存文字を使うと <meta charset=" "> を設定をしても文字化けします。
PCによって NEC機種依存文字、IBM拡張文字、Apple拡張文字などが存在し、これらを「機種依存文字」といいます。
インターネット上では機種依存文字を使わないのがマナー。要注意です。
ちなみに「文字化け」は、英語圏でも "Mojibake" で通用するらしいです。

次回予告

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

そのあと、<meta>要素の「name属性」を。
「name属性」は、サイトの説明文や、クローラーへの指示、ビューポートの指定など、あらゆることができる属性です。

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

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

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

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

お世話になります

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

Re: お世話になります

ネコママさん
コメントありがとうございます。
HTML4でサイトを作ったことがあるんですね♪
私もHTML4から始めました。
ウェブサイトの技術はどんどん進化して、勉強しながら記事を書いていますが、
今アップしている記事も、すぐに古くなるんですよね。
覚えることがいっぱいあって大変ですが、お互いにがんばりましょう!
こちらこそ今後ともよろしくお願いします。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
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.