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

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

ブロックとインライン

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

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

リファレンス

寸法のプロパティ

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

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

その他のプロパティ

  • caption-side (inline-end  および inline-start  キーワード)
  • resize  (block  and inline  keywords)
  • text-align (end  および start  キーワード)

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

ガイド

仕様書

仕様書 状態 備考
CSS Logical Properties and Values Level 1 編集者草案 初回定義

ブラウザーの対応

全般的な対応:

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

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

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, chrisdavidmills
最終更新者: mdnwebdocs-bot,