CSS論理プロパティコンバーターとは
CSS論理プロパティは、物理的な方向ではなく、書字方向に相対的な方向を使用します。Inline（テキストの流れる方向）とBlock（垂直方向）がLeft、Right、Top、Bottomを置き換えます。これにより、同じCSSが左書き、右書き、縦書きの言語でオーバーライドなしで機能します。たとえば、margin-inline-startはLTRでは左側、RTLでは右側に適用されます。
クイックアンサー
margin-leftやpadding-rightなどの物理CSSプロパティを、書字方向に対応した論理的な同等プロパティに変換します。これにより、別途オーバーライドなしで右書きや縦書きモードに自動適応するレイアウトが実現します。
Last updated: 2026-06-11
制限事項
- border-inline、border-block、inset-inlineなどの一部のショートハンド論理プロパティは、コアのロングハンド論理プロパティに比べてブラウザサポートが不十分です。
- このコンバーターは単一プロパティの変換を処理します。大規模なスタイルシートを論理プロパティに移行するには、各物理-論理ペアを更新し、混在方向のエッジケースが残っていないことを確認する必要があります。
- 論理プロパティは、要素のwriting-modeとdirectionに基づいて物理プロパティにマッピングされます。単一のinline-startはLTRではleft、RTLではrightにマッピングされます。つまり、生成されたコードはドキュメントの言語方向によって異なる動作をするため、LTRとRTLの両方のモードでテストする必要があります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 変換したい物理CSSプロパティ（margin-leftやpadding-rightなど）を選択します。
- 利用可能な候補から論理的な同等プロパティを選択します。
- プロパティの値を入力します。
- 論理プロパティ宣言をスタイルシートにコピーし、LTRとRTLの両方の方向でテストします。
主な用途
- RTL言語サポートを必要とする多言語Webサイトで動作するCSSを準備する。
- 別途RTLオーバーライドを必要としない、方向に依存しないコンポーネントスタイルを作成する。
- 最初から論理プロパティを使用することで、別個のRTLスタイルシートの必要性を減らす。