CSSの論理プロパティの使い方を徹底解説、margin-block-start, margin-inline-endなど

CSSでマージンを与える際に、margin-left, margin-rightのように物理プロパティを使用している思います。もちろん問題はないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会も増えてくると思います。 CSSの論理プロパティの基礎知識、inlineとblockの仕様、論理として使用できるプロパティ、論理プロパティの実装例を紹介します。 Digging Into CSS Logical Properties by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに writing-modeによるinlineとblockの違い inlineとはどういう意味ですか？ startとendを正しく理解する 論理として使用できるプロパティは何ですか？ 論理プ

[coliss]

CSSの論理プロパティの基礎知識、使い方を解説。

[spark7]

RTL対応を考えると必要な考え方。

[shirotorabyakko]

margin-block: calc((1em - 1lh) / 2);

[itochan]

難しい…　::before とかあったはずなのに 　https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements なのに、start みたいな単語を混ぜてくるわかりにくさ

[kagioo2uma]

多言語対応のために

[lilpacy]

物理プロパティ/論理プロパティ