【CSS Modules】:dir疑似クラスの使い方
:dir()疑似クラスの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
:dir()関数は、CSSにおいて、要素の書字方向（direction）に基づいてスタイルを適用する要素を選択する機能を提供します。この:dir()は、厳密にはJavaScriptなどのプログラミング言語における実行可能な関数とは異なり、文書の国際化対応に不可欠な「擬似クラス」と呼ばれるCSSセレクタの一種です。
この擬似クラスを使用すると、特定の書字方向を持つ要素にのみスタイルを適用できます。例えば、:dir(ltr)は「左から右」へ記述する書字方向（left-to-right）を持つ要素にマッチし、:dir(rtl)は「右から左」へ記述する書字方向（right-to-left）を持つ要素にマッチします。これにより、アラビア語やヘブライ語のような右から左に記述される言語のコンテンツに対して、テキストの配置、マージン、パディングなどを適切に調整することが可能になります。
要素の書字方向は、主にHTMLのdir属性（例: <html dir="rtl">や<p dir="ltr">）や、CSSのdirectionプロパティによって決定されます。:dir()はこれらの属性やプロパティの現在の計算値に基づいて要素を識別し、スタイルを適用します。
Webサイトやアプリケーションを多言語対応させる国際化対応（i18n）において、:dir()は非常に重要な役割を担います。特定の書字方向を持つユーザーに対して、使いやすく、文化的に適切なユーザーインターフェースを提供するために不可欠なツールです。これにより、世界中のユーザーがコンテンツを快適に閲覧できるよう、アクセシビリティとユーザーエクスペリエンスの向上に貢献します。
構文(syntax)
1p:dir(ltr) { 2 text-align: left; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません