CSS 論理的プロパティと値は CSS のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。
このモジュールは以前に CSS 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。
ブロックとインライン
論理プロパティと値は、ブロックとインラインという抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、書字方向に依存します。
- ブロック方向
- 行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。
- インライン方向
- 行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。
リファレンス
寸法のプロパティ
マージン、境界、パディングのプロパティ
border-block
border-block-color
border-block-end
border-block-end-color
border-block-end-style
border-block-end-width
border-block-start
border-block-start-color
border-block-start-style
border-block-start-width
border-block-style
border-block-width
border-color
(logical
キーワード)border-inline
border-inline-color
border-inline-end
border-inline-end-color
border-inline-end-style
border-inline-end-width
border-inline-start
border-inline-start-color
border-inline-start-style
border-inline-start-width
border-inline-style
border-inline-width
border-start-start-radius
border-start-end-radius
border-end-start-radius
border-end-end-radius
border-style
(logical
キーワード)border-width
(logical
キーワード)margin
(logical
キーワード)margin-block
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
padding
(logical
キーワード)padding-block
padding-block-end
padding-block-start
padding-inline
padding-inline-end
padding-inline-start
浮動と位置指定のプロパティ
clear
(inline-end
およびinline-start
キーワード)float
(inline-end
およびinline-start
キーワード)inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
その他のプロパティ
caption-side
(inline-end
およびinline-start
キーワード)overflow-block
overflow-inline
overscroll-behavior-block
overscroll-behavior-inline
resize
(block
andinline
keywords)text-align
(end
およびstart
キーワード)
非推奨になったプロパティ
offset-block-end
(inset-block-end
に置き換え)offset-block-start
(inset-block-start
に置き換え)offset-inline-end
(inset-inline-end
に置き換え)offset-inline-start
(inset-inline-start
に置き換え)
ガイド
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Logical Properties and Values Level 1 | 編集者草案 | 初回定義 |
ブラウザーの互換性
全般的な対応:
- Firefox はプロパティの対応付けに対応しています。 — 物理的なものに論理的なものに直接対応付けます。
- Chrome はバージョン69から、プロパティの対応付けに対応しました。
- Edge はバージョン79から Chrome と同様に対応しています。
- Firefox 66 は二つの値の一括指定の対応を導入し、 Chrome ではフラグで隠しています。
- Internet Explorer は対応していません。
互換性情報全体は、それぞれのプロパティページを参照してください。