css-i18n

CSS の国際化

物理的な CSS プロパティ（left、right、margin-left）を論理プロパティ（inset-inline-start、margin-inline-start）に変換すると、RTL のコンテキストでレイアウトが自動的に反転します。

重要な理由： 物理プロパティはテキストの方向ではなく、ビューポートを基準にします。dir="rtl" の場合も margin-left: 16px は左側のままなので、アラビア語、ヘブライ語などの RTL 文字体系で視覚的な流れが崩れます。論理プロパティはテキストの方向に自動的に従います。

---

ステップ 1：スタイリング方法を特定する

プロジェクトで CSS をどのように記述しているかを確認します。スキャンするパターンと参照するファイルが決まります。

次の順に確認します。

1. Tailwind CSS — tailwind.config.* が存在する、または CSS ファイルに @tailwind / @import "tailwindcss" がある場合。references/tailwind.md を参照してください。
2. CSS Modules — *.module.css または *.module.scss に一致するファイルがある場合。references/css-modules-and-vanilla.md を参照してください。
3. CSS-in-JS — styled-components、@emotion/styled、@emotion/css、stitches、vanilla-extract からインポートしている場合。バニラ CSS と同じプロパティのマッピングを camelCase で適用します（ステップ 2 のインラインスタイルのセクションを参照）。
4. バニラ CSS — プレーンな .css または .scss ファイルを使っている場合。references/css-modules-and-vanilla.md を参照してください。
5. インラインスタイル — JSX/TSX に style={{ marginLeft: ... }} がある場合。ステップ 2 の camelCase マッピングを適用します。

プロジェクトで複数の方法が使われていることもよくあります。該当するすべての方法をスキャンしてください。

---

ステップ 2：スキャンして変換する

ファイルごとに作業します。各ファイルで物理的な方向指定プロパティを見つけ、論理プロパティに変換します。

常に変換する（確度が高い）

次のプロパティは、ほぼすべてのケースで安全に変換できます。

マージンとパディング

物理プロパティ	論理プロパティ
margin-left	margin-inline-start
margin-right	margin-inline-end
padding-left	padding-inline-start
padding-right	padding-inline-end

左右を明示した省略記法：

/* Before — 4-value shorthand: top right bottom left */
margin: 0 24px 0 16px;

/* After — use longhand logical properties */
margin-block: 0;
margin-inline-start: 16px;
margin-inline-end: 24px;

左右の値が同じ場合は、inline の省略記法を使います：

/* Before */
padding-left: 16px;
padding-right: 16px;

/* After */
padding-inline: 16px;

位置指定

物理プロパティ	論理プロパティ
left	inset-inline-start
right	inset-inline-end
top	inset-block-start
bottom	inset-block-end

4 辺すべてを設定する場合は、inset の省略記法を使います：

/* Before */
top: 0; right: 0; bottom: 0; left: 0;

/* After */
inset: 0;

テキストの配置

物理プロパティ	論理プロパティ
text-align: left	text-align: start
text-align: right	text-align: end

text-align: center はすでに方向に依存しないため、変更は不要です。

フロートと解除

物理プロパティ	論理プロパティ
float: left	float: inline-start
float: right	float: inline-end
clear: left	clear: inline-start
clear: right	clear: inline-end

ボーダー

物理プロパティ	論理プロパティ
border-left	border-inline-start
border-right	border-inline-end
border-left-color	border-inline-start-color
border-right-color	border-inline-end-color
border-left-width	border-inline-start-width
border-right-width	border-inline-end-width
border-left-style	border-inline-start-style
border-right-style	border-inline-end-style

サイズ指定（あまり一般的ではありませんが、変換する価値があります）

物理プロパティ	論理プロパティ
width	inline-size
height	block-size
min-width	min-inline-size
max-width	max-inline-size
min-height	min-block-size
max-height	max-block-size

サイズ指定に関する注意： width/height の変換は任意で、優先度は低めです。標準的な RTL ではなく、縦書き（CJK の縦書きテキスト）の場合にのみ重要です。プロジェクトが縦書きを明示的にサポートしている場合に限り変換するか、今後の対応に回してください。まずは left/right の変換に集中してください。

オーバーフローとオーバースクロール

物理プロパティ	論理プロパティ
overflow-x	overflow-inline
overflow-y	overflow-block
overscroll-behavior-x	overscroll-behavior-inline
overscroll-behavior-y	overscroll-behavior-block

インラインスタイル（JSX）

同じ変換がキャメルケースにも適用されます。

// Before
<div style={{ marginLeft: 16, paddingRight: 8, textAlign: 'left' }}>

// After
<div style={{ marginInlineStart: 16, paddingInlineEnd: 8, textAlign: 'start' }}>

判断して変換（確度：中）

以下はケースごとに確認してください。方向が意味的なもの（テキストの流れに沿う）なのか、装飾的なもの（常に同じ側）なのかを検討します。

• 4つの物理的な角を指定する境界線の角丸：

  /* Physical corners */
  border-top-left-radius: 8px;
  border-top-right-radius: 0;
  
  /* Logical corners */
  border-start-start-radius: 8px;
  border-start-end-radius: 0;
  

  角の対応関係：top-left = start-start、top-right = start-end、bottom-left = end-start、bottom-right = end-end です。

• transform: translateX()：自動では反転しません。変換がテキストの方向に沿う場合（例：先頭側からスライドインする）、条件分岐または CSS カスタムプロパティが必要です。

  /* Option 1: custom property set by dir attribute */
  :root { --dir: 1; }
  :root[dir="rtl"] { --dir: -1; }
  .slide-in { transform: translateX(calc(var(--dir) * 100%)); }
  
  /* Option 2: dir-aware selectors */
  .slide-in { transform: translateX(100%); }
  [dir="rtl"] .slide-in { transform: translateX(-100%); }
  

• background-position: left/right：位置が意味的な場合（例：入力欄の先頭側に置くアイコン）のみ変換します。装飾的な場合はそのままにします。

• 辺の値が異なる4値のショートハンド：margin: 8px 24px 8px 16px — 左（16px）と右（24px）の値が異なるため、論理プロパティを個別に指定する必要があります。

• scroll-margin-left/right → scroll-margin-inline-start/end

• scroll-padding-left/right → scroll-padding-inline-start/end

変換しないもの

• 意図的に固定された方向：ロケールにかかわらず常に左を指す「戻る」矢印、特定の側に固定する必要があるスクロールバー、キャンバスやゲーム要素の絶対ピクセル位置指定。
• アニメーションのキーフレーム：方向を指定する変換を含む @keyframes は、通常は装飾的です。アニメーションが意味的にテキストの方向に沿う場合のみ変換します。
• writing-mode：このプロパティは軸自体を制御するため、変換の対象ではありません。
• SVG 属性：SVG の x、y、width、height はレイアウトプロパティではなく、座標系のプロパティです。
• 印刷用スタイルシート：@media print のルールは、RTL 変換が必要になることはほとんどありません。

---

ステップ 3：Flexbox と Grid

Flexbox と Grid のレイアウトは dir="rtl" を自動的に尊重するため、CSS を変更しなくても主軸が反転します。つまり、次のようになります。

• justify-content: flex-start は、RTL ではすでに右揃えになります
• order の値は、RTL ではすでに視覚的な順序を逆転させます
• grid-template-columns の列順は、すでに反転します

引き続き注意が必要な点：

• 非対称な値の gap：column-gap と row-gap は方向に依存せず、安全です。変換は必要ありません。
• Flex アイテム内の方向を示すアイコン：「前へ」を意味するアイコンは、RTL では反転させる必要があります。方向を考慮したセレクターと transform: scaleX(-1) を使用するか、RTL 用のアイコンアセットを別途用意します。
• flex-direction: row-reverse：RTL では、row-reverse によってすでに反転した方向がさらに反転し（LTR の視覚的な順序に戻り）ます。LTR で右から左への流れを作るために row-reverse を使用していた場合、RTL では意図しない結果になる可能性があります。意図を確認してください。

---

ステップ 4：ワークフロー

次の優先順位でファイルを処理します（convert スキルのパターンに合わせています）。

1. レイアウトコンポーネント（アプリシェル、サイドバー、ナビゲーションバー、フッター）— すべてのページに影響します
2. 共有コンポーネント（ボタン、カード、モーダル、フォームフィールド）— あらゆる場所で再利用されます
3. ページレベルのスタイル — 1つのビューに固有です
4. ユーティリティ／グローバル CSS — リセットファイル、ベーススタイル、CSS カスタムプロパティ

各ファイル内では、次の手順で進めます。

1. 物理方向プロパティをすべて見つける
2. 各プロパティを「高」「中」「変換しない」に分類する
3. 変換を適用する
4. 視覚的に確認する（ステップ 5）

---

ステップ 5：検証

変換後、LTR と RTL の両方でレイアウトが正しく表示されることを確認します。

1. 方向を切り替える：ブラウザーの DevTools またはアプリのロケール切り替え機能で <html dir="rtl"> を設定します
2. 見た目を確認する：次の点をチェックします。
   • テキストが右端に揃っている
   • マージンとパディングが正しく反転している
   • 配置された要素（ツールチップ、ドロップダウン、サイドバー）が正しい側に表示されている
   • 反転すべきアイコン（ナビゲーションの矢印、「進む」／「戻る」）が反転している
   • 反転すべきでないアイコン（チェックマーク、ユニバーサルシンボル、ロゴ）が反転していない
3. 既存のテストを実行する：リグレッションがないことを確認します。CSS の変更はスナップショットテストに影響する場合があります。
4. エッジケースを確認する：
   • 要素の重なり（absolute/fixed による配置）
   • スクロールコンテナー
   • 水平方向のオーバーフロー

---

よくある注意点

• CSS の direction: rtl と HTML の dir="rtl"：CSS の direction プロパティではなく、必ず HTML の dir 属性を使用します。HTML 属性はセマンティックであり、フォームの動作、キーボードナビゲーション、双方向アルゴリズムに影響します。CSS プロパティが影響するのは視覚的な表示のみです。
• 混在コンテンツ：LTR と RTL のコンテンツが両方あるページ（例：アラビア語のユーザー入力を含む英語の UI）では、dir="auto" を使用するか、コンテンツブロックに明示的に dir 属性を設定する必要があります。論理プロパティは、ネストされた方向コンテキストでも正しく機能します。
• 水平スクロール：overflow-x: auto を指定しても、すべてのブラウザーでスクロールバーの位置が反転するわけではありません。個別にテストしてください。
• サードパーティコンポーネント：UI ライブラリのコンポーネントは、内部で物理プロパティを使用している場合があります。ライブラリが RTL サポートまたは RTL テーマを提供しているか確認してください。
• 値が 2 つの px ショートハンド：margin: 8px 16px は上下と左右を設定しますが、左右には同じ値が適用されるため、正しく機能します。変換が必要なのは、非対称な 4 値ショートハンドのみです。