CSSの:dir()でテキストの方向（LTRやRTL）に応じてスタイルを適用する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:dir()擬似クラスは、HTML要素のテキストの方向性（右から左、左から右）に基づいてスタイルを適用するために使用されます。主に国際化対応のために、言語に応じたスタイルを適用したい場合に役立ちます。文字の並び替えが行われるわけではありません。

スポンサーリンク

CSSの:dirの値とその効果の一覧

  • :dir(rtl) – テキスト方向が右から左の要素に対して適用されます。
  • :dir(ltr) – テキスト方向が左から右の要素に対して適用されます。

注意点と関連情報

:dir()擬似クラスは、HTMLのdir属性によって決まるテキストの方向に基づいてスタイルを適用します。dir="rtl"の場合、右から左のテキスト方向が設定され、dir="ltr"の場合、左から右の方向が設定されます。

:dirが効かない理由として考えられること

dir属性が要素に設定されていない

:dir()擬似クラスは、要素のdir属性（ltrやrtlなどの書字方向）に基づいてスタイルを適用します。対象要素にdir属性が設定されていない場合、:dir()は機能しません。
対策：HTML要素にdir属性を設定します。例えば、<div dir="rtl">のようにして、右から左への書字方向を指定します。

共通するCSSコード

.css-sample-container {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin-bottom: 30px;
}

.css-sample-box {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  padding: 10px;
  border: 1px solid gray;
}

:dir(rtl)の表示例

テキスト方向が右から左に設定されている場合のスタイル適用例です。背景色は水色、文字色は濃い青になります。並び替えられるわけではありません。日本語の場合は「。」が最初に来るなど、挙動が予期せぬものになりますので注意が必要です。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box" dir="rtl">
    これは右から左へのテキストです。
  </div>
</div>

CSSコード

.css-sample-box:dir(rtl) {
  background-color: lightblue;
  color: darkblue;
  text-align: right;
}

表示結果

これは右から左へのテキストです。
أهلاً، أهلاً، أهلاً وسهلاً يا عزيزي

:dir(ltr)の表示例

テキスト方向が左から右に設定されている場合のスタイル適用例です。背景色は薄い緑色、文字色は濃い緑になります。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box" dir="ltr">
    これは左から右へのテキストです。
  </div>
</div>

CSSコード

.css-sample-box:dir(ltr) {
  background-color: lightgreen;
  color: darkgreen;
  text-align: left;
}

表示結果

これは左から右へのテキストです。

まとめ

  • :dirは、HTML要素のテキスト方向（rtlまたはltr）に基づいてスタイルを適用するために使用されます。
  • テキスト方向に応じて、スタイル（背景色、文字色、テキストの揃え方など）を変えることができます。
  • 国際化対応が求められるウェブサイトでは、特に有効です。
スポンサーリンク