:lang()
:lang() は CSS の擬似クラスで、指定された言語に基づいて要素を照合します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3.1 | 18 | 2 | |
argument list 言語コードのカンマ区切りリスト (`:lang(A, B)`) | | | 114 | 9 | | 9 |
wildcards `:lang(*-Latn)` としてワイルドカードを使用して言語コードを照合します。 | | | 114 | 9 | | 9 |
基本構文
CSS
:lang(ja) {
font-family: 'Noto Sans JP', sans-serif;
}
:lang(en) {
font-family: 'Inter', sans-serif;
}ライブデモ
実務での使いどころ
-
言語別フォントの自動切り替え
日本語コンテンツには日本語フォント、英語コンテンツには欧文フォントを自動的に適用し、各言語に最適な表示を実現します。
注意点
- lang属性がHTML要素に正しく設定されていないとマッチしません。多言語サイトでは適切なlang属性の設定を徹底してください。
アクセシビリティ
- 正しいlang属性の設定はスクリーンリーダーの発音に直接影響するため、:lang()の使用と合わせてlang属性の正確性を確認してください。