CSSの関数

個人的「質はともかく継続する」4日目です。

CSSで使える関数

先日はカスタムプロパティについて説明しました。

CSSで変数を扱う

今回は関数についてメモ書きしていきます。

calc()

calc()関数は四則演算を行う関数です。
異なる単位の値の計算も可能です。
主な活躍場面はレスポンシブのときでしょうか。

width: calc(100% - 20px);

attr()

attr()関数はHTML要素の属性値を取得します。
主にcontentプロパティで使われるようです。
私は使ったことがないですが、属性にあらかじめ値を用意して置けるのは便利ですね。

<div data-text="Hello"></div>

div::before {
  content: attr(data-text);
}

counter()

counter()関数はカウンターの値を取得します。
主にリストの番号をカウントするときに使われるようですが、
使う場面があるのか...?

ol {
  counter-reset: section;
}

li::before {
  content: counter(section) ". ";
  counter-increment: section;
}

おわりに

今日はCSSの関数についてメモ書きしてみました。
counter()関数の使い所ってどこなんだろう。。。