MonCSS変数とは?上手に使って業務の効率をUP!BY.伊藤#WebプログラミングHOMEWebプログラミングCSS変数とは?上手に使って業務の効率をUP!こんにちは、ジーニアスウェブの平です。普段はcssで何かのデザインを作ることはあまりないのですが、最近cssで変数が使えるということを知ったので、ご紹介しようと思います。variables)」です。プログラミングでよく使われている変数と同じような方法で使用することができます。CSS変数のメリット例えば、CSSで様々なタグに設定している数値やカラーコードは一つずつに入力していたと思います。一つのサイトで数値やカラーコードが一つも統一されていないということは滅多になく、各パーツごとにいくつか統一された値があると思います。これらの値を変数に入れることで設定を統一できることや値に変更があった際に、変数の値だけを修正すれば良いので簡単でメンテナンスもしやすいです。CSS変数の定義では早速、CSSの変数の定義について説明していきます。css変数は変数名の前に「–」を書きます。変数名は適当なものを命名してください。(単語を区切りたいときはハイフンを使います)コロンで区切った後に変数に入れたい値を書きます。black;変数を定義する方法は大きく分けて二つあります。一つは各セレクタに定義する方法。一つは:rootに定義する方法です。セレクタに定義することによってその変数を使う場所を制限することが出来るので、誤って同じ名前の変数で設定してしまったとしても、それぞれ別のセレクタに定義されていれば値が混在することはありません。rootに定義するとセレクタごとの制限がないため、css内の全体で変数の値を使用することが出来ます。上記で書いたような問題が起きる可能性があるため、定義づけする際は注意が必要です。使用する値のセレクタが限られている場合は、念の為セレクタで定義することをおすすめします。black;}:rootを使った変数定義を行った際、下記のように:rootの後にセレクタで再定義し値を設定した際は、値が更新され再定義した時の値に設定されます。red;}//--main-content-colorの値はredになります。変数の呼び出し続いて、変数を呼び出し方です。変数を呼び出すときは「var(–変数名)」で呼び出せます。var(--main-content-color);下記は実際に呼び出した際の例です。var(--main-content-color);}同じ変数名だったとしても下記のように大文字・小文字で分けられている場合は、別々の変数として認識されます//小文字var(--main-content-color);//大文字var(--MAIN-CONTENT-COLOR);まとめ今回はCSS変数についてまとめてみました。CSS変数はJavascriptやJqueryで値を動的に変化させることが可能です。これまで実現が難しかったアニメーションなどこの変数を使うことで可能になるかもしれません。皆さんもぜひ使ってみてください。DOWNLOAD顧客獲得に成功した24社の成功事例を1冊にまとめました。顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。中小企業のweb集客、知らないと損する5つの方法#中小企業のホームページ運用いま依頼している「ホームページ制作会社」に不満がある方へ#中小企業のホームページ運用ホームページ制作会社を選ぶコツは?選び方や比較するポイントをまとめましたFACEBOOKCOMPANYジーニアスウェブは大阪、東京、宮崎に拠点をおく新規客獲得に強いホームページ制作会社です。2006年4月の設立以来、全国1400社以上のお客様にサービスを提供しています。お客様がより高いパフォーマンスを達成できるよう、その実現に向けてお客様とともに取り組んでいます。