　　　　　　　　世界を目指しての旅行記ほか　by カズ＠憧れの大地　

雑記帳

WEBページで多言語同時表示 -２-

前回「WEBで多言語同時に表示する方法」では、タイトルの内容の事を実行するための試行錯誤の様子を書きました。今回の(2)は、(1)の続報・追加・修正です。

1．テキストエディタ: 前回、私の使用しているテキストエディタがメモ帳（Notepad）であると書きましたが、それについて変化がありました。; 恐らくWindowsの自動アップデートのためではないかと思われるのですが、メモ帳の表示フォントを日本語フォントにしても、中国語簡体字部分が文字化けしなくなりました。それはいいことなのですが、一つ問題が発生しました。2004年新規にメモ帳で作成したUTF-8のHTMLファイルをフォルダ内で右クリックすると、Explorerにエラーが発生して、Explorerが強制終了されるようになってしまったのです。

これでは具合が悪いので、いろいろ試してみました。まず、もう一つのWindows標準装備のテキストエディタ・Wordpadを使ってみました。WordpadもUnicodeに対応しているので、日中混合のテキスト編集は可能です。しかし、できたHTMLをブラウザで表示すると、文字化けが発生してしまいます。よって、Wordpadも没。

まずたどり着いたテキストエディタが、Web作成者の間でよく使われている「秀丸」。その後更に「EmEditor」を知るに至りました。

これらのテキストエディタはVector等でWeb上からダウンロードすることができます（いずれも4200円程ののシェアウェアです）。ツールバーの「その他→ファイルタイプ別の設定」で中国語・日本語を同時表示できるフォント（Arial、MS UI ゴシック、ヒラギノOpenType、MS Sans Serif等）を指定すれば、日中混在のHTMLを作成することができるようになります。あとは保存する際に、(1)で書いたメモ帳の場合同様、文字コードを「UTF-8」に指定（絶対に忘れないこと！　これを忘れて自動設定のままにすると後で文字化けします）すればOKです。

また、保存の際に“BOMを付ける”というチェックボックスがありますが、これはチェックを入れないでください。実は上記の「Explorerにエラーが発生して、Explorerが強制終了される」というのは、メモ帳でUnicodeのファイルを保存する際にこのBOMというものが自動的に付けられることが原因なのです。

2．HTML内でのコードの指定: さて、保存する際にコードをUTF-8に指定したからOK、かと言うと、そうではありません。
正しくHTMLを書く場合、<head>～</head>の部分に以下の書式指定の行を入れる必要があります。
<META http-equiv="Content-Type" content="text/html; charset=Shift_jis">
ここで注意が必要なのは、"charset"の部分。通常、日本語のHTMLを作成する際には、ここをShift_jisに指定します。しかし、UTF-8を使用する場合には、ここをcharset=UTF-8に変える必要があります。そうでないと文字化けが発生します。

3．フォントの指定（Windows対応）: 2．までで一応、日中混在のHTML作成は完了です。でも、できたHTMLをInternet Explorerで表示すると、どうも全角かなの部分と半角英数の部分のフォントのバランスが悪いです。（指定しない場合、Unicodeのページを表示すると、全角かなはゴシックに、半角英数は明朝＝Times New Roman＝になります。なお、Geckoエンジン（Netscape6～、Mozialla、Firefox等）ではではこの現象は発生しません）; (1)の段階では「これでよしとしよう」でしたが、話が分かってくるにつれ、欲が出てきます。そこで、フォントの設定を変えてみましょう。; ページのフォントは、CSS（カスケード・スタイルシート）で一括して変えることができます。<head>～</head>の部分に以下の<style>タグを記述してください。

例：MS Sans Serifにする場合

現在私が確認済みの混在可能フォントは、 Arial、 Lucida Sans Unicode、 Arial Unicode MS、 MS Sans Serif、 Sans-Serif、 Serif、 MS UI Gothic、 SimSunです。比べてみてください。

また、上記のようなスタイルシートを使用する場合、<head>～</head>の部分に以下のコードが必要となります。

4．フォントの指定（Macその他対応）: 上記の3．で、Windowsの表示は対応完了です。でも、"MS"がついたフォントを使用すると、今度はMacで表示されなくなります。なぜなら、"MS"はマイクロソフトの意味だからです。; MacはヒラギノOpenType、その他のOSはSans-Serifが表示可能なので、これを設定に追加しましょう。; 上記の3．の例で、(a)の行のMS Sans Serif部分の後ろに、コンマで区切ってMac用フォント、その他用フォントを続けます。修正後は以下のようになります。
<style type="text/css">

</style>

また、ArialやSerif、sans-serifなどなら、大方のOSでOKなので、

などとしてもいいでしょう。

以上のやり方を総合した、Unicode対応ページの作成例は、以下の通りです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">

</style>
</head>
<body>
（内容）
</body>
</html>

なお、スタイルシートはHTMLの中ではなく外部スタイルシートに書いた方がいいです。（本ページでは説明の便宜上、このように記述しました）

1　 2　 3

このページの上へ　

カテゴリトップページ　

Home　

サイトマップ　

管理者へのメール　