CSS 論理的プロパティと値
CSS 論理的プロパティと値 (CSS Logical Properties and Values) は 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-colorborder-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-styleborder-widthmargin(logicalExperimental キーワード)margin-blockmargin-block-endmargin-block-startmargin-inlinemargin-inline-endmargin-inline-startpadding(logicalExperimental キーワード)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(blockおよびinlineキーワード)text-align(endおよびstartキーワード)
非推奨のプロパティ
offset-block-endNon-standard 非推奨 (inset-block-endに置き換え)offset-block-startNon-standard 非推奨 (inset-block-startに置き換え)offset-inline-endNon-standard 非推奨 (inset-inline-endに置き換え)offset-inline-startNon-standard 非推奨 (inset-inline-startに置き換え)
ガイド
仕様書
| Specification |
|---|
| CSS Logical Properties and Values Level 1 |
ブラウザーの互換性
完全な互換性情報は、それぞれのプロパティページを参照してください。