概要

CSSのdirectionプロパティは、テキストやブロック要素の表示方向を指定するためのプロパティです。このプロパティは、多言語対応のWebサイトや、特定のデザイン要件に応じて、テキストの流れを調整する際に役立ちます。主に左から右（ltr）と右から左（rtl）の2つの方向を制御できます。

directionプロパティの基本構文

directionプロパティは以下の構文で使用します。

direction: ltr | rtl | inherit;
  • ltr（left-to-right）：左から右にテキストを流す（デフォルト値）。
  • rtl（right-to-left）：右から左にテキストを流す。
  • inherit：親要素からdirectionプロパティの値を継承します。

使用例

基本的な使用例

以下の例では、directionプロパティを使用してテキストの表示方向を制御しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>directionプロパティの例</title>
<style>
.ltr-example {
direction: ltr;
}
.rtl-example {
direction: rtl;
}
</style>
</head>
<body>
<h2>direction: ltr</h2>
<p class="ltr-example">This text is displayed from left to right.</p>
<h2>direction: rtl</h2>
<p class="rtl-example">هذا النص يظهر من اليمين إلى اليسار.</p>
</body>
</html>

この例では、ltr-exampleクラスを持つ要素は左から右へテキストが表示され、rtl-exampleクラスを持つ要素は右から左にテキストが表示されます。

多言語対応での使用

directionプロパティは、多言語対応のサイトで特に有用です。例えば、アラビア語やヘブライ語のような右から左に読む言語を扱う際に、適切なテキスト方向を設定することで、ユーザー体験を向上させます。

body {
direction: rtl;
unicode-bidi: bidi-override;
}

上記のスタイルを使用すると、ページ全体が右から左のテキスト表示に切り替わります。

directionプロパティの注意点

  • directionプロパティはテキストだけでなく、ボックス要素の配置やスクロールバーの表示方向にも影響を与えます。
  • unicode-bidiプロパティと併用することで、より詳細な双方向テキストの制御が可能になります。例えば、bidi-overrideを設定することで、directionで指定した方向を強制することができます。
  • direction: rtlを設定すると、要素内のリストやナビゲーションなども右から左へ並ぶようになるため、レイアウト全体の調整が必要な場合があります。

まとめ

directionプロパティは、テキストやブロック要素の表示方向を制御するために非常に有用なCSSプロパティです。多言語対応や特定のデザイン要件に応じて適切に使用することで、Webページの視覚的な一貫性とユーザビリティを向上させることができます。ltrとrtlの基本的な使い方を理解し、必要に応じてunicode-bidiと組み合わせて活用してみましょう。

参照:

directionプロパティ（`CSS`） | MDN Web Docs