【CSS】カスタムプロパティ（変数）を使用する

こんにちは、今回はCSSでカスタムプロパティ（変数）を使用する方法を紹介したいと思います。

少し前までは対応しているブラウザなどに制限があり、なかなか使用することが出来ませんでした。

ですがIE11のサポートも終了し、ここ最近で特定のWindowsのバージョンでは代わりにEdgeが強制的に起動するようになりました。

なので今一度対応ブラウザを確認してみたところ、IEはもう無視出来そうだし使ってもよさそう！とのことで簡単に紹介したいと思います。

対応ブラウザについては以下をご参考下さい。

→Can I use…

この機能で何が出来るかと言うと、様々な値（例：カラーコード、px値など様々）を変数として格納して他で使いまわすことができます。

では基本的な使い方を説明していきます。開発者用ドキュメントのリンクも以下に載せときますね。

→MDN

まずカスタムプロパティを定義します。以下のように:root疑似クラスを利用することでHTML文書全体で使用できるようになります。

注意点として、カスタムプロパティにはハイフン2つを先頭に付ける必要があります。

例としてカスタムプロパティを2つ定義してみました。呼び出したい場合は以下のようにvar(カスタムプロパティ名)と記述します。

書き方さえ覚えてしまえば簡単です。あとは特定の要素以下でカスタムプロパティを上書きしたいという場合には以下のように再定義してください。

基本的な使い方は以上になります。

細かいカスタムプロパティのルールなどは開発者向けドキュメントをご参照ください。

予め利用する色や横幅などの決まりごとなどを:rootで全て定義して、あとは呼び出すだけという形にしてあげればWEBサイトを制作・運用する上でとても楽になりますね。

本来SassなどでやっていたことがCSSでできるようになったので、これは非常に嬉しいですね。

とても便利機能なので是非どんどん使用していきましょう！

以上クリエイターズブログでした。