CSSの論理的プロパティとは何ですか？また、国際化にとって重要な理由は何ですか？

Question

Accepted Answer

**論理的プロパティ**は、物理的な方向（左/右/上/下）ではなく、**コンテンツのフロー方向**（開始/終了、インライン/ブロック）でレイアウトを記述します。これにより、単一のスタイルシートが右から左に書く言語（アラビア語、ヘブライ語）または上から下に書く言語に自動的に適応します。 ## なぜ重要なのか物理的なプロパティでは、アラビア語をサポートするために、`[dir="rtl"]`の背後に鏡像化されたスタイルのセット（`margin-left` → `margin-right`など）全体を書く必要があります。論理的プロパティでは、**同じCSSが単に機能します** — htmlで`dir="rtl"`を設定すると、`margin-inline-start`は自動的に右側に反転します。 ```html ``` ## RTL以外論理的プロパティは、縦書きモード（例：東アジアのタイポグラフィ）も処理し、`margin-inline: auto`を方向に関係なく中央揃えするための清潔な方法にします。 ## 物理的対論理的 ```css /* ❌ physical — hard-codes "left", breaks in RTL languages */ .card { margin-left: 1rem; padding-right: 2rem; text-align: left; border-left: 2px solid; } /* ✅ logical — follows the writing direction */ .card { margin-inline-start: 1rem; /* "start" = left in LTR, RIGHT in RTL */ padding-inline-end: 2rem; text-align: start; border-inline-start: 2px solid; } ``` ## 2つの軸 - **inline** — テキストが流れる方向（英語では水平；「読み」軸）。 - **block** — 行が積み重なる方向（英語では垂直；「段落」軸）。 ```css margin-inline: 1rem; /* left + right in LTR (both inline sides) */ margin-block: 2rem; /* top + bottom */ margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */ padding-block-end: 1rem; /* bottom in horizontal writing */ inset-inline-start: 0; /* logical version of left/right for positioning */ ``` 複数の言語で配信されるすべての製品について、論理的プロパティは鏡像化されたRTLスタイルシートを維持する必要性を排除します — 単一のルールセットが書き方向に適応します。 LTRのみのサイトであっても、より清潔な思考モデル（開始/終了、インライン/ブロック）であり、最新のCSSで推奨される標準になりつつあります。