CSS 論理的プロパティと値

CSS 論理的プロパティと値 (CSS Logical Properties and Values) は CSS のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。

このモジュールは以前に CSS 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。

ブロックとインライン

論理プロパティと値は、ブロックとインラインという抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、書字方向に依存します。

ブロック方向

行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。

インライン方向

行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。

リファレンス

寸法のプロパティ

マージン、境界、パディングのプロパティ

浮動と位置指定のプロパティ

その他のプロパティ

非推奨になったプロパティ

ガイド

• 論理的プロパティと値の基本概念
• 寸法の論理的プロパティ
• マージン、境界、パディングの論理的プロパティ
• 浮動と位置指定の論理的プロパティ

仕様書

ブラウザーの対応

全般的な対応:

• Firefox はプロパティの対応付けに対応しています。 — 物理的なものに論理的なものに直接対応付けます。
• Chrome はバージョン69から、プロパティの対応付けに対応しました。
• Edge が現在のところ対応していません。
• Firefox 66 は二つの値の一括指定の対応を導入し、 Chrome ではフラグで隠しています。

互換性情報全体は、それぞれのプロパティページを参照してください。