ウェブサイトに RTL 対応を追加する方法：アラビア語・ヘブライ語ほか（2026年版）
アラビア語とヘブライ語の話者を合わせると、インターネット利用者の数億人に相当します。右から左（RTL） への対応は、ウェブチームが取り組める国際化の中でも特に投資対効果の高い決断のひとつであり、 多くの開発者が思う以上に扱いやすいものです。
RTL がウェブ開発において意味すること
HTML における RTL の基本的な仕組みは dir 属性です。<html> 要素に dir="rtl" を設定すると、ブラウザは ドキュメント全体を右から左でレンダリングします。
実際には、これによって複数のブラウザの挙動が同時に変化します。
- →テキストの整列は左ではなく右がデフォルトになります。
- →flex の方向が鏡映しになります — LTR で左から右へ流れる要素は、右から左へ流れるようになります。
- →マージンとパディングの物理的な値は反転しません — 論理プロパティの相当値だけが反転します。
- →スクロール位置は右端から始まります。
RTL 表示が必要な言語には、アラビア語、ヘブライ語、ペルシア語（ファルシ）、ウルドゥー語、クルド語（ソラニ）が含まれます。ターナ文字（モルディブ語）などの一部の文字体系も RTL ですが、ウェブ上の利用者ははるかに少数です。
2つのアプローチ：論理 CSS と物理 CSS
CSS には間隔や整列を表現する方法が2つあります — 物理的（画面の端に紐づく）と論理的（テキストの方向に紐づく）です。この違いを理解することが、RTL 開発の核心です。
| 物理プロパティ | 論理的な相当値 | RTL での挙動 |
|---|---|---|
margin-left | margin-inline-start | RTL では右に反転 |
margin-right | margin-inline-end | RTL では左に反転 |
padding-left | padding-inline-start | RTL では右に反転 |
padding-right | padding-inline-end | RTL では左に反転 |
text-align: left | text-align: start | RTL では右揃えになる |
border-left | border-inline-start | RTL では右に移動 |
横にスクロールしてすべての列を確認できます。
Tailwind CSS は論理プロパティに対応するユーティリティを提供しています。 ms-* / me-* は margin-inline 用、 ps-* / pe-* は padding-inline 用、 text-start / text-end は整列用です。物理的なクラスの代わりに これらを使えば、追加の CSS なしでレイアウトが RTL で正しく反転します。
よくある RTL の落とし穴
論理プロパティを導入していても、特に注意が必要な UI パターンがいくつかあります。
方向性のあるアイコン
矢印、シェブロン、進捗インジケーター、パンくずリストの区切り、再生・早送りボタンなど、 方向を示すアイコンは RTL では鏡映しにすべきです。「次へ」を意味する右向き矢印は、 アラビア語では左向き矢印になるべきです。SVG アイコンは [dir="rtl"] セレクタの下で transform: scaleX(-1) を適用して 鏡映しにできます。方向的な意味を持たないアイコン（チェックマーク、星、電話）は鏡映しにすべきではありません。
アラビア語と英語が混在するコンテンツ（双方向テキスト）
Unicode の双方向アルゴリズムは混在スクリプトのコンテンツを自動的に処理しますが、 アラビア語とラテン文字が同じ段落に現れると予期しない結果になることがあります。 アラビア語の文中に含まれるインライン LTR コンテンツ（英語の商品名など）はブラウザが処理しますが、 方向の異なるテキストに隣接する句読点が正しくない位置に表示されることがあります。 レイアウトだけでなく、実際のコンテンツパターンをテストしてください。
数字は常に LTR
RTL のドキュメントであっても、数字（1、2、3…）は常に左から右にレンダリングされます。 電話番号、価格、日付は RTL の流れの中でも LTR の順序に従います。アラビア数字（٠١٢٣٤٥٦٧٨٩）は 一部の地域的な文脈で使われる例外ですが、RTL テキスト中の西洋アラビア数字は常に左から右です。
コードブロックは LTR のままに
コード、ターミナル出力、プログラミング構文は、ドキュメント全体の方向に関わらず常に LTR で レンダリングされなければなりません。 <pre> と <code> 要素に明示的に dir="ltr" を適用するか、 [dir="rtl"] code { direction: ltr; } のような CSS ルールを使用してください。
ローカルで RTL をテストする方法
RTL レンダリングをテストする最も速い方法は、ブラウザの DevTools で直接行うことです — 言語切り替えやサーバー側の変更は不要です。
- 1DevTools（F12 または Cmd+Option+I）を開き、Console タブを選択して次を実行します：
document.documentElement.dir = "rtl"。 リロードなしでページが即座に RTL に切り替わります。 - 2または、Elements パネルで
<html>要素を選択し、dir="rtl"属性を直接追加します。 - 3すべてのページとインタラクション状態をスクロールして確認します。特に、ナビゲーションメニュー、 モーダルとドロワー、フォームレイアウト、テーブル、絶対配置や固定配置を使うコンポーネントに注意してください。
Firefox と Chrome はどちらも RTL を正しくレンダリングし、この種のテストに信頼できます。 macOS の Safari も、アラビア語のシステムレベルのフォントレンダリングを確認するのに有用です。
訪問者に自動で RTL を提供する
Lingvit を翻訳に使うと、RTL レイアウトの切り替えは自動的に処理されます。訪問者がアラビア語、 ヘブライ語、ペルシア語、ウルドゥー語に切り替えると、Lingvit は次を設定します。
訪問者が LTR の言語に切り替え直すと、再び dir="ltr" が設定されます。LTR の 訪問者にはまったく影響がありません — この属性は RTL 言語を選択したユーザーに対してのみ切り替わります。
論理 CSS プロパティと Tailwind の論理ユーティリティで構築されたほとんどのサイトでは、この属性ひとつの 変更だけで、追加の CSS ルールなしに正しい RTL レイアウトが得られます。
それでも確認が必要なもの
自動 RTL 切り替えがあっても、属性の変更だけでは正しく反転せず、明示的な確認が必要なパターンがいくつかあります。
- ✗絶対配置された要素 —
left: 0やright: 0（物理的）を使うコンポーネントは 反転しません。inset-inline-start/inset-inline-endに置き換えてください。 - ✗方向性のある SVG アイコン — 方向的な意味を持つ矢印やシェブロンには、明示的な
[dir="rtl"]の鏡映しルールが必要です。 - ✗物理的な方向を持つ CSS グラデーションや影 — たとえば、読み方向を視覚的に示す 左から右へのグラデーションなど。
- ✗サードパーティのコンポーネントライブラリ — チャートライブラリ、日付ピッカー、 リッチテキストエディタは、それぞれ独自の RTL 対応設定を別途有効化する必要がある場合があります。
よくある質問
- どの言語に RTL が必要ですか？
- ウェブ上で大きな利用者数を持つ主な RTL 言語は、アラビア語、ヘブライ語、ペルシア語（ファルシ）、ウルドゥー語です。クルド語（ソラニ）も RTL です。ターナ文字（ディヴェヒ語／モルディブ語）も RTL ですが、ウェブでの存在感はより小さいです。ヨーロッパ言語、東アジア、南アジアのスクリプトを含む、それ以外の広く使われている言語はすべて LTR です。
- RTL への切り替えは LTR の訪問者に影響しますか？
- いいえ。dir 属性は、訪問者が RTL 言語を積極的に選択した場合にのみ 'rtl' に設定されます。LTR の訪問者には dir='ltr'（またはデフォルトの LTR）が表示されます。言語設定はブラウザセッションごとに保存されるため、ユーザー間で混同されることはありません。
- ユーザーに影響を与えずに本番サイトで RTL をテストするにはどうすればよいですか？
- プライベート／シークレットウィンドウでページを開き、DevTools を開いて、Console で document.documentElement.dir = 'rtl' を実行してください。これは自分のセッションにのみ影響します。自分のブラウザで Lingvit の言語切り替えをアラビア語に設定すれば、翻訳と RTL 表示の両方を含む完全な体験を確認することもできます。