CSSカスタムプロパティのとりあえずのメモ
CSSカスタムプロパティとは 基本的にはMDNに記載されますが要するにCSSに変数を定義して、関数で値を使えるようになる感じです。 :rootという擬似クラスを使用して、変数を設定します。以下、サンプルです。 :root { --primaryColor: #4525F2; --primaryActiveColor: #4324EA; --primaryDisabledColor: #4324EA; --secondaryColor: #F2F4F8; --secondaryDisabledColor: #E9ECF2; --White: #FFF; --Black: #1C2126; --Gray: #8B8B8B; } 変数名の付け方 変数名なのでなんでもいいんですが、わかりやすい方がいいので以下サイトを参考に自分でちょこちょこ変えてます https://material.io/design/color/the-color-system.html#color-theme-creation 意味のあるものは`Active`とか`Disabled`とかの名前をつけてあげて、意味のないものは`300`とか`700`とかをつけてあげるのが良いかと。 変数名をつけた方が良い要素 色 font-family（複数様々な場所で指定する場合） font-size margin padding border フォントサイズやマージンは数値を設定するだけなので、変数名の方が長くなってしまいあんま意味ないと思いがちです。 が、一番最初にメディアクエリを指定して画面サイズに応じて数値の設定をすると、どの画面サイズでもデザインとユーザービリティ両方を担保できるようになるので使い勝手がいいです。 以下見本です。 @media screen and (min-width:480px) { :root { --heading1Size: 24px; --heading2Size: 22px; } } @media screen and (min-width:768px) and ( max-width:1024px) { :root {
