CSS辞書

Logical Properties

レイアウト・配置

書字方向(横書き・縦書き)に依存しない論理的なプロパティです。margin-inline-start、padding-block-endなど、方向に中立的な指定が可能です。

構文

Syntax
margin-inline | margin-block | padding-inline | padding-block | inset-inline | inset-block

Tailwindでは

一般形: ms-* / me-*(margin-inline-start/end)、ps-* / pe-*、start-* / end-*

v4は物理系ユーティリティ(mx-*等)の実体も論理プロパティ(margin-inline)で出力される。RTL対応はms-*/me-*を選ぶ。

コード例

1

margin-inline-start: 20px;
実行結果
書字方向対応レイアウト

テキスト開始側にマージン(横書きなら左、縦書きなら上)

2

padding-block: 10px 20px;
実行結果
サイドバー
メインコンテンツ

ブロック方向のパディング(横書きなら上下)

💡 TIPS

国際化対応に最適。RTL言語でも自動対応

🤖 AIがよく間違えるポイント

論理プロパティ(inline/block系)と物理プロパティ(left/right系)の混在は、上書き関係が読めない保守困難なCSSを生みます。AIはプロジェクトの方針を確認せず混ぜてくるので、「論理で統一」等の方針を最初に伝えるのが有効です。RTL・縦書き要件がなくても、margin-inline: autoなど記述が短くなる場面は多くあります。

💬 AIへの頼み方

このスタイルシートの物理/論理プロパティの混在を監査して、論理プロパティに統一して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

ブラウザサポート

Baseline 広く利用可能
Chrome
69+
Firefox
41+
Safari
12.1+
Edge
79+