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