CSS Logical Properties and Values

marginとかpaddingを設定するときどうしてます？ margin-topとかpadding-leftって指定している？それは間違いではないですでも、今はそう書きません margin-block-start、padding-inline-startって書きます！これを論理プロパティ（Logical Propaties）って言います

論理プロパティレイアウトの方向を物理的ではなく論理的に制御します CSS Writing Modesでコンテンツの方向は定義されますアラビア語は右書き、日本語だと縦書きなどあるので CSS Grid、Flexboxは既に論理プロパティでの指定になっています

論理プロパティ例えば、普段の日本語サイトだと左から右へ文字を書きますアラビア語では右から左に書きますそのため、text-align: leftって物理プロパティで書いてると、direction: rtlって指定してもアラビア語なのに左寄せになってしまいます論理プロパティの場合はtext-align: startとします

論理プロパティ direction: rtl;

論理プロパティ text-align: start;

論理プロパティはインライン方向（Inline axis）とブロック方向（Block axis）で記述します普段書き慣れている英語の場合にはこんな感じになります margin margin-block-start = margin-top margin-block-end
= margin-bottom margin-inline-start = margin-left margin-inline-end = margin-right 論理プロパティ

インライン方向はコンテンツの流れる方向を意味しますなので、横書きの場合にはには水平方向、縦書きの場合には垂直方向になります書き方はinline-start、inline-endですインライン方向

ブロック方向はコンテンツの流れと垂直の方向を意味しますなので、横書きの場合にはには水平方向、縦書きの場合には垂直方向になります書き方はblock-start、block-endですブロック方向

要素のサイズも物理プロパティではなく、コンテンツのフローに併せて論理プロパティで書くことができますそうすれば、縦書き、横書きで要素のサイズを切り替えられます横書き（英語・アラビア語）の場合 widthは、inline-sizeに heightは、block-sizeに縦書き（日本語）の場合 widthは、block-sizeに heightは、inline-sizeに高さと幅

positionの座標も論理プロパティで書けますただ、英語の場合にtop = block-startとはなりません top = inset-block-startです inset-*を付けるのでめんどくさそうですが、物理プロパティではできなかった省略記法が使えるのでかなり便利です positionの座標
inset: 0 0 0 0; top: 0px; bottom: 0px; left: 0px; right: 0px;

- Chrome、Firefoxでは既に対応済みです（IE11？なんのこと？） - それから、物理プロパティがなくなるわけではありません - 影を付ける場合などでは物理的な意味合いも強いので、そのまま物理プロパティが使われると思われます - それにアラビア語や縦書きに対応することなんて、そうそうないかと思うので、物理プロパティで書いても問題はないかもしれません
- ただ個人的な意見ですが、これからのレイアウトなどはFlexboxやCSS Gridが使われるのですから、併せて論理プロパティで指定するほうがキレイではないかと個人的には思いますまとめ

参考 CSS Logical Properties and Values Level 1 https://www.w3.org/TR/css-logical-1/ Can
I use Logical Properties ? https://caniuse.com/#search=Logical%20Properties もしも桃太郎が一行がITのスタートアップだったら https://anond.hatelabo.jp/20190526220716 New CSS Logical Properties! https://medium.com/@elad/new-css-logical-properties-bc6945311ce7

CSS Logical Properties and Values

CSS Logical Properties and Values

Kaneko Takeshi

More Decks by Kaneko Takeshi

Other Decks in Technology

Featured

Transcript