◀ 12.

CSS direction の使い方｜LTR/RTL の切り替えと unicode-bidi

▶
この記事の要点
  • direction プロパティは文字の進行方向（書字方向）を指定する
  • 値は ltr（左→右、初期値）と rtl（右→左）の 2 つ
  • アラビア語・ヘブライ語など RTL 言語の表示や、テーブル列の並び順反転に使う
  • 視覚効果よりも文書構造を変える性質があるため、装飾目的なら writing-mode や Flex の flex-direction を使う方が適切

direction プロパティとは

direction は CSS のプロパティで、テキストや行内ボックスの進行方向を指定します。日本語や英語のように左から右へ読む言語（LTR: Left-To-Right）と、アラビア語・ヘブライ語のように右から左へ読む言語（RTL: Right-To-Left）を切り替える際に使用します。直接的にはテキストの並びだけでなく、テーブルの列順、リストマーカーの位置、Flexbox / Grid の主軸方向にも影響を与えます。

構文

selector {
  direction: ltr; /* 初期値：左から右 */
  direction: rtl; /* 右から左 */
}

値の一覧

値意味
ltr左から右（既定値）
rtl右から左
inherit親要素の値を継承

使用例

1. テキストを RTL にする

<p style="direction: rtl;">ABC アラビア語の方向はこちらの向きです</p>

このように指定すると、行ボックスの開始位置が右端になり、テキストは右詰めで描画されます。

2. テーブルの列順を反転

table.rtl {
  direction: rtl;
}

テーブルに direction: rtl を指定すると、<th> / <td> の並びが視覚的に右→左になります。RTL ロケール対応サイトでよく使われます。

3. リストマーカーの位置

RTL を指定すると、<ul> / <ol> のマーカーが右側に表示されます。

unicode-bidi との関係

direction プロパティの効果を確実に出すには、Unicode 双方向アルゴリズム（BiDi）を意識した unicode-bidi プロパティを併用するのが基本です。両者は必ずセットで考えられます。

値意味
normal通常（既定値）。direction による方向制御は限定的
embed新しい埋め込みレベルを開く
isolateBiDi 計算を周囲から分離する（モダン UI で推奨）
bidi-overrideBiDi アルゴリズムを無視して direction をそのまま適用

HTML の dir 属性との違い

HTML 側にも書字方向を示す dir 属性があり、こちらは「文書構造としての方向」を表します。一方 direction は「スタイル上の方向」を指定します。基本的には HTML の dir 属性を優先し、direction はあくまでスタイル調整時の上書きとして使うのが推奨される使い分けです。

<!-- 推奨：意味としての方向は HTML 属性で -->
<p dir="rtl">مرحبا بالعالم</p>

装飾目的では使わない方がいい

「テキストを右揃えにしたい」「Flex の並びを反転したい」だけが目的なら、direction ではなく次のプロパティを使う方が意図が明確です。

  • 右揃え → text-align: right;
  • 縦書き・横書き切替 → writing-mode: vertical-rl;
  • Flexbox の並び反転 → flex-direction: row-reverse;

関連記事

Post Share
子ページ

子ページはありません

同階層のページ
  1. text-decoration関連のプロパティ
  2. word-breakプロパティ
  3. hyphensプロパティ
  4. white-spaceプロパティ
  5. text-alignプロパティ
  6. vertical-alignプロパティ
  7. line-heightプロパティ
  8. text-indentプロパティ
  9. letter-spacingプロパティ
  10. word-spacingプロパティ
  11. text-transformプロパティ
  12. directionプロパティ
  13. unicode-bidiプロパティ
2026-10-03 03:32:10 atom 209

人気ページ

最近更新/作成されたページ