CSS 論理プロパティ

論理プロパティとは？

論理プロパティは、CSSにおける比較的新しい概念で、文書の書字方向や読み取り方向に応じて適切に動作するプロパティです。

マージン関連:

margin-inline-start
margin-inline-end
margin-block-start
margin-block-end

パディング関連:

padding-inline-start
padding-inline-end
padding-block-start
padding-block-end

ボーダー関連:

border-inline-start
border-inline-end
border-block-start
border-block-end

サイズ関連:

inline-size
block-size

margin-inlineの具体例を示します。

.example {
  margin-inline: 40px 60px;
}

最初の値（40px）がmargin-inline-startに適用されます。
2番目の値（60px）がmargin-inline-endに適用されます。

.example {
  margin-inline: 50px;
}

margin-inline-startとmargin-inline-endと50pxが適用されます。

margin-inlineのメリットは文書の書字方向（LTRやRTL）に関わらず一貫したレイアウトを実現できることです。同じCSSコードで異なる言語や書字方向のサイトに対応できるため、多言語サイトの開発が簡単になります。

以下の例では、従来のmargin-leftとmargin-rightを使用したスタイリングと、margin-inlineを使用したスタイリングを比較しています。

    <h2>LTR Layout</h2>
    <div class="container">
        <div class="box traditional">Traditional: margin-left: 20px; margin-right: 40px;</div>
        <div class="box logical">Logical: margin-inline: 20px 40px;</div>
    </div>

    <h2>RTL Layout</h2>
    <div class="container rtl">
        <div class="box traditional">Traditional: margin-left: 20px; margin-right: 40px;</div>
        <div class="box logical">Logical: margin-inline: 20px 40px;</div>
    </div>

        .container {
            width: 300px;
            border: 2px solid #333;
            margin-bottom: 20px;
        }
        .box {
            background-color: #f0f0f0;
            border: 1px solid #999;
            padding: 10px;
        }
        .traditional {
            margin-left: 20px;
            margin-right: 40px;
        }
        .logical {
            margin-inline: 20px 40px;
        }
        .rtl {
            direction: rtl;
        }