●ページ一覧での左右余白を変数で整理する
意図
ページ一覧画面の左右の余白はウィンドウサイズに応じて値が変化する
余白に応じて値を変えたいものがある時、その度にウィンドウサイズで分けて指定するのは煩雑
案カスタムプロパティ（変数）を設定する
つまりウィンドウサイズに応じた計算は最初にやっておく
（記述の場所は冒頭でなくても良い）
そして余白の値を使う場合には変数を呼び出す
※カスタムプロパティ（変数）とは
ハイフン2つ ( -- ) で始まる名前をつける
ここで使われていない名前をつけること
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 などと名付けて設定する
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内に一回書けば良い