概要
CSSを書くとき、サイズ指定や色指定で同じ値を何度も打ち直すことがある。このように同じ値を常にコードとして打ち込むのは手間・ミスの素であり、メンテナンス上もよろしくない。
こういうとき、カスタムプロパティーを使うと、値を変数のように定義しておいて、何度も再利用できる。
書式
--[カスタムプロパティー名]: [値];
値
再利用するための値で、数値、色コードなど、プロパティーの値で指定可能なもの。
動作確認
以下のことを確認している。
- CSS内全域で共通のカスタムプロパティーを定義
- –common-bg-color
- parentクラスでカスタムプロパティーを定義
- –face-color
- –common-bg-colorはbody要素、childクラスの要素のいずれにも反映
- –face-colorはparentクラスの要素と、その子であるchildクラスの要素には反映されるが、parentクラスの要素から独立したchildクラスの要素には反映されない
HTMLファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>カスタムプロパティーのテスト</title> <link rel="stylesheet" href="css_custom_property.css"> </head> <body> <div class="parent"> 親ブロック <div class="child"> 親の下の子ブロック </div> </div> <div class="child"> 独立した子ブロック </div> </body> </html> |
CSSファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
:root { --common-bg-color: #e0ffff; } body { background-color: var(--common-bg-color) } .parent { --face-color: #ff00ff; width: 300px; height: 200px; margin: 20px; background-color: #f5deb3; border: solid 2px #ff0000; color: var(--face-color) } .child { width: 200px; margin: 20px; color: var(--face-color); background-color: var(--common-bg-color); border: solid 2px #0000ff } |
