CSSの論理プロパティ(margin-inline-start など)を使う主な利点として正しいものはどれですか?
1〜4キーで選択、Enterで回答できます
解説
正解は「書字方向(writing-mode や direction)に応じて」です。論理プロパティは「左・右・上・下」という画面上の物理的な方向ではなく、文章が流れる方向を基準に指定します。そのため、横書き・縦書きや、アラビア語のような右から左に書く言語に切り替えても、スタイルを書き直さずにレイアウトが追従します。inline と block という2つの軸論理プロパティは次の2つの軸で考えます。inline 方向:文字が並ぶ方向。日本語の横書きなら左右ですblock 方向:行が積み重なる方向。横書きなら上下です.card { margin-inline-start: 1rem; /* 左から右の言語では左、右から左の言語では右のマージン */ padding-block: 8px; /* 横書きでは上下、縦書き(writing-mode: vertical-rl)では左右 */ inline-size: 20rem; /* 横書きでは width と同じ意味 */ }誤答が当てはまらない理由「画面幅に応じて値が自動で調整され」は誤りです。論理プロパティが追従するのは書字方向であり、画面幅ではありません。幅に応じた調整には clamp() やメディアクエリを使います。「対応する物理プロパティ(margin-left など)より詳細度が高く」は誤りです。詳細度(どのルールを優先するかを決める強さ)はセレクタで決まり、プロパティの種類は影響しません。「Flexbox や Grid のコンテナ内でだけ使え」は誤りです。論理プロパティはどの要素にも使えます。Flexbox の主軸・交差軸とは別の概念です。margin-left と margin-inline-start を併記すると後に書いた方が勝つ横書き・左から右の言語では、margin-left と margin-inline-start は同じ辺を指します。両方を指定すると、詳細度が同じ場合は後に書いた宣言が優先されます。既存の物理プロパティを段階的に論理プロパティへ置き換える途中で、意図しない値が効いて混乱しやすいポイントです。1つのコンポーネント内ではどちらかに統一しましょう。参考CSS 論理的プロパティと値 - CSS | MDN