CSSには論理プロパティってのがあります！
論理プロパティを使うとこれまでの記述がスマートに書けるので覚えておいた方が良いです！
論理プロパティってなに？
これまで下記のような記述を書いた記憶が数えきれないほどありますよね？
.header {
margin: 0 auto;
}
本来topとbottomは0なので指定しなくていいはず…とモヤモヤします。
上下を0で指定しているということから『何か打ち消している』ことを読み手は気にしなくてはいけません…
それなら…
.header {
margin-left: auto;
margin-right: auto;
}
良いのですが冗長的な気がします…。
論理プロパティを使うと…
.header {
margin-inline: auto;
}
ほほーん…。
必要な部分だけを指定できます！
論理プロパティinlineとblockの解説
inlineは水平方向、blockは垂直方向に作用するプロパティです。
.header {
// 物理プロパティ 左右
margin-left: auto;
margin-right: auto;
// 物理プロパティ 上下
margin-top: auto;
margin-bottom: auto;
// 論理プロパティ 左右
margin-inline: auto;
// 論理プロパティ 上下
margin-block: auto;
}
left、right、top、bottomで指定されるプロパティは物理プロパティと呼ばれるようです！
恥ずかしながら初めて知りました…。
論理プロパティはいつ使うのか？
基本的に物理プロパティで記述して良いと思います！
長年運用しているサイトでは物理プロパティで記述されていることが多いと思います。
急に切り替えるとコーディングに統一感がなくなるのでチームで認識をすり合わせてから利用することをオススメします！
startとend
論理プロパティはstartとendがあります。
書き方は下記の通りです。
.header {
// 論理プロパティ 左右
margin-inline-start: auto;
margin-inline-end: auto;
// 論理プロパティ 上下
margin-block-start: auto;
margin-block-end: auto;
}
startというのは要素の始まり、endは要素の終わりです。
左から読む言語であればmargin-inline-startは要素左側のmargin-left、margin-inline-endは要素右側のmargin-rightを指します。
margin-blockも同じ考え方です。
要素が縦書きでコーディングされている場合は、inlineとblockが逆転してblockが水平方向、inlineが垂直方向に作用するプロパティとなります！
論理プロパティはどのプロパティで使える？
一覧を見ましたが一度では覚えられないと思ったので使いながら覚えたいと思います！
よく使うプロパティはwidth、height、margin、padding、border、poition、text-alignかと思います。
下記のURLで一覧をご覧いただけます！
【まとめ】CSSの論理プロパティ
勉強や理解が足りないことが多いと思います…。
CSSの新しい仕様やプロパティを知ることでこれまでのコードが冗長的に感じられます。
対応ブラウザやOSは気にする必要がありますが、新しいものに更新していくことが必要です。
読みやすく、変更しやすいコードを保つために引き続き精進したいと思います！
参考にした記事