プログラミング

プログラミング

「CSS変数」の基本的な使い方を解説!コードの管理・維持もこんなに楽に!

202 views

本稿ではCSS変数についてお話します。

 

全体として2つのセクションに分かれており、ひとつはCSS変数の作り方、もうひとつはCSS変数の使い方についてご説明します。

 

 

CSS変数とは?

 

変数は現在プリプロセッサ用のみならず、CSS全体でおなじみの存在となっています。SASSのようなCSSプリプロセッサにおいて、変数は非常にウケがいい機能です。

 

EdgeとInternet Explorerを除いたブラウザでのサポートも充実しており、コーディングにおいて、変数は簡単に利用できます。(上表参照)

 

CSS変数の宣言の仕方

 

CSS変数はスタイルシートの一番上の「:root(コード)」pseudo-classで定義されるのがベストです。「:root(コード)」はあなたのDOM構造でもっとも高いレベルの親を参照します。通常はHTMLタグです。これは一種の共通セレクタです。

 

これによって、コードは整理され、変数の宣言も一度で済みます。

 
このpseudo-class「:root(コード)」はセレクターとして機能します。変数は、直前の2つのダッシュと値を伴った名前によって記されます。


 

CSS変数の正しい使い方

 

変数を使うことで、コード上に問題を引き起こす可能性があります。例えば以下の変数宣言。

もし上記コードの赤を青に変えたいとすれば、それはスタイルシートをまたがって間違った変数の名前をつけてしまったか、変数を個々の状況に合わせて変更しなければならない場合でしょう。

 

簡単に早く編集するために変数を使いたくても、これらの問題を避けたいという気持ちが障害になるのではないでしょうか?

 

正しくCSS変数を記述するためのプロセスは2つのステップに分かれ、ざっくり以下のようなものです。


もしスタイルシートで異なる色合いの赤を使いたい場合は、「–red:」変数を使うだけで変更できます。

 

 

実用的な使用例

 

CSS変数にはたくさんの実用的な(そして非実用的な)使い方があります。以下に大まかに説明していきます。

 

ColorStyle Guide

変数を使えば、Style Guidesを簡単につくり、修正することができます。

Margin  Padding

変数を用いて容易にデフォルトのmarginとpaddingを定義することができます。


Height  Width

CSS calc() を使って関係のあるものを計算することができて面白いです。

 

まとめ

他にも様々な用途があります。変数を自分に合うように使ってみましょう。

 

ただし、あまり多くの変数を使うとごちゃごちゃしやすいのでご注意を。もし良ければ以下のコードもチェックしてみてください!このページ上で編集できるデモです。

 

 

CSS変数デモ

 

See the Pen CSS Variables Blog Post by ZingChart (@zingchart) on CodePen.


(※本稿は「How To Use CSS Variables」を翻訳・再編集したものです)

関連記事

おすすめ記事