CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:lang疑似クラスとは？使い方と実践的なサンプルコードを解説

CSSの:lang疑似クラスは、指定した言語が設定されている要素に対してスタイルを適用するためのセレクタです。多言語対応のWebサイトでは、言語ごとに引用符や表記の慣習が異なるため、この疑似クラスを活用することで、言語に応じた適切なスタイルを簡単に切り替えることができます。

:lang疑似クラスの基本構文

:lang疑似クラスは、HTMLのlang属性と組み合わせて使用します。例えば、英語（en）やフランス語（fr）など、言語コードを引数として指定します。

:lang(en) { /* 英語向けのスタイル */ }
:lang(fr) { /* フランス語向けのスタイル */ }

サンプルコード：言語ごとに引用符のスタイルを変更する

以下のコードは、:lang疑似クラスを使って、英語とフランス語で異なる引用符を表示する例です。実際にブラウザで実行して動作を確認してみましょう。

<html>
<head>
  <style>
    /* 言語ごとに2段階の引用符を定義 */
    :lang(en) { quotes: '"' '"' "'" "'"; }
    :lang(fr) { quotes: "<<" ">>" "<" ">"; }
  </style>
</head>
<body>
  <p>...<q lang="fr">段落内の引用文</q>...</p>
</body>
</html>

解説

上記のサンプルでは、<q>要素にlang="fr"属性を設定しているため、フランス語の引用符である「<<」と「>>」が自動的に適用されます。もしlang="en"を指定すれば、英語圏で一般的なダブルクォート（"）が表示されます。

このように:lang疑似クラスを使うことで、JavaScriptなどに頼らず、CSSだけで言語ごとの表記ルールに対応できます。多言語サイトの国際化（i18n）において非常に便利な機能なので、ぜひ活用してみてください。

  1. CSSの:lang()疑似クラスセレクターとは？使い方と実践的なサンプルコードを解説

    CSSの:lang()疑似クラスセレクターは、要素に指定されたlang属性の値に基づいて要素を選択するためのセレクターです。これにより、コンテンツに関連付けられた特定の言語をターゲットにして、言語ごとに異なるスタイルを適用できます。多言語対応サイトでフォントや装飾を言語別に切り替えたい場合などに非常に便利な機能です。構文（シンタックス）:lang()疑似クラスの基本構文は以下の通りです。:lang(言語コード){ /* スタイル宣言 */ }引数には「ja」（日本語）、「en」（英語）、「it」（イタリア語）といったBCP 47形式の言語タグを指定します。なお、:lang()はlang

  2. CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

    CSSの疑似クラス（Pseudo Class）は、要素の特別な状態を表現するための仕組みです。ドキュメント内の要素そのものだけでなく、「状態」「位置」「履歴」などといった外的な要素も捉えることができます。たとえば「マウスカーソルが乗っている要素」「すでに訪問済みのリンク」「入力値が有効なフォームフィールド」といった状態は、通常のCSSセレクターでは直接指定できません。こうした場合でも、疑似クラスを使えば柔軟にスタイルを適用できます。疑似クラスの基本構文疑似クラスは、セレクターの後ろにコロン（:）を付けて記述します。Selector:pseudo-class {   &nbs