CSSの関数、利用してる？簡単に使用できる便利なCSS関数まとめ

おはようございます、hgmです。

皆さんはCSS関数を利用されていますか？

普段コーディングをされる方ならご存知かと思いますが、

通常CSSは「プロパティ: 値」で指定するのですが、CSS関数を使用することで計算や条件を指定できる便利な機能があります。

そこで今回は、普段のコーディングに使用できそうな便利な関数をピックアップし、使用例も私なりに考えてみましたのでご紹介させていただきます！！

1. calc()

calc関数は、CSSの値で計算できる関数です。

加算（+）、減算（-）、乗算（*）、徐算（/）ができ、組み合わせ可能！

さらに単位（px、em、vwなど）は形式を揃える必要はありません。

入れ子も可能なので、複雑な計算も可能です。

便利なのでぜひ覚えてください。

基本形

プロパティ: calc(計算式);

使用例

投稿などで、ボックスを複数横並びで表示するとき

See the Pen
BbKeOJ by hgm (@hgm_universe)
on CodePen.

上記の例でいくと、三等分にしたいためcalc関数を使用。

さらに要素の間を開けたいため関数内で100%÷3を計算後、0.5%サイズを小さくしました。

このポイントとしては、関数を使用すれば「100÷3=33.33333…」のように割り切れない値が出ても手打ちで入力しなくても良い、というところです。

通常は値が大きくなると電卓などを使用し手打ち入力しなければなりませんが、その計算は関数がしてくれるので無駄な時間を省けますね。

2. rgba()

色の指定に加え、透過度をできる関数です。

透過といえばopacityプロパティをよく使うかと思いますが、

例えば文字の入ったボックスの背景を透過させる場合、背景だけでなく文字も透けてしまいます。

少し説明が難しいため、実際に例をご覧ください！笑

基本形

プロパティ: rgba(赤, 緑, 青, 透過度);

使用例

背景だけを透過させたい場合

※比較ができるよう、上にopacity、下にrgba関数を使用しています。

See the Pen
YgWKNy by hgm (@hgm_universe)
on CodePen.

大元のdivに青い背景を指定し中のdivを白い背景に50%の透過させているのですが、上のopacityは文字まで透けています。

一方、下のrgba関数は文字は透けていないのがわかります。

背景画像を使用した際などに発揮できますね！

3. var()

変数を宣言・参照することができます。

何度も使用するbackgroundやcolorなどに幅広く使用できます。

基本形

宣言が必要です。

–変数名 : 値;

プロパティ: var(–変数名);

使用例

codepenは対応していませんでしたが・・・

/* 変数宣言 */
--bg: #6a9cff;

.box{
  padding: 10px;
  background: var(--bg);
}

<div class="box">
  <p>テキスト</p>
</div>

–bgという変数名をつけ、宣言します。

.boxのbackgroundで参照しています。

こちらはIEでは未対応だそうで、注意が必要です。

まとめ

いかがでしたでしょうか？

どれもすぐに取り入れられる関数なので、どんどん取り入れ時短しましょ〜！

他にもCSS関数がいろいろあるので、ステップアップしたい方は調べてみてくださいね。