CSSで関数を使えることをご存知でしょうか？上手に活用すると、簡潔に記述できたり、変更に強いコードになります。ここでは、知っていると便利なCSS関数について取り上げます。
目次
rgba()｜色指定
rgba関数を利用して、色の指定をすることができます。赤 (red) 緑 (green) 青 (blue) 透過度 を指定します。
/* 80%半透明の緑 */
rgba(51, 170, 51, .8)opacityとの使い分け
opacityは背景色と文字色の両方に透過度が反映されます。rgbaを利用すると背景色と文字色のどちらか片方だけ透過度を反映させることができます。
例を示します。
See the Pen rgba & opacity by waku-waku (@raku-raku) on CodePen.
var()｜変数
var関数を利用して、変数を参照することができます。
/* 変数宣言 */
--padding: 16px;
.content {
/* 変数参照 */
padding: 8px var(--padding);
}calc()｜計算（加減乗除）
calc関数を利用して、加算(+) 減算(-) 乗算(*) 除算(/) ができます。
/* 優先させたい計算に () を利用します */
width: calc((500px - 10px) / 2);
/* %とpxの計算もできます */
width: calc(100% - 80px);counter()｜使用回数をカウント
See the Pen counter by waku-waku (@raku-raku) on CodePen.
counter関数を利用して、利用回数を表示することができます。目次などに活用できます。
