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変数の注意点

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

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

-広告-

Anker PowerExpand Direct 7-in-2 USB-C PD メディア ハブ 4K対応 HDMIポート 100W出力 Power Delivery 対応 Thunderbolt 3 USB-Cポート USB-A ポート microSD & SDカード スロット搭載 価格：5999円（税込、送料無料) (2020/10/2時点) 楽天で購入

PD 充電器 RAVPower Type C 急速充電器 90W【GaN (窒化ガリウム)採用/2ポート/折畳式/PD対応/PSE認証済】iPhone 11/11 Pro/11 Pro Ma 価格：7329円（税込、送料無料) (2020/10/2時点) 楽天で購入