日本語ページに中国語入力時のフォント・HTML処理

日本語のウェブページに、部分的に中国語を入力したとき、その中国語に対して：

ように設定したいときがあります。以下では、その方法について具体的に解説します。

部分的な中国語のフォントを別指定する

日本語で作成するウェブページであれば、通常bodyタグなどにfont-familyを使って日本語フォントを設定していると思います。

この場合、そのページ内に部分的に中国語を入力すると、中国語に対応するフォントが指定されていないので、中国語のみガタガタに表示されることが多いです。

崩れた中国語でも、日本人的にはなんとなく読めそうにも感じますが、中国の方に聞いてみると、やはり違和感を覚えるとのことです。そのため、できるなら部分的に入力した中国語に対しても、しっかりと中国語専用のフォントを指定するのが望ましいです。

しかし、font-familyの先頭に中国語フォントを設定すると、日本語にも影響があるようで、今度は日本語がすべてガタガタになります。

そのため、手間ではありますが、部分的に入力した中国語ひとつひとつをspanタグで囲んで：

1. class名を付与して、cssファイルでfont-familyを指定します。

または

2. spanタグ内にstyle属性を設定して直接font-familyを指定します。

頻繁に中国語の入力があるなら、1のやり方（classで処理）の方が適しています。中国語の入力が限定的なら2が良いかもしれませんが、もちろん1でも対処できます。このあたりは、ご自身のやり方にあわせていただければと思います。

中国語対応フォント

中国語には、一般的にふたつの表記法があります。

ひとつは、簡体字（Simplified Chinese）と呼ばれるもので、これは中国本土（大陸）で使用されます。識字率の向上を目的に漢字が簡略化された中国語で、漢字の画数が少ない特徴があります。

もうひとつは、繁体字（Traditional Chinese）と呼ばれるもので、香港や台湾などで使用する旧字体の中国語です。漢字が簡略化される前のもともとの中国語で、漢字の画数が多い特徴があります。

ちなみに、ビジネス上の需要に限っていえば、簡体字を使うことが圧倒的に多い（中国本土とのビジネス規模が大きい）のが現状です。

そのため、簡体字と繁体字では使用するフォントが異なります。

以下、Windowsに対応したオーソドックスなフォント設定の一例です。Mac端末のフォントはさまざまなので、個々に確認してみた方が良いかもしれません。

アクセシビリティ向上のためにlang属性を設定

部分的な中国語をせっかくspanタグで囲ったのなら、あわせてlang属性も設定するのがベターです。

lang属性は、タグで囲まれたテキストが何語なのかを表すものです。例えば、テキスト自動読み上げ機能に対応するために、lang属性を適切に設定しておいた方が望ましいと言われます。

ただ、自動読み上げ機能もいろいろで、せっかくlang属性を設定しても対応してくれない（lang属性で指定した言語で読んでくれない）ことが結構あります。

しかし、このようなアクセシビリティの向上は、場合によっては検索エンジンからのページ評価にかかわるかもしれないので設定するにこしたことはないと思います。

lang属性に設定できる値は、実はけっこう複雑です。IETFのBCP47（BCP：Best Current Practice）で定められた言語コードを使用しますが、中国語のようなマクロランゲージの場合は厄介です。

そのため、細かなことは割愛しますが、以下のように設定するのが無難だと思います。

zhは中国語で中国（zhongguo）のことです。Hanは中国語（hanyu）のことで、簡体字（simplified）なのでHans、繁体字（traditional）なのでHantと理解すると覚えやすいかもしれません。

また、例えば簡体字のzh-Hansひとつを取っても、zh-Hans-CNやzh-cmn-Hansなどの設定法がありますが（cmnは共通語のcommon）、ここまで細かく表記するのは、特に必要とする場合のみであって、とりえあず中国本土（大陸）に向けた場合や、一般的な中国語簡体字としてなら、zh-Hansで十分だと思います。

そもそも、言語コードは、日本語コードをja-JPではなくjaとするように、できるだけシンプルに表記するのが原則です。

参考：W3C "Declaring language in HTML"

自動翻訳させない

このサイトのように中国語学習系のページである場合、自動翻訳されたら困ることがあります。

そのため、このようなときにはtranslate属性を使用します。

translate属性の値をnoにすることで翻訳対象外に設定することは一応できますが、ただ実際には反映されないことも多いです。例えば、Google翻訳で試してみたら（記事作成時点）、見事に無視されて、まるごと翻訳されてしまいました。

translate属性はあくまで実験的なもので、不確かであることは注意した方が良さそうです。ただ、lang属性と同様に、もしspanタグを個々に設定するのなら、ついでにtranslate属性も設定してみるのも一考ではないでしょうか。