普段使いできそうなCSSの関数4つ

CSS 2.1の頃からあるやつ

url()

言わずもがな

body {
    background : url(images/image.jpg);
}

counter()

数字を数えられるCSSさん

<ol>
    <li>肉と野菜を炒める</li>
    <li>水を入れ中火で煮込む</li>
    <li>カレーのルーを入れる</li>
</ol>

body {
    counter-reset: i;
}
li:before {
    counter-increment: i;
    content: "カレーの作り方: " counter(i) "に";
}

実例

応用すればFizzBuzzとかできちゃう

使いそうな場面
cssのcounter()って便利だよなーって話

attr()

要素の値を展開

<p data-foo="hello">world</p>

p:before {
    content:attr(data-foo) " ";
}

実例

使いそうな場面: 印刷のときとか

こないだいった<a href="http://daisuki-nippon.com">美味しいカレー屋さん</a>で食べたカツカレー

@media print{
    a:after{content:" (" attr(href) ") "}
}

実例

CSS3の関数

calc()

計算できるCSSさん

<div class="banner">よくあるバナーです！</div>

.banner {
    width: calc(100% - 80px);
    margin-left: 40px;
}

実例

追記

transform()

CSSで3Dとか

var()

まだ動作しないけど、変数

<h1>こんにちは！</h1>

:root {
  main-color: #06c;
  accent-color: #006;
}
h1 {
  color: var(main-color);
}

実例

おしまい。

それ、CSSでできるよ >(^o^ )