超実践! CSS変数の活用方法

全3回

このシリーズではCSS変数(CSS Variables)のさまざまな活用方法について触れます。CSS変数を上手に利用することで、これまで難しかった指定ができるようになることがわかります。

最終回 がんばろうJS編:JavaScriptと連携して活用する

最終回はCSS変数をJavaScriptで利用する例を紹介します。JavaScriptの処理結果をCSS変数で受け取ることもできますし、CSS変数の値を受け取って、JavaScriptで利用することもできます。

第2回 ちょっと複雑編:変数を計算して活用する

今回はCSS変数を計算式の値として利用したり、入れ子にして使用する方法を紹介します。一見すると複雑そうに見えますが、CSS変数の値がどのように利用され、適用されているかをていねいに追えば大丈夫です。

第1回 シンプル編:指定した値を活用する

CSS変数を使った実装のアイデアを紹介します。第1回では、CSS変数で指定した値をどんなふうに利用できるのかにフォーカスします。CSS変数を使うと通常はできなかった値の使い回しが可能になることがわかります。