ウェブサイトに RTL 対応を追加する方法：アラビア語・ヘブライ語ほか（2026年版）

RTL がウェブ開発において意味すること

HTML における RTL の基本的な仕組みは dir 属性です。<html> 要素に dir="rtl" を設定すると、ブラウザは ドキュメント全体を右から左でレンダリングします。

実際には、これによって複数のブラウザの挙動が同時に変化します。

• →テキストの整列は左ではなく右がデフォルトになります。
• →flex の方向が鏡映しになります — LTR で左から右へ流れる要素は、右から左へ流れるようになります。
• →マージンとパディングの物理的な値は反転しません — 論理プロパティの相当値だけが反転します。
• →スクロール位置は右端から始まります。

RTL 表示が必要な言語には、アラビア語、ヘブライ語、ペルシア語（ファルシ）、ウルドゥー語、クルド語（ソラニ）が含まれます。ターナ文字（モルディブ語）などの一部の文字体系も RTL ですが、ウェブ上の利用者ははるかに少数です。

2つのアプローチ：論理 CSS と物理 CSS

CSS には間隔や整列を表現する方法が2つあります — 物理的（画面の端に紐づく）と論理的（テキストの方向に紐づく）です。この違いを理解することが、RTL 開発の核心です。

横にスクロールしてすべての列を確認できます。

Tailwind CSS は論理プロパティに対応するユーティリティを提供しています。 ms-* / me-* は margin-inline 用、 ps-* / pe-* は padding-inline 用、 text-start / text-end は整列用です。物理的なクラスの代わりに これらを使えば、追加の CSS なしでレイアウトが RTL で正しく反転します。

よくある RTL の落とし穴

論理プロパティを導入していても、特に注意が必要な UI パターンがいくつかあります。

ローカルで RTL をテストする方法

RTL レンダリングをテストする最も速い方法は、ブラウザの DevTools で直接行うことです — 言語切り替えやサーバー側の変更は不要です。

1. 1DevTools（F12 または Cmd+Option+I）を開き、Console タブを選択して次を実行します： document.documentElement.dir = "rtl"。 リロードなしでページが即座に RTL に切り替わります。
2. 2または、Elements パネルで <html> 要素を選択し、dir="rtl" 属性を直接追加します。
3. 3すべてのページとインタラクション状態をスクロールして確認します。特に、ナビゲーションメニュー、 モーダルとドロワー、フォームレイアウト、テーブル、絶対配置や固定配置を使うコンポーネントに注意してください。

Firefox と Chrome はどちらも RTL を正しくレンダリングし、この種のテストに信頼できます。 macOS の Safari も、アラビア語のシステムレベルのフォントレンダリングを確認するのに有用です。

訪問者に自動で RTL を提供する

Lingvit を翻訳に使うと、RTL レイアウトの切り替えは自動的に処理されます。訪問者がアラビア語、 ヘブライ語、ペルシア語、ウルドゥー語に切り替えると、Lingvit は次を設定します。

document.documentElement.dir = "rtl";

訪問者が 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 対応設定を別途有効化する必要がある場合があります。

よくある質問