CSS Logical Properties and Values

Transcript

1. CSS Logical Properties and Values
2. marginとかpaddingを設定するときどうしてます？ margin-topとかpadding-leftって指定している？ それは間違いではないです でも、今はそう書きません margin-block-start、padding-inline-startって書きます！ これを論理プロパティ（Logical Propaties）って言います
3. 論理プロパティ レイアウトの方向を物理的ではなく論理的に制御します CSS Writing Modesでコンテンツの方向は定義されます アラビア語は右書き、日本語だと縦書きなどあるので CSS Grid、Flexboxは既に論理プロパティでの指定になっています
4. 論理プロパティ レイアウトの方向を物理的ではなく論理的に制御します CSS Writing Modesでコンテンツの方向は定義されます アラビア語は右書き、日本語だと縦書きなどあるので CSS Grid、Flexboxは既に論理プロパティでの指定になっています
5. 論理プロパティ 例えば、普段の日本語サイトだと左から右へ文字を書きます アラビア語では右から左に書きます そのため、text-align: leftって物理プロパティで書いてると、direction: rtlって指定してもアラビア語なのに左寄せになってしまいます 論理プロパティの場合はtext-align: startとします
6. 論理プロパティ direction: rtl;
7. 論理プロパティ text-align: start;
8. 論理プロパティはインライン方向（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 論理プロパティ
9. インライン方向はコンテンツの流れる方向を意味します なので、横書きの場合にはには水平方向、縦書きの場合には垂直方向 になります 書き方はinline-start、inline-endです インライン方向
10. ブロック方向はコンテンツの流れと垂直の方向を意味します なので、横書きの場合にはには水平方向、縦書きの場合には垂直方向 になります 書き方はblock-start、block-endです ブロック方向
11. 要素のサイズも物理プロパティではなく、コンテンツのフローに併せて論 理プロパティで書くことができます そうすれば、縦書き、横書きで要素のサイズを切り替えられます 横書き（英語・アラビア語）の場合 widthは、inline-sizeに heightは、block-sizeに 縦書き（日本語）の場合 widthは、block-sizeに heightは、inline-sizeに 高さと幅
12. positionの座標も論理プロパティで書けます ただ、英語の場合にtop = block-startとはなりません top = inset-block-startです inset-*を付けるのでめんどくさそうですが、物理プロパティではできな かった省略記法が使えるのでかなり便利です positionの座標 inset: 0 0 0 0; top: 0px; bottom: 0px; left: 0px; right: 0px;
13. - Chrome、Firefoxでは既に対応済みです（IE11？なんのこと？） - それから、物理プロパティがなくなるわけではありません - 影を付ける場合などでは物理的な意味合いも強いので、そのまま物理プ ロパティが使われると思われます - それにアラビア語や縦書きに対応することなんて、そうそうないかと思うの で、物理プロパティで書いても問題はないかもしれません - ただ個人的な意見ですが、これからのレイアウトなどはFlexboxやCSS Gridが使われるのですから、併せて論理プロパティで指定するほうがキレ イではないかと個人的には思います まとめ
14. 参考 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