【CSS】便利！カスタムプロパティの使いかた（CSS変数）

WEB画面を作成しているとよくある「背景は共通でこの色にしたい」とか「paddingはどこも同じpxにしたい」という事がよくあります。

共通認識を持ってCSSでいろんなところで背景色を指定したり、paddingを指定したりすると、どこかで色を変更することになったりした場合、全部の指定箇所を変更しないといけなくなり大変です。

そんな時に便利なのがCSSのカスタムプロパティです。

正しくは「カスケード変数のためのCSSカスタムプロパティ」というらしいですが、「CSS変数」と言われたり「CSSカスタムプロパティ」と呼ばれたりします。

全画面で共通で同じにしたい色やpxを変数に入れて置き、変数として使う事で、実際にカラーコードやpxを指定するのは1ヵ所で済んでしまうという便利な書き方です。

書き方

まずは最初に変数で値を定義します。

下のように:rootで変数に共通で使いたい値を設定します。
この時、変数は”–”から始まる必要があります。
そして:rootで定義した変数を、var(–変数)と書くことで使う事が出来るようになります。

:root {
    --変数: 値;
}
.main-content {
    background: var(--変数);
}

実際にこのように書くことができます。
:rootで共通で使いたいカラーコードやpxを指定しておいて、それを各処のcssでvarで呼び出して使う事が出来ます。

:root {
    --back-color: #FFFFFF;
    --common-padding: 10px;
}
.main-content {
    background: var(--back-color);
    padding: var(--common-padding);
}
.sub-content {
    border: 1px solid var(--back-color);
    margin-top; var(--common-padding);
}

大規模開発や、複数人での開発をするときは非常に役立つテクニックです。