CSS

CSS変数を宣言してみよう

CSS変数の使い方について見たあとに、コードを書いて実装していきます。

  • --my-color
  • var()
  • CSS変数の注意点

--my-color

・まず変数の特徴として変更に強いというメリットがあります。

・例えばサイトのテーマカラーをオレンジにしたが後で青にしたかった場合通常のCSSで書いていくとカラーを指定している箇所を手作業をすべて直さなければいけませんがCSS変数を指定しておけば最初の指定だけを変えればすべての箇所を自動で変えてくれます。

・ではやり方について学んで行きます。まず単純にHTMLではh1とpタグを付けてテキストを書いていきます。

・CSS 変数を宣言するのですが、 CSS 変数の名前は必ず -- で始まる点に注意してください。

・たとえば --my-color: orange; と書くと orange の値の代わりに --my-color を使えるようになります。

var()

・CSS 変数を使う方法ですが、 var() 関数を使ってそちらに変数名を渡してあげれば OK です。

・例えば文字色を指定した色にしたい場合はcolor: var(—my-color);としてあげると予め--my-colorに代入していた色で指定ができます。

CSS変数の注意点

・大文字と小文字を区別するので間違えないように確認をしましょう。大文字と小文字を間違えると別のもとして扱われ指定の名前ではないと判断されるのでもし挙動がおかしい場合はチェックしてみましょう。

・変数に値が指定されていなかった場合のデフォルト値も設定することができます。その場合はカンマで区切ってその後に何色にするかを指定します。

-広告-

 

 






-CSS