• HOME > 
  • CSS > 
  • CSSで中国語フォントを表示させる方法【font-famil...

CSSで中国語フォントを表示させる方法【font-familyで簡体字に変換する】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

CSSで簡体字を表示させる方法

簡体字とは、中国で使われる漢字を簡略化させた文字のことです。

日本のサイトを制作するうえで、簡体字を使う頻度は少ないかもしれません。しかし人の名前などでどうしても表示させなければならない場面があったので、備忘録としてまとめておきます。

簡体字表示が必要になった状況

簡体字の表示という問題に直面したのは、あるお客様のサイト制作でのこと。

掲載したいテキスト情報を紙媒体で頂いたのですが、そのなかに見慣れない漢字がありました。

簡体字の直

表示できなかった文字は、この「」という字です。

見たことあるような無いような漢字。パッと見、「直」に見えますが「直」ではなさそうです。勉強不足で何と読むかわかりませんでした。

思いつく限りの読み方で変換を試みるも一向にこの字にたどり着けません。

単に自分が知らないだけかと思い、IMEパッドで手書きしてみたものの表示されません。

ネットで調べようにも部首などのとっかかりも見当たらないので行き詰りました。

恥を承知でお客様に教えてもらうしかないとあきらめ半分でしたが、最後にダメもとで「直みたいな字」でGoogleで検索してみました。

すると同じような質問をしている方がいて、この字が「簡体字」であることが判明しました。

(恥ずかしながら簡体字という存在もこの時、詳しくは知りませんでした。)

簡体字ということはわかったので、次はどうやってサイト内で簡体字を表示させるかです。

簡体字であることがわかれば、この方法はすぐに見つかりました。

簡体字はCSSのfont-familyで表示させることができるようです。

font-familyで中国語(簡体字)を表示させる方法

簡体字を使用するにはサイトにWebフォントを導入して、font-familyでそのフォントを指定します。

表示させる手順は以下の通りです。

リンク先のサムネイル
CSSのfont-familyプロパティの使い方

font-family:「フォント名」という形で文字に適用させたいフォントを指定することで閲覧するデバイスに対して指定フォントを表示させるようにできます...【もっと読む】

  1. まずlinkタグを使って、サイトのhead部分などにGoogleフォントを読み込ませます。 https://fonts.google.com/
  2. 次にスタイルシートでフォントを指定します。font-familyプロパティに「Noto Sans SC」を指定します。
  3. 最後にHTML上で、簡体字に変換させたい文字をspan等のタグで囲い、前述のクラス名を付与すれば完了です。

実際のコードはこちらです。

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanssc.css">

CSS

.kantaiji{
    font-family:'Noto Sans SC',sans-serif;
}

HTML

<p>この文字「<span class="kantaiji">直</span>」は、簡体字です。<p>

プレビュー

この文字「」は、簡体字です。

@importは非推奨

なお、下記のようにスタイルシート内で「@import」を使ってWebフォントを読み込む方法も存在しますが、こちらの方法は現在では非推奨になっているようなのでご注意ください。

CSS

<style>
@import url(https://fonts.googleapis.com/earlyaccess/notosanssc.css);
.kantaiji{
    font-family:'Noto Sans SC',sans-serif;
}
</style>

まとめ

以上がCSSで中国語フォントを使って簡体字に変換して表示させる方法です。

font-familyは文字の見た目・デザインを変えるものというイメージでしたが、このような使い方・役割もあるのかと気づかされた出来事でした。

ちなみに日本の漢字と簡体字とで書き方が異なるものを調べていくつか試してみましたが、変換できたのはこの「」だけでした。

広告
広告

関連する記事

サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。