カテゴリー
閉じる
カテゴリー
Top >> ウェブデザイン中国語

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

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

  1. 中国語に対応したフォントを設定する
  2. コード上、そのテキストが中国語であることを表す
  3. 場合によっては自動翻訳させない

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

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

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

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

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

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

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

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

HTMLファイル
<span class="chinese">常用的中文字体有哪些</span>

CSSファイル
.chinese {
font-family: 'Microsoft YaHei', sans-serif;
}

または

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

HTMLファイル
<span style="font-family: 'Microsoft YaHei', sans-serif;">常用的中文字体有哪些</span>

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

中国語対応フォント

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

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

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

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

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

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

簡体字の場合
ゴシック体⇒ font-family: 'Microsoft YaHei', sans-serif;
明朝体  ⇒ font-family: SimSun, serif;
繁体字の場合
ゴシック体⇒ font-family: 'Microsoft JhengHei', sans-serif;
明朝体  ⇒ font-family: PMingLiU, serif;

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

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

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

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

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

<span style class="chinese" lang="zh-Hans">常用的中文字体有哪些</span>

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

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

簡体字の場合:zh-Hans
繁体字の場合:zh-Hant

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属性を使用します。

<p>りんごの中国語は<style class="chinese" lang="zh-Hans" translate="no">苹果</span>です。</p>

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

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

オフィスペンぎん
著者:オフペン
メディアディベロッパー、ライター、翻訳者のオフィスペンぎん。著書「コツコツやる人のためのAdSense攻略本」 ご連絡はフォームまたはTwitterから。
記事のシェア
役に立った、参考になった、おもしろかった・・もしそう思ったら、シェアしていただけると嬉しいです♪

関連ページ

関連記事

ペンギンの教室
カテゴリー
人気の記事
固有名詞/専門用語 日英辞書

化学、会計、観光、アニメ、漫画などの分野の用語を収録。

固有名詞・専門用語の日英・英日辞書
ペンギンの教室について
ペンギンの教室の作者:オフィスペンぎん

ペンギンの教室は、日ごろ感じる疑問や覚えなければいけないことを、記事や復習問題、クイズ、ゲームを通じて、わかりやすく学べるサイトです。

運営者:オフィスペンぎん

相談/連絡:フォームまたはTwitter