direction プロパティ

最終更新：2026-09-13

direction direction プロパティ

direction プロパティはテキストの書字方向（左から右へ ltr、右から左へ rtl）を設定します。主にアラビア語やヘブライ語などの右から左へ書く言語に影響し、テキストの配置、スクロールバーの位置、レイアウトの流れも変更します。多言語サイトでは、CSS プロパティよりも HTML 要素の dir 属性を使うことを推奨します。

カテゴリ
初期値	ltr
継承	はい
適用対象
アニメーションタイプ
CSS バージョン	CSS2
状態	標準

📝 構文

direction: ltr | rtl;

⚙️ 値

値	タイプ	説明
`ltr \| rtl`	キーワード	テキストの方向

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
direction	✓ v10	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： RTL 言語の場合は、HTML 要素に直接 dir="rtl" を使用してください。意味的により適切で、ドキュメント全体の流れに自動的に影響します。

重要： direction は margin や padding などの論理プロパティの物理的なマッピングを変更します。margin-inline-start などの CSS 論理プロパティと組み合わせることで、国際化のサポートが向上します。

❓ よくある質問

QCSS で direction と writing-mode の違いは何ですか？

Adirection はテキストの水平方向の流れ（左から右、または右から左）を制御します。writing-mode はテキストの全体的なレイアウト方向（水平または垂直）を制御します。両者を組み合わせることで、さまざまな組版レイアウトを作成できます。

QCSS で direction: rtl を設定すると、なぜページのレイアウトが変わるのですか？

Adirection: rtl はテキストの流れを反転させるため、テキストは右端から開始され、スクロールバーも左側に移動します。レイアウトに影響を与えずにテキストの配置だけを変更したい場合は、代わりに text-align を使用してください。

Qサイトでアラビア語やヘブライ語のテキストを右から左へレイアウトするにはどうすればよいですか？

A<html> または <body> 要素に dir="rtl" を記述してください。CSS の direction: rtl よりも意味的に適切で、フォームやスクロールバーなどのブラウザの動作にも影響します。CSS では direction: rtl と記述し、混合テキストには unicode-bidi と組み合わせます。