CSSの論理プロパティは、レイアウトを言語や書字方向に依存しない形で指定するためのプロパティです。これにより、ウェブページが異なる言語や文化に応じたレイアウトを自動的に調整できるようになります。
通常のCSSプロパティは、上下左右を基準にしていますが、論理プロパティは開始【start】や終了【end】、ブロック【block】やインライン【inline】といった、書字方向に依存しない概念を使います。例えば、書字方向が左から右の場合、startは左側になりますが、右から左の場合には右側になります。
物理プロパティに対応する論理プロパティ
width / height
- 物理プロパティ
- 論理プロパティ
- width
- inline-size
- max-width
- max-inline-size
- min-width
- min-inline-size
- height
- block-size
- max-height
- max-block-size
- min-height
- min-block-size
margin
- 物理プロパティ
- 論理プロパティ
- margin-top
- margin-block-start
- margin-bottom
- margin-block-end
- margin-left
- margin-inline-start
- margin-right
- margin-inline-end
- margin-topとmargin-bottom
- margin-block
- margin-leftとmargin-right
- margin-inline
- margin: 0 auto;
- margin-inline: auto
padding
- 物理プロパティ
- 論理プロパティ
- padding-top
- padding-block-start
- padding-bottom
- padding-block-end
- padding-left
- padding-inline-start
- padding-right
- padding-inline-end
- padding-topとpadding-bottom
- padding-block
- padding-leftとpadding-right
- padding-inline
border
- 物理プロパティ
- 論理プロパティ
- border-top
- border-block-start
- border-bottom
- border-block-end
- border-left
- border-inline-start
- border-right
- border-inline-end
- border-topとborder-bottom
- border-block
- border-leftとborder-right
- border-inline
border-radius
- 物理プロパティ
- 論理プロパティ
- border-top-left-radius
- border-start-start-radius
- border-top-right-radius
- border-start-end-radius
- border-bottom-left-radius
- border-end-start-radius
- border-bottom-right-radius
- border-end-end-radius
position
- 物理プロパティ
- 論理プロパティ
- top
- inset-block-start
- bottom
- inset-block-end
- left
- inset-inline-start
- right
- inset-inline-end
- topとbottom
- inset-block
- leftとright
- inset-inline
- topとrightとbottomとleft
- inset
text-align
- 物理プロパティ
- 論理プロパティ
- text-align :left;
- text-align: start;
- text-align :right;
- text-align: end;
¥2,585 （2025/08/14 11:41時点 | Amazon調べ）
ポチップ