【CSS Modules】:lang疑似クラスの使い方
:lang()疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:lang()クラスは、特定の言語で記述された要素を選択するためのCSSの疑似クラスです。この疑似クラスは、HTML要素のlang属性やXML要素のxml:lang属性で指定された言語情報を参照し、その言語に一致する要素にスタイルを適用することを可能にします。
例えば、多言語対応のウェブサイトにおいて、言語ごとに異なるフォントファミリー、引用符のスタイル、ハイフネーション設定などを適用したい場合に非常に役立ちます。これにより、各言語の文化的な慣習や可読性を考慮したデザインを細かく実現できます。
使い方はシンプルで、対象のセレクターの後ろに:lang(言語コード)を付け加えるだけです。具体的な例としては、<p lang="en">This is English text.</p>のような英語の段落にのみ特定のスタイルを適用したい場合、p:lang(en) { font-style: italic; }のように記述します。
:lang()に指定する言語コードは、en（英語）、ja（日本語）、fr（フランス語）など、RFC 5646で定義された形式を使用します。また、en-USのような地域コードを含む言語にも対応しており、:lang(en)のように親となる言語コードを指定した場合、en-USやen-GBといったより詳細な地域言語も自動的に対象に含まれるため、柔軟な選択が可能です。多言語サイトのデザインにおいて、言語に合わせたきめ細やかな表現を実現するために重要な機能です。
公式リファレンス: :lang()
構文(syntax)
1p:lang(en) { 2 color: blue; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません