●ページ一覧での左右余白を変数で整理する
意図
ページ一覧画面の左右の余白はウィンドウサイズに応じて値が変化する
余白に応じて値を変えたいものがある時、その度にウィンドウサイズで分けて指定するのは煩雑
案カスタムプロパティ（変数）を設定する
つまりウィンドウサイズに応じた計算は最初にやっておく
（記述の場所は冒頭でなくても良い）
そして余白の値を使う場合には変数を呼び出す
※カスタムプロパティ（変数）とは
ハイフン2つ (--) で始まる名前をつける
ここで使われていない名前をつけること
table:margin
ウィンドウサイズW 余白値（片側） 計算した値
1261px≦W (100vw - 1200px)*0.5+8px 50vw - 592px
992px≦W 30px+8px 38px
768px≦W 15px+8px 23px
W≦767px 8px 8px
ここで余白と呼んでいるものは、containerのpadding:8pxとmargin（可変）を足し合わせたもの
変数名を適当に--margin-sideなどと名付けて設定する
code:style.css
@media screen and (min-width: 1261px) {
:root {--margin-side: calc(50vw - 592px);}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
:root {--margin-side: 38px;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
:root {--margin-side: 23px;}
}
@media screen and (max-width: 767px) {
:root {--margin-side: 8px;}
}
変数について
この変数名は適当なので、一般的な名付けとして変などという場合は何か自由に設定する
頭にハイフンを2つ (--) つけること
変数の値はvar(--margin-side)で呼び出すことができる
例ウィンドウサイズが1000pxの時
left: var(--margin-side);と書くと、上記の条件設定によりleft: 38px;を設定した状態となる
のらてつ研究所内でこの変数を使用しているCSS
ほかsettings内の細かいもの
※単独で使用される可能性を想定して全ての箇所に上記のコードを記述しているが、実際には当然ながらsettings内に一回書けば良い