作曲・浄書・指導・音響

金沢音楽制作

金沢音楽制作では、楽曲・楽譜の制作と、作曲や写譜などレッスンを行っています。


[前]〈記事一覧〉[次]

23)CSS変数

ネイティブなCSSで変数が使えるらしく、使ってみました。といっても今更なんで、使用頻度の高い値(色)だけです笑。CSS変数の正しい名称は、「CSS custom properties for cascading variables」で、CSSカスタムプロパティ、CSS変数などと呼ばれているようです。

変数の使い方は、(1)ある文字(文字列)を変数として宣言する。(2)その変数に数字や文字(文字列)といった値を代入する。(3)変数を参照することで値を利用する。というものです。CSS変数は、セレクタ(.classや:root)にプロパティとして宣言・代入し、var(変数名)で参照します。

変数を使用するメリットは、変数に代入する値を変更するだけで、同名の変数の値が全て変更できる点です。例えば、今回の変更では、同じ色(#fefefe)を12箇所で使っていました、もし色を変更したい場合には、12 箇所全てを変える必要があります。しかし、変数を使えば、代入値を変更するだけの一箇所で済みます。

CSS変数はChromeやSafari、Edgeといったモダンブラウザで対応しています。しかし、Internet Explorerといったレガシーブラウザは未対応なので、レイアウトが著しく崩れます(上下部のリストの文字色が初期色の青に)。2013年に開発終了しているInternet Explorerを使う理由が良くわからないので、対策はしないことにしました。(可能性としては図書館や公民館などで使える、市民に開かれたパソコンか。)

2018/03/19


[前]〈記事一覧〉[次]