ホームページの作成
[戻る] [MENU] [次へ]

(5)文字コードについて

 文字コードとは

文字コードは何ぞやから始めると数ページは埋まるでしょうし、私も文字コードの歴史から勉強しなければなりませんので省略します。
実際に文字コードの歴史的背景を勉強しても、雑学程度の意味しか持ちませんので、知っておく必要はありません。
ここでは、ホームページ作成の場合に文字コードを何にしたら良いのかに限定したいと思います。
以前はサイトを開いた時に文字化けしていて、読めないサイトが数多く存在しておりました。

現在は、htmlファイルに記載の文字コードで画面を表示しますから、文字化けするサイトにはめったにお目にかかれません。
通常はhtmlファイルの上部に<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">のように記入します。
この記載は、タイトル(title)より前に記述する必要があります。(タイトルの文字コードで判定するブラウザがあるため)


 文字コードを何にするか

文字コードには、「Shift_JIS」「EUC-JP」「UTF-8」などの主流の外にも多くありますが、どれを使用すべきかの結論は出ております。
EUC-JPは現在は使っている人をほとんど見かけません。
日本のサイトの多くは、shift-jisかutf-8を使用しているようです。
JAVAScriptを使う事を考えると、JAVAScriptはutf-8を使用しているのが大部分ですから、htmlファイルもutf-8を使用するのが基本であり、誤動作を避ける意味でもutf-8を使用すべきでしょう。
グーグルやヤフーのサイトも、当然ながらutf-8を使用しております。

問題があるとすれば、utf-8のコードは扱いにくい点です。
使用しているOS(Windows)の文字コードが shift-jis なのも扱い難さに拍車をかけています。
エディタもshift-jisなら上書き保存で問題ない場合がほとんどですが、utf-8の場合はコード指定をしないとshift-jisで保存されたりします。
文字を自動認識させるようなやり方では、期待通りの保存をしてくれない場合が多いのです。
エディタの設定で、文字のメインコード(普段使用する文字コード)の設定も出来ると思うのですが、私は使用したことがありません。

そう言いながらも、このページは実は問題の多い shift-jis で作成しています。
shift-jisが扱い易いですし、JAVAScriptも一応動作しますので、安直な方を選んでしまいます。
utf-8で作成すべきであるのは判っているのですが、どうしてもそのようになってしまうのです。
日本のサイトにshift-jisで作成したサイトが現在でも多いのは、そのような理由もあるのではないでしょうか。

誰かに文字コードはどれを使用するのが良いのかを聞かれれば、utf-8で作成した方が良いですよと迷わず答えます。
後述する機種依存文字も、utf-8で記述すれば問題は生じません。
文字コードが原因で動作しない場合に容易にコードを変更出来る人はshift-jisで書いても良いでしょうが、本来は最初からutf-8で作成すべきです。
そうは言っても、日本人が作成したcgiのソフトは charset を shift-jis や EUC にしている場合が多いですから、単純ではないのですが。

CSSファイルを作成している場合には、以下のように文字コードを記入しなさいと書いてある解説サイトもあります。
CSSの最上部に記載する事になります。
Unicodeの場合(CSS)
@charset "utf-8";
シフトJISの場合(CSS)
@charset "shift_jis";
日本語EUCの場合(CSS)
@charset "euc-jp";
以前はそのように記載していたのですが、最近では文字コードが混在している場合もあるので記入しておりません。
記入していないサイトが大部分ですし、記入しなくても動作上は問題ないようですが、詳しい事は判りません。
HTML側のlink要素内でcharset属性を指定しておけば、それが継承されると考えて良いようです。


 機種依存文字について

機種依存文字と呼ばれる文字があります。
例えばWindowsでは、大文字のローマ数字(TUVWXYZ[\])、小文字のローマ数字(@ABCDEFGHI)、丸囲み数字(@ABCDEFGHIJKLMNOPQRS)、丸囲み文字()、カタカナ表記の単位(_b`cdjgla)、単位記号(psu)、複数のアルファベットを合成した文字(ョх)、元号(~順紫)、会社名等で用いられる括弧囲み文字(括窮)等が機種依存文字と呼ばれています。

機種依存文字は一般的に、異機種間でデータの交換を行った場合、例えばWindowsで作成したテキストファイルをMacintoshで表示した場合に文字化けしてしまうので、これら異機種でデータ交換することを前提としたインターネットでは利用するべきではないと言われています。
下記は機種依存文字の Windowsの表示(左側)と Macintosh の表示(右側)です、
機種依存文字

しかし、これらは機種依存文字と呼ばれているものの、その意味はある意味間違ってはいませんが、ある意味では間違っています。そのため、文字化けを起こさずにこれらの文字を交換することが可能です。


機種依存文字は何故文字化けするのか?

WindowsもMacintoshもShift_JISという同じ文字コードが使われていることは有名です。
同じ文字コードでデータ交換を行うのであれば文字化けは発生しないはずです。
では何故、異機種間でデータを交換すると文字化けするのでしょうか?

実は、これらの文字はShift_JISでは扱えない文字である、というところに問題があります。 これらの文字はShift_JISで文字が定義されていないコードに無理矢理文字を割り当てて、取り扱えるようにしたものなのです。
このような拡張文字があることから、Microsoftが拡張したShift_JISは一般的にはCP932と呼ばれます(CPはコードページの略)。

機種依存文字というのは、Shift_JISの未定義領域を各ベンダーが互換を考えずに独自拡張した結果であることが分かるかと思います。
この理屈から考えるなら、これら機種依存文字と呼ばれる文字も、正式に規格化された文字コードで利用するならば機種依存ではない、という理屈も見えてきます。
つまり、機種依存文字は、ある特定の文字コードで機種依存であるだけで、全ての文字コードで機種依存という訳ではないのです。
そして実際に、これらの機種依存文字と呼ばれていた文字が定義された文字コードが存在しています。
それはUnicodeです。

UnicodeはWebでは一般的に、UTF-16、もしくはUTF-8、UTF-7のいずれかで利用されています。
これらの文字コードでHTMLファイルを作ると、機種依存文字を問題なく記述することができます。
また、Shift_JIS等で記述したファイルであっても、HTMLの数値文字参照を利用すればこれらの文字を利用することができます。
更に、機種依存文字と呼ばれていた文字をさらに拡張し、Unicodeでのみ扱える文字というのも増えています。例えば、「丸秘」(丸の中に秘の文字)という文字も0x3299に定義されています。
この文字は需要はあったものの、従来のWindowsのCP932では利用できませんでした(Macintoshでは利用できていました)。

この様に、Unicodeで記述すれば、機種依存文字を使用しても何ら問題はありません。
しかし、実用に際しては注意も必要です。
例えば、単位の多くは文字が小さくなるので非常に読みにくくなってしまいます。
また、互換性の面では、WindowsやMacintoshには元々機種依存文字として存在していたものの、他のOSには存在していなかった文字、こういった文字はUnicodeで利用可能となっているとはいえ、そのOSで表示可能なフォントがあるかどうかは実機でテストしてみなくては分かりません。

上記は機種依存文字についての解説サイトから抜粋させていただいたものです。
実に明快で判りやすい解説であると思いました。
これを読むと、私も安心して機種依存文字を使用する事ができますし、使用に批判的な人に対しても、使用に問題が無い事を説明できます。

私は競馬関係のサイトも立ち上げておりますので、丸囲みの数字やアラビア数字を多用しておりました。
今までは、@ABのような機種依存文字を使用しているようなサイトは、閲覧環境に配慮していないレベルが低いサイトと思われるのではないかと気にはなっておりました。
事実、競馬関係のサイトでも使っている人は少ないようです。
私の場合は元々レベルが低いですから(笑)、そのように思われても一向に構わないのですが、機種依存文字に対する不安は払拭されました。
上記の解説を基に対策方法をまとめて見たいと思います。

【対策方法1】
一つは文字コードで記入する方法です。
丸囲い数字

【方法2】
文字コードをUTF-8(Unicode)にする方法です。
こうすれば、機種依存文字を考慮する必要はなくなります。



 HTMLの特殊文字

HTMLで使われる特殊文字の表記一覧です。先頭の5つ以外は日本語フォントでは正しく表示できない場合があります。

文字 コード 名前 説明
 記号
    &nbsp; 空白
" &#34; &quot; 引用符
& &#38; &amp; アンパサンド
< &#60; &lt; 不等号(Less Than,小なり)
> &#62; &gt; 不等号(Greater Than,大なり)
&#128; &euro; ユーロ記号
&#137; &permil; パーミル
&#132;   閉じ引用符(ドイツ語)
&#133;  三連ドット
&#134;   セクション記号
&#135;   セクション記号
&#139;   
&#155;    
« &#171;    
» &#187;    
&#149;    
&#153; &trade; 商標
¡ &#161; &iexcl; 逆感嘆符
¢ &#162; &cent; セント記号
£ &#163; &pound; ポンド記号
¤ &#164; &curren;  
¥ &#165; &yen;円記号
¦ &#166; &brvbar; 破線垂直バー
§ &#167; &sect;セクション記号
¨ &#168; &uml; ウムラウト
© &#169; &copy; コピーライト
ª &#170; &ordf;  
® &#174; &reg;登録商標
° &#176; &deg; 度記号
µ &#181; &micro; マイクロ記号
&#182; &para; 段落記号
&#8539;   8分の1
¼ &#188; &frac14; 4分の1
&#8540;  8分の3
½ &#189; &frac12; 2分の1
&#8541;   8分の5
¾ &#190; &frac34; 4分の3
&#8542;   8分の7
¿ &#191; &iquest; 逆疑問符
« &#171; &laquo; 左角引用符
» &#187; &raquo;右角引用符
 算術記号
¬ &#172; &not; 否定記号
± &#177; &plusmn; プラスマイナス
× &#215; &times; 乗算記号
÷ &#247; &divide; 除算記号
º &#186;  上付き0
¹ &#185; &sup1; 上付き1
² &#178; &sup2; 上付き2
³ &#179; &sup3; 上付き3
&#8704; &forall; 全てについて
&#8707; &exist; 存在する
&#8706; &part; 偏微分
&#8710;   三角形
&#8711; &nabla; ナブラ
  &empty; 空集合
&#8712; &isin; 右辺の要素である
  &notin; 右辺の要素でない
&#8715; &ni; 要素として含む
&#8719; &prod; n回の乗算
&#8721; &sum; n回の加算
&#8722; &minus; 減算記号
  &lowast; アスタリスク演算子
&#8730; &radic; 平方根
&#8733; &prop; 比例記号
&#8734; &infin; 無限
&#8765;   相似
&#8736; &ang; 角度
¬ &#172; &not; 否定
&#8743; &and; 論理積
&#8744; &or; 論理和
&#8745; &cap; 集合の積
&#8746; &cup; 集合の和
&#8747; &int; 積分記号
&#8748;  二重積分
&#8750;  回転積分
&#8756; &there4; したがって
&#8757;   なぜなら
  &sim; チルダ演算子
&#8786; &cong;ほぼ等しい
&#8776; &asymp; ほぼ等しい
&#8800; &ne; 等しくない
&#8801; &equiv;定義/合同
&#8804; &le; 小さいか等しい
&#8805; &ge; 大きいか等しい
&#8834; &sub; 左辺は右辺の部分集合
&#8835; &sup; 左辺は右辺を含む
&#8810;   はるかに小さい
&#8811;   はるかに大きい
  &nsub;左辺は右辺の部分集合でない
&#8838; &sube; 左辺は右辺の部分集合または等しい
&#8839; &supe; 左辺は右辺を含むか等しい。
  &oplus; 直和
  &otimes; 直積
&#8869; &perp; 直交
  &sdot; ドット演算子
ƒ &#131;   関数記号
 ギリシャ文字
Α &#913: &Alpha; 大文字アルファ
Β &#914; &Beta; 大文字ベータ
Γ &#915; &Gamma; 大文字ガンマ
Δ &#916; &Delta; 大文字デルタ
Ε &#917; &Epsilon; 大文字イプシロン
Ζ &#918; &Zeta; 大文字ゼータ
Η &#919; &Eta; 大文字エータ
Θ &#920; &Theta; 大文字シータ
Ι &#921; &Iota;大文字イオタ
Κ &#922; &Kappa; 大文字カッパ
Λ &#923; &Lambda; 大文字ラムダ
Μ &#924; &Mu; 大文字ミュー
Ν &#925; &Nu; 大文字ニュー
Ξ &#926; &Xi; 大文字グザイ
Ο &#927; &Omicron; 大文字オミクロン
Π &#928; &Pi; 大文字パイ
Ρ &#929; &Rho; 大文字ロー
Σ &#931; &Sigma; 大文字シグマ
Τ &#932; &Tau; 大文字タウ
Υ &#933; &Upsilon; 大文字ウプシロン
Φ &#934; &Phi; 大文字ファイ
Χ &#935; &Chi; 大文字カイ
Ψ &#936; &Psi; 大文字プサイ
Ω &#937; &Omega; 大文字オメガ
Ϊ &#938;   
Ϋ &#939;   
ά &#940;    
έ &#941;    
ή &#942;    
ί &#943;    
ΰ &#944;    
α &#945; &alpha; 小文字アルファ
β &#946; &beta; 小文字ベータ
γ &#947; &gamma; 小文字ガンマ
δ &#948; &delta; 小文字デルタ
ε &#949; &epsilon; 小文字イプシロン
ζ &#950; &zeta; 小文字ゼータ
η &#951; &eta; 小文字エータ
θ &#952; &theta; 小文字シータ
ι &#953; &iota; 小文字イオタ
κ &#954; &kappa; 小文字カッパ
λ &#955; &lambda; 小文字ラムダ
μ &#956; &mu; 小文字ミュー
ν &#957; &nu; 小文字ニュー
ξ &#958; &xi; 小文字グザイ
ο &#959; &omicron; 小文字オミクロン
π &#960; &pi; 小文字パイ
ρ &#961; &rho; 小文字ロー
ς &#962;   
σ &#963; &sigma; 小文字シグマ
τ &#964; &tau; 小文字タウ
υ &#965; &upsilon; 小文字ウプシロン
φ &#966; &phi;小文字ファイ
χ&#967; &chi; 小文字カイ
ψ &#968; &psi; 小文字プサイ
ω &#969; &omega; 小文字オメガ
ϊ &#970;    
ϋ &#971;    
ό &#972;    
ύ &#973;    
ώ &#974;    
 その他の技術的記号
  &lceil; 左上限
  &rceil; 右上限
  &lfloor; 左下限
  &rfloor; 右下限
  &lang; 左角括弧
  &rang; 右角括弧
 その他の記号
  &spades; トランプのスペード
  &clubs; トランプのクラブ
  &hearts; トランプのハート
  &diams; トランプのダイアモンド
文字 コード 名前 説明
 アクセント付文字
À &#192; &Agrave; 大文字A(グレーブ・アクセント)
Á &#193; &Aacute; 大文字A(アキュート・アクセント)
 &#194; &Acirc; 大文字A(サーカムフレックス)
à &#195; &Atilde; 大文字A(チルダ)
Ä &#196; &Auml; 大文字A(ウムラウト)
Å &#197; &Aring; 大文字A(リング)
Æ &#198; &AElig; 大文字AE(リゲチャ)
Ç &#199; &Ccedil; 大文字C(セディラ)
È &#200; &Egrave; 大文字E(グレーブ・アクセント)
É &#201; &Eacute; 大文字E(アキュート・アクセント)
Ê &#202; &Ecirc; 大文字E(サーカムフレックス)
Ë &#203; &Euml; 大文字E(ウムラウト)
Ì &#204; &Igrave; 大文字I(グレーブ・アクセント)
Í &#205; &Iacute; 大文字I(アキュート・アクセント)
Î &#206; &Icirc; 大文字I(サーカムフレックス)
Ï &#207; &Iuml; 大文字I(ウムラウト)
Ð &#208; &ETH; 大文字Eth(アイスランド語)
Ñ &#209; &Ntilde; 大文字N(チルダ)
Ò &#210; &Ograve; 大文字O(グレーブ・アクセント)
Ó &#211; &Oacute; 大文字O(アキュート・アクセント)
Ô &#212; &Ocirc; 大文字O(サーカムフレックス)
Õ &#213; &Otilde; 大文字O(チルダ)
Ö &#214; &Ouml; 大文字O(ウムラウト)
Ø &#216; &Oslash; 大文字O(スラッシュ)
Ù &#217; &Ugrave; 大文字U(グレーブ・アクセント)
Ú &#218; &Uacute; 大文字U(アキュート・アクセント)
Û &#219; &Ucirc; 大文字U(サーカムフレックス)
Ü &#220; &Uuml; 大文字U(ウムラウト)
Ý &#221; &Yacute; 大文字Y(アキュレート・アクセント)
Þ &#222; &THORN; 大文字Thorn(アイスランド語)
ß &#223; &szlig; エスツェット(ドイツ語)
à &#224; &agrave; 小文字a(グレーブ・アクセント)
á &#225; &aacute; 小文字a(アキュレート・アクセント)
â &#226; &acirc; 小文字a(サーカムフレックス)
ã &#227; &atilde; 小文字a(チルダ)
ä &#228; &auml; 小文字a(ウムラウト)
å &#229; &aring; 小文字a(リング)
æ &#230; &aelig; 小文字ae(リゲチャ)
ç &#231; &ccedil; 小文字c(セディラ)
è &#232; &egrave; 小文字e(グレーブ・アクセント)
é &#233; &eacute; 小文字e(アキュレート・アクセント)
ê &#234; &ecirc; 小文字e(サーカムフレックス)
ë &#235; &euml; 小文字e(ウムラウト)
ì &#236; &igrave; 小文字i(グレーブ・アクセント)
í &#237; &iacute; 小文字i(アキュレート・アクセント)
î &#238; &icirc; 小文字i(サーカムフレックス)
ï &#239; &iuml; 小文字i(ウムラウト)
ð &#240; &eth; 小文字eth(アイスランド語)
ñ &#241; &ntilde; 小文字n(チルダ)
ò &#242; &ograve; 小文字o(グレーブ・アクセント)
ó &#243; &oacute; 小文字o(アキュレート・アクセント)
ô &#244; &ocirc; 小文字o(サーカムフレックス)
õ &#245; &otilde; 小文字o(チルダ)
ö &#246; &ouml; 小文字o(ウムラウト)
ø &#248; &oslash; 小文字o(スラッシュ)
ù &#249; &ugrave; 小文字u(グレーブ・アクセント)
ú &#250; &uacute; 小文字u(アキュレート・アクセント)
û &#251; &ucirc; 小文字u(サーカムフレックス)
ü &#252; &uuml; 小文字u(ウムラウト)
ý &#253; &yacute; 小文字y(アキュレート・アクセント)
þ &#254; &thorn; 小文字thorn(アイスランド語)
ÿ &#255; &yuml; 小文字y(ウムラウト)
Š &#138;    
Œ &#140; &OElig; 大文字OE(リゲチャ)
Ž &#142;    
š &#154;    
œ &#156; &oelig; 小文字oe(リゲチャ)
ž &#158;    
Ÿ &#159;    
Ā &#256;    
ā &#257;    
Ă &#258;    
ă &#259;    
Ą &#260;    
ą &#261;    
Ć &#262;    
ć &#263;    
Ĉ &#264;    
ĉ &#265;    
Ċ &#266;    
ċ &#267;    
Č &#268;    
č &#269;    
Ď &#270;    
ď &#271;    
Đ &#272;    
đ &#273;    
Ē &#274;    
ē &#275;    
Ĕ &#276;    
ĕ &#277;    
Ė &#278;    
ė &#279;    
Ę &#280;    
ę &#281;    
Ě &#282;    
ě &#283;    
Ĝ &#284;    
ĝ &#285;    
Ğ &#286;    
ğ &#287;    
Ġ &#288;    
ġ &#289;    
Ģ &#290;    
ģ &#291;    
Ĥ &#292;    
ĥ &#293;    
Ħ &#294;    
ħ &#295;    
Ĩ &#296;    
ĩ &#297;    
Ī &#298;    
ī &#299;    
Ĭ &#300;    
ĭ &#301;    
Į &#302;    
į &#303;    
İ &#304;    
ı &#305;    
IJ &#306;    
ij &#307;    
Ĵ &#308;    
ĵ &#309;    
Ķ &#310;    
ķ &#311;    
ĸ &#312;    
Ĺ &#313;    
ĺ &#314;    
Ļ &#315;    
ļ &#316;    
Ľ &#317;    
ľ &#318;    
Ŀ &#319;    
ŀ &#320;    
Ł &#321;    
ł &#322;    
Ń &#323;    
ń &#324;    
Ņ &#325;    
ņ &#326;    
Ň &#327;    
ň &#328;    
ʼn &#329;    
Ŋ &#330;    
ŋ &#331;    
Ō &#332;    
ō &#333;    
Ŏ &#334;    
ŏ &#335;    
Ő &#336;    
ő &#337;    
Π&#338;    
œ &#339;    
Ŕ &#340;    
ŕ &#341;   
Ŗ &#342;    
ŗ &#343;    
Ř &#344;    
ř &#345;    
Ś &#346;    
ś &#347;    
Ŝ &#348;    
ŝ &#349;    
Ş &#350;    
ş &#351;    
Š &#352;    
š &#353;    
Ţ &#354;    
ţ &#355;    
Ť &#356;    
ť &#357;    
Ŧ &#358;    
ŧ &#359;    
Ũ &#360;    
ũ &#361;    
Ū &#362;    
ū &#363;    
Ŭ &#364;    
ŭ &#365;    
Ů &#366;    
ů &#367;    
Ű &#368;    
ű &#369;    
Ų &#370;    
ų &#371;    
Ŵ&#372;    
ŵ &#373;    
Ŷ &#374;    
ŷ &#375;    
Ÿ &#376;    
Ź &#377;    
ź &#378;    
Ż &#379;    
ż &#380;    
Ž &#381;    
ž &#382;    
ſ &#383;    
ƒ &#402;    
Ơ &#416;    
ơ &#417;    
Ư &#431;    
ư &#432;    
Ǻ &#506;    
ǻ &#507;    
Ǽ &#508;    
ǽ &#509;    
Ǿ &#510;    
ǿ &#511;    
Ά &#902;    
Έ &#904;    
Ή &#905;    
Ί &#906;    
Ό &#908;    
Ύ &#910;    
Ώ &#911;    
ΐ &#912;    
ſ &#383;    

 画像を使わずに絵や記号を表示

All About のホームページ作成講座を見ていたら、画像を使わずに絵や記号を表示する方法が載っておりました。
Wingdings や Webdings という絵文字用フォントがあって、それを指定すれば文字ではなくて絵が表示できると言う理屈のようです。
ふむふむと思いながら、早速試してみる事にします。
尚、このフォントはWindowsをOSにしている人には最初からインストールされているらしいですが、それらを使用していない人には表示されません。官公庁のWEBサイトではペケですが、個人のサイトなら(私のサイトなら)全く気にしません。

試に、<font face="Wingdings">J</font>と入力してみました。
Jと表示されました。
画像が小さくて良く見えませんが、わたしの環境では表示されました。
画像の大きさや色はスタイルシートを使えば、どうにでもなりますから使えます。(画像のデザインが気にならなければですが)
フォント一覧を以下に示します。(参考:All About)

■Wingdings:


■Webdings:

画像を表示するには、<font face="Webdings" size="6" color="red">&#???;</font> のようにします。(???に数字を入れます)
???に245を居れた場合には、õ のような表示をします。
ぜひ使って見たいような画像は見あたりませんが、知っていても損は無いと思います。


[戻る] [MENU] [次へ]