右から左へ書くテキストのdir=rtl
アラビア語、ヘブライ語などのRTL言語で右から左へのレイアウトを有効にします
「右から左へ書くテキストのdir=rtl」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
dir属性の役割
dir属性は、要素の基準となるテキスト方向を宣言します。dir="ltr"（左から右、ほとんどの言語のデフォルト）またはdir="rtl"（右から左、アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語用）を指定します。
サイト全体をRTLにするためhtmlに設定する
アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語のサイトでは、ルート要素にdir="rtl"を設定します。これにより、すべてのブロックのデフォルトの流れが反転します。テキストは右揃えになり、リストは右にインデントされ、スクロールバーは左に移動し、最新のCSSではレイアウトが自動的に左右反転します。
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>双方向テキスト
英語のブランド名が埋め込まれたアラビア語など、方向が混在するテキストは、Unicode Bidirectional Algorithmに従って自動的に処理されます。基準方向（dirで指定）は、行レベルで一方向のセグメントを配置する方法を決めます。個々の文字列は、それぞれのスクリプトにおける自然な方向に従って流れます。
CSS論理プロパティ
最新のCSSでは、方向に適応する論理プロパティを使用します。margin-inline-start（LTRでは左、RTLでは右）、padding-inline-end、border-inline-startなどです。left/rightをstart/endに置き換えると、1つのスタイルシートで両方の方向に対応できます。
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}FlexboxとGridは自動的に適応する
Flexboxの行方向はdirを尊重するため、RTLでは項目が右から左へ流れます。Gridのテンプレート列も反転します。つまり、FlexやGridで記述したほとんどのレイアウトは、方向専用のCSSなしでRTLに対応できます。最新のレイアウトは方向に依存しません。
反転させるべきアイコン
方向を示すアイコン（戻る矢印、次へ矢印、元に戻す/やり直す）は、RTLでは反転させる必要があります。[dir="rtl"]内でCSSのtransform: scaleX(-1)を使用するか、RTL用に別のSVGを用意します。検索、設定、歯車など方向を示さないアイコンはそのままにします。
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}テキストの配置
text-align: leftよりもtext-align: startを優先してください。startはLTRでは左、RTLでは右として解決されます。endも同様です。方向を考慮した配置にすると、RTL対応を追加する際のバグを減らせます。
要素ごとのdir上書き
要素にdir="auto"を設定すると、ブラウザーは最初に現れる強い方向性を持つ文字から方向を検出します。<p dir="auto">{user.name}</p>のように記述すれば、ユーザーが送信した名前がアラビア語、英語、または混在していても、個別の分岐なしで処理できます。
Bidiの埋め込み
bdi（双方向分離）要素とbdo（双方向上書き）要素を使うと、bidiアルゴリズムが特定のテキストを処理する方法を細かく制御できます。ユーザー入力をそのまま再現する場合や、流れるテキスト内のコードスニペットに特定の方向を強制する場合に便利です。
フォームフィールド
入力欄は親要素からdirを継承します。方向が変化するユーザー入力（多言語ユーザーがいるチャットアプリなど）では、個々の入力欄にdir="auto"を設定すると、それぞれの内容に基づいて正しく表示できます。
RTLレイアウトをテストする
ブラウザーでは、DevToolsのコンソールでdocument.documentElement.dir = "rtl"を一時的に設定して、RTLをプレビューできます。アイコンの向き、padding/margin、スクロールバーの位置、そしてstart/endに置き換えるべきハードコードされたleft/rightがないことを確認してください。
CSSのdirectionとレイアウト方向は異なる
CSSのdirectionプロパティとHTMLのdir属性は、ほとんどのレイアウトで同じ効果を持ちます。支援技術、メーラー、その他の利用者も読み取れるHTML属性を優先してください。CSSプロパティはブラウザーでの描画にしか影響しません。
理解度チェック
RTL言語に対応する場合、margin-leftよりもmargin-inline-startのようなCSS論理プロパティが好まれるのはなぜですか？
まとめ
<html>にdir="rtl"を設定すると、アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語のサイトの基準方向が反転します。CSS論理プロパティ（margin-inline-start、padding-block-end）は自動的に適応します。Flexbox/Gridのレイアウトも変更なしで反転します。方向を示すアイコンは反転させ、text-alignにはstart/endを使用し、方向が不明なユーザーコンテンツにはdir="auto"を使用してください。
よくある質問
「右から左へ書くテキストのdir=rtl」レッスンは無料ですか？
はい。「右から左へ書くテキストのdir=rtl」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「右から左へ書くテキストのdir=rtl」で何を学びますか？
アラビア語、ヘブライ語などのRTL言語で右から左へのレイアウトを有効にします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「右から左へ書くテキストのdir=rtl」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- lang属性とスクリーンリーダー
- 右から左へ書くテキストのdir=rtl
- bdi要素とbdo要素
- charsetとUnicodeの処理：特殊文字