書字方向(横書き・縦書き)に依存しない論理的なプロパティです。margin-inline-start、padding-block-endなど、方向に中立的な指定が可能です。
margin-inline | margin-block | padding-inline | padding-block | inset-inline | inset-block一般形: ms-* / me-*(margin-inline-start/end)、ps-* / pe-*、start-* / end-*
v4は物理系ユーティリティ(mx-*等)の実体も論理プロパティ(margin-inline)で出力される。RTL対応はms-*/me-*を選ぶ。
margin-inline-start: 20px;テキスト開始側にマージン(横書きなら左、縦書きなら上)
padding-block: 10px 20px;ブロック方向のパディング(横書きなら上下)
国際化対応に最適。RTL言語でも自動対応
論理プロパティ(inline/block系)と物理プロパティ(left/right系)の混在は、上書き関係が読めない保守困難なCSSを生みます。AIはプロジェクトの方針を確認せず混ぜてくるので、「論理で統一」等の方針を最初に伝えるのが有効です。RTL・縦書き要件がなくても、margin-inline: autoなど記述が短くなる場面は多くあります。
このスタイルシートの物理/論理プロパティの混在を監査して、論理プロパティに統一して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。