【HTML Living Standard】dir属性の使い方
dir属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
dirプロパティは、HTML要素内のテキストの書字方向を定義する情報を保持するプロパティです。これはほとんどのHTML要素に適用できるグローバル属性で、内容の言語や文化圏に合わせてテキストの表示方向を制御します。指定できる値は、左から右へ書かれる言語（日本語や英語など）にはltr（left-to-right）、右から左へ書かれる言語（アラビア語やヘブライ語など）にはrtl（right-to-left）を指定し、ブラウザに自動判別させるautoの三種類です。autoは、内容がアラビア語の文字で始まればrtl、英語の文字で始まればltrと判断するといった挙動です。
dirプロパティは、文書の論理的な書字方向を決定します。これは単にテキストの表示位置を右揃えにするCSSのプロパティとは異なり、テキストの表示順序、句読点の配置、数値の表示、さらには表の列の順序など、コンテンツのレイアウトと挙動に影響を与えます。親要素のdirプロパティは、子要素にも継承されます。多言語対応のウェブサイトを構築する際に、コンテンツの視認性と正確な意味を確保する上で重要です。autoの値は便利ですが、信頼性の低い外部コンテンツを扱う場合には、意図しない書字方向と解釈される可能性もあるため、注意が必要です。
構文(syntax)
1<p dir="rtl">このテキストは右から左に書かれます。</p>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML dir属性でテキスト方向を制御する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>HTML dir属性のサンプル</title> 6</head> 7<body> 8 <h1>HTML dir属性の基本</h1> 9 10 <!-- dir="ltr" はテキストを左から右へ表示するよう指定します (デフォルト、英語や日本語など) --> 11 <div dir="ltr" style="border: 1px solid blue; padding: 10px; margin-bottom: 10px;"> 12 <h2>左から右 (LTR): 日本語と英語の例</h2> 13 <p>これは左から右に書かれるテキストの例です。</p> 14 <p>This is an example of left-to-right text.</p> 15 </div> 16 17 <!-- dir="rtl" はテキストを右から左へ表示するよう指定します (アラビア語やヘブライ語など) --> 18 <div dir="rtl" style="border: 1px solid red; padding: 10px; margin-bottom: 10px;"> 19 <h2>右から左 (RTL): アラビア語とヘブライ語の例</h2> 20 <p>هذا مثال لنص يكتب من اليمين إلى اليسار.</p> 21 <p>זהו דוגמה לטקסט הנכתב מימין לשמאל.</p> 22 </div> 23 24 <!-- dir="auto" はブラウザがコンテンツに基づいて書字方向を自動的に判別します --> 25 <div dir="auto" style="border: 1px solid green; padding: 10px; margin-bottom: 10px;"> 26 <h2>自動判別 (Auto): 日本語とアラビア語の例</h2> 27 <p>この段落は日本語で書かれているため、左から右に表示されます。</p> 28 <p>هذا نص عربي، لذا سيتم عرضه من اليمين إلى اليسار تلقائيًا.</p> 29 </div> 30</body> 31</html>
HTMLのdir属性は、要素内のテキストの書字方向（文字が書かれる順序）を指定するためのグローバル属性です。この属性はほとんどすべてのHTML要素で使用でき、特に多言語を扱うWebページで重要となります。
dir属性自体に、プログラミング言語の関数のような「引数」や「戻り値」といった概念はありませんが、以下の3つの値を指定することで、その挙動を制御します。
dir="ltr": テキストを左から右へ表示するよう指定します。これは多くの言語（日本語、英語など）で標準的な書字方向であり、dir属性が指定されない場合のデフォルトの動作です。dir="rtl": テキストを右から左へ表示するよう指定します。アラビア語やヘブライ語などの言語で用いられる書字方向です。dir="auto": ブラウザが要素内のコンテンツに基づいて、書字方向を自動的に判別するよう指定します。これにより、同じ要素内に異なる書字方向の言語が混在する場合でも、ブラウザが適切に表示を調整します。
サンプルコードでは、これらの各値がどのようにテキストの表示に影響するかを示しています。例えば、div要素にdir="rtl"を設定すると、その中のアラビア語やヘブライ語のテキストが正しく右から左へ表示されることを確認できます。dir="auto"の例では、日本語の段落は左から右へ、アラビア語の段落は自動的に右から左へと表示されます。このようにdir属性を使うことで、国際化されたWebページにおいて、ユーザーの言語に応じた適切なテキスト表示を実現できます。
dir属性は、HTML要素内のテキストの書字方向を指定するグローバル属性です。日本語や英語などのほとんどの言語は左から右へ書くため、デフォルトのltrが適用され、明示的な指定は通常不要です。しかし、アラビア語やヘブライ語のように右から左へ書く言語を扱う場合は、dir="rtl"を適切に指定しないと、文字の表示順やレイアウトが意図せず崩れてしまいます。dir="auto"はブラウザが内容を基に自動判別しますが、短いテキストや数字のみのコンテンツでは正確な判別が難しい場合があるため注意が必要です。この属性は、多言語対応するWebサイトの国際化において、コンテンツの意味的な方向性を正しく伝えるために非常に重要な役割を果たします。
HTML dir="ltr" で左から右の書字方向を指定する
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML dir="ltr" の例</title> 7</head> 8<body> 9 <!-- 10 dir="ltr" は、この要素内のテキストが左から右へ書かれる 11 書字方向（Left-to-Right）であることを示します。 12 これは、日本語や英語など、多くの言語における標準的なテキストの向きです。 13 --> 14 <p>この段落のテキストは左から右へと表示されます。</p> 15 <p>これはHTMLドキュメント全体に設定された dir="ltr" の効果を示しています。</p> 16 17 <div dir="ltr"> 18 <p>このdiv要素内のテキストも左から右に表示されます。</p> 19 <p>一般的なウェブサイトでは、この方向がデフォルトとして使われます。</p> 20 </div> 21</body> 22</html>
HTMLのdir属性は、ウェブページ内のテキストがどの方向から書かれるか、つまり書字方向を指定するためのグローバル属性です。グローバル属性とは、ほとんどすべてのHTML要素に適用できる共通の属性を指します。この属性自体には、関数のような引数や戻り値はありません。
サンプルコードではdir="ltr"という値が使われています。ltrは「Left-to-Right」の略で、「左から右へ」とテキストが進む書字方向を示します。これは日本語や英語など、多くの言語で標準的に使用されるテキストの向きです。
コードの<html>タグにdir="ltr"が設定されているため、このウェブページ全体のテキストは左から右へと表示されます。また、<div dir="ltr">のように、特定の要素に対して個別にdir="ltr"を設定することも可能です。このように設定することで、そのdiv要素内のテキストも確実に左から右に表示されます。
dir属性は、コンテンツの言語に応じてテキストの表示方向を適切に制御するために利用されます。一般的なウェブサイトでは、今回のように左から右への書字方向がデフォルトとして使われます。
dir="ltr"は、テキストの書字方向を左から右（Left-to-Right）に指定するHTMLのグローバル属性です。日本語や英語など、多くの言語ではこの方向が標準です。
サンプルコードのように<html>要素に設定すると、ドキュメント全体の書字方向を決定します。また、特定の要素にのみdir="ltr"を設定することも可能です。
多くのウェブブラウザはデフォルトで左から右の表示を行うため、dir="ltr"を明示的に指定しなくても通常は正しく表示されます。しかし、多言語サイトを開発する場合や、将来の変更を考慮して意図を明確にしたい場合に設定すると良いでしょう。右から左に書く言語（アラビア語やヘブライ語など）に対応する場合はdir="rtl"を使用しますので、間違えないように注意してください。