コーディング初心者こそ知っておきたい便利な「CSS関数」5選

HTMLやCSSでホームページのデザインを行うことを、一般的には「プログラミング」とは言わずに「コーディング」と言います。
論理的なバックエンドでの実行処理を考えるプログラミングとは違い、HTMLやCSSは「見え方」や「見た目」の部分に責任を持つことが多く、コードによって「組み立てる」イメージからそのように呼ぶのでしょう。

しかしながら、CSSは通常プロパティと値をセットで指定していきますが、*「CSS関数」*と呼ばれる便利な関数も用意されています。
これらの関数を使うことで、計算を実行したり、条件を指定したり、特定の値を別のフォーマットに変形したりすることができます。

そこで本稿では、*コーディング初心者こそ知っておきたい便利な「CSS関数」*を5つ紹介していきます。
普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用していただきたいです。

コーディング初心者こそ知っておきたい便利な「CSS関数」5選

1. calc()

calc関数はカッコ内の値を計算することができる関数です。

単に計算することができるだけでなく、％やvh、pxといった異なる単位も計算対象になるので、意外と重宝するのではないでしょうか。

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

2. counter()

counter関数は要素を数えることができるもので、例えばリスト要素などで効力を発揮します。

以下のようなHTMLを考えてみましょう。

<ol>
　　<li>池袋で山手線に乗る</li>
　　<li>渋谷で東急東横線に乗り換え</li>
　　<li>自由が丘で下車する</li>
</ol>

スタイルシートを指定していなければ、以下のように出力されます。

　1. 池袋で山手線に乗る
　2. 渋谷で東急東横線に乗り換え
　3. 自由が丘で下車する

一方、以下のようなスタイルシートを適用してみましょう。

body {
　　counter-reset: i;
}
li:before {
　　counter-increment: i;
　　content: “手順” counter(i) “：”;
}

すると、以下のようになります。

　手順1. 池袋で山手線に乗る
　手順2. 渋谷で東急東横線に乗り換え
　手順3. 自由が丘で下車する

3. attr()

attr関数は、要素内の値を展開するための関数です。
HTML5では、「data-」で始まるカスタム属性が使用できるので、attr関数はカスタム属性と一緒に用いられることも多いようです。

例えば、以下のようなHTMLがあるとします。

<li data-label=“ToDo:”>池袋で山手線に乗る</li>

ここに、CSSで以下のような指定をしてみましょう。

li::before {
　　content: attr(data-label);
}

すると、リストの各表示の前に「data-label」で指定したものが表示されるようになります。

ToDo: 池袋で山手線に乗る

上記の例では、JavaScriptやjQueryのDOM操作などで「data-label」の内容を書き換えることもできるので、Webアプリケーションなどで活躍するでしょう。
jQueryでは、ツールチップに表示する内容を「data-label」に入れて表示するように実装することもあります。

5. minmax()

minmax関数は値に数字やキーワードを使って、要素の最小値と最大値を指定していきます。
CSSグリッドレイアウトと一緒に用いることで、簡単なCSSで高度なレスポンシブデザイン対応のレイアウトを作成することができます。

まず、使い方ですが、以下のように最小値と最大値をコンテンツ幅に指定するだけです。

minmax(min, max)

画像引用元：How the minmax Function Works

コンテンツグリッドなどでは、以下のように最大値や最小値を指定してあげることで、レスポンシブの挙動を制御することができます。

.grid {
　　display: grid;
　　grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}

How the minmax() Function Works

6. cubic-bezier()

cubic-bezier関数はやや応用的な関数ですが、ここで紹介しておきます。

近年、WebサイトやWebアプリケーションにおいては、アニメーションを効果的に使用することが一般的になってきました。
しかし、「linear」や「ease-in」など、簡単に使えるようなプロパティオプションはある程度固定されており、オブジェクトをより自分の思い通りに扱うには別の方法を取らなければいけません。
また、バウンスのように複雑なアニメーションを表現するにはJavaScriptのアニメーションライブラリーなどを使う必要があります。

しかし、cubic-bezier関数を使うことで、自分でアニメーションの動かし方を決めることができます。

cubic-bezier関数は、その名の通りアニメーションの軌跡をベジェ曲線のようにして動かして行く方法で、以下の4つのバラメーターを0から1の間で指定していきます。

transition: cubic-bezier(P1x,P1y,P2x,P2y)

例えば、4点にPの座標を取るときには、以下の図のようになります。

画像引用元：Understanding CSS Bezier

ポイントは、すべての値は0から1の間で値を指定することと、P0とP3は値がすでに決まっていることです。
P0は常に(0,0)、P3は常に(1,1)なので、実質的にP1とP2の値を決めることになります。

画像引用元：CSS cubic-bezier Builder

ただし、数学的なことを考えるのが面倒に感じる場合には、CSS cubic-bezier Builderのように自動でベジェ曲線の値を決めてくれるツールもあるので、こちらを利用してもよさそうです。

まとめ

CSS関数は他にもさまざまありますが、こうした関数をうまく使うことで、従来のCSSの問題を解決するだけでなく、より創造的にCSSを操作することができるようになります。

calcのような一般的に使われているような関数もあれば、cubic-bezierのようにやや応用的な関数もありますが、ぜひ自分に必要な関数を取り入れて、日頃の開発に役立ててみてください。