まだブログのデザインが決まっていないので色や配置などをちょこちょこ変更しています。いろんな場所に同じ色番号を書くのがめんどくさいので変数をつかってみました。
変数とは
一か所で数値や文字列を定義して名前を決めておくと、別の場所でその名前を書くと定義済みの数値などを書いたのと同じになります。
イメージ
名前(変数名)を決める
「AAA」という名前(変数名)に色番号「#000000」を定義する。
名前(AAA)= #000000
別の場所で使用
色を名前(変数名)で指定する。
color = 名前(AAA)
が color = #000000
と同じ意味になります。
こんな感じの使い方
名前(AAA)= #000000 color = 名前(AAA) color = 名前(AAA) color = 名前(AAA)
上の #000000
を変更すれば下の3か所を全て変更したのと同じになります。
実際の使い方
名前(変数名)を決める
:root { --charactor-color: #454545; }
--charactor-color
が名前(変数名)にになります。
別の場所で使用
body { background-color: var(--charactor-color) ; }
が
body { background-color: #454545 ; }
これと同じ意味になります。
こんな感じで使っています
いくつか色を定義して、いろんな場所で使用しています。
/* カラー定義 */ :root { --main-color: #5DB98B; --background-color: #f5f5f5; --box-background-color: #f0f0f0; --frame-color: #ddd; --charactor-color: #454545; } /* 背景色 */ body { background-color: var(--background-color); } /* ブログタイトルの文字色 */ #title a{ color: var(--main-color); } . . .
シンタックスカラーを「css」で定義していますがうまくいっていません、なんでだろう?