HomeMokun Engineer Blog

CSS の論理的プロパティについて

論理的プロパティとは？

従来の margin-left や margin-right など物理的な方向に基づく定義ではなく、論理的な方向に基づいて定義できるものです。
全てのプロパティは紹介しきれないので、いくつか代表的なものだけ挙げます。

これらは書字方向に基づいて、値を定義します。

書字方向と論理プロパティの関係性

writing-mode で書字方向を変える事が出来ます。
デフォルト値は、horizontal-tb で垂直方向は上から下、水平方向に左から右になります。
つまり、margin-block-start の場合、垂直方向の start、つまり上側に margin が入ります。
※ 書字方向を変えられる CSS プロパティは、他にも direction、text-orientation などがありますが、ここでは取り扱いません。

writing-mode によって、inline、block の定義が変わる

では、margin-inline-start の場合、margin はどこに入るのでしょうか？
それは左側に入ります。
なぜ左側になるのでしょうか？
その前にここで言う block と inline の違いから説明します。
margin-block や margin-inline の block や inline は、display の inline や block とは無関係ではありますが、イメージは似ています。
block 要素は、上からスタックされていき、inline 要素は左から右に流れていきますね。
writing-mode がデフォルト値の horizontal-tb の場合、全く同じになります。
inline は左から右なので start が左になり、margin-inline-start の場合、左側に margin が入る訳ですね。
ですが、vertical-rl を指定した場合、どうでしょう。
inline が上から下になり、block が右から左になります。
vertical-rl で margin-inline-start の場合は、上側に margin が入ります。
このように、writing-mode によって、inline、block の定義を変える事ができます。

論理プロパティが生まれた背景

かつては、主に英語などの左から右に読む言語のみを前提として、CSS は開発されてきました。
ですが、より様々な言語、より多くの人々が直感的にスタイリングできるようにするために論理プロパティや書字モードが生まれました。

参考文献

CSS Writing Modes Level 3
CSS Logical Properties and Values Level 1
CSS 書字方向
writing-mode
CSS 論理的プロパティと値