多言語サイトを構築する際、言語ごとにフォントや文字間、行間などを微調整したい場面があります。
そんなときに便利なのが、CSSの:lang()擬似クラスです。
:lang()とは
:lang()は、HTML要素の言語情報をもとに、特定の言語にだけスタイルを適用できるCSSの擬似クラスです。
たとえば、英語のテキストだけに英字向けのフォントを指定したい場合は、次のように書きます。
:lang(en) {
font-family: "Times New Roman", serif;
line-height: 1.6;
}<p lang="en">English.</p>この場合、lang="en"が指定された要素に対して、Times New Romanとline-height: 1.6が適用されます。
この仕組みを活用し、HTMLファイル冒頭のlang(言語)設定から、ページ全体のCSSを一括で調整することができます。
ページ全体の言語に応じてCSSを切り替える
例えば、英語ページの場合、HTMLの言語コードは以下のように設定しますが…。
<html dir="ltr" lang="en">このlang="en"を利用し、英語ページ全体のフォントや行間を調整できます。
body {
font-family: "Noto Serif JP", sans-serif;
line-height: 2;
}
html:lang(en) body {
font-family: "Times New Roman", serif;
line-height: 1.6;
}この場合、<html lang="en">のページでは、bodyに英語向けのフォントと行間が上書きされます。
CSSのネストを使ってまとめて書く
さらに、CSSのネストを使えば、html:lang(en)配下の全要素や、class、idに対する指定をまとめて書くこともできます。
html:lang(en) {
& body {
font-family: "Times New Roman", serif;
line-height: 1.6;
}
& h1 {
～
}
.class {
～
}
#id {
～
}
}関連記事はこちら
CSSのネスト(入れ子)は、当面の間は「＆記号」を付けた方が安心か
CSSのネスト(入れ子)で記述したスタイルが、iPhoneだと全く効かない事態に遭遇。結論から言うと、iOSのバージョンによっては「& 入れ子セレクター」の記述が未だに必要であり、それが無視出来ないシェア率で残っていました。詳しく解説します。
HTML lang属性で使う主な言語コード
多言語サイトでよく使う、lang属性の一例です。
| 日本語 | ja |
| 英語 | en |
| 中国語（簡体字） | zh-Hans |
| 中国語（繁体字） | zh-Hant |
| 韓国語 | ko |
| タイ語 | th |
html:lang(en)と同様、他の言語も同じようにCSSで設定が可能です。
:lang(en) {
font-family: "Times New Roman", serif;
line-height: 1.6;
}
:lang(ko) {
font-family: "Noto Serif KR", serif;
line-height: 2;
}この他にも様々な言語コードがあります。
参考
HTML［言語コード］主な言語コードの一覧 – TAG index
https://www.tagindex.com/html/basic/langcode.html
ちなみに現場でよくある間違いですが、日本語はjpではなくja、韓国語はkrではなくkoです。
また、:lang(en)は、lang="en"だけでなく、lang="en-US"やlang="en-GB"のような地域指定にも一致します。
そのため、英語全般に適用したい場合は:lang(en)、特定の地域まで分けたい場合は:lang(en-US)のように使い分けると良いです。zhコードの中国語も同様です。:lang(zh)指定で、簡体字、繁体字どちらにも適用できます。
まとめ
以上、「CSSの:lang()で言語別にスタイルを切り替える方法」でした。
言語ごとのデザイン差分が大きい場合は専用CSSを分ける方法も有効ですが、軽微な調整であれば:lang()を活用するとシンプルに管理できます。
:lang()を使えば、HTMLのlang属性をもとにスタイルを自動で切り替えられるため、専用CSSファイルの追加や、PHP等で読み込み条件の分岐を増やさずに済みます。また、ページ全体だけでなく、文章中の一部だけ英語・中国語といったケースにも対応しやすいのがメリットです。
ご参考までに。
