facebooktweetはてブLINEPocketfeedlyおはようございます、hgmです。値」で指定するのですが、CSS関数を使用することで計算や条件を指定できる便利な機能があります。calc()calc関数は、CSSの値で計算できる関数です。加算(+)、減算(-)、乗算(*)、徐算(/)ができ、組み合わせ可能!さらに単位(px、em、vwなど)は形式を揃える必要はありません。入れ子も可能なので、複雑な計算も可能です。便利なのでぜひ覚えてください。CodePen.上記の例でいくと、三等分にしたいためcalc関数を使用。要素の間を開けたいため関数内で100%÷3を計算後、0.5%サイズを小さくしました。このポイントとしては、関数を使用すれば「100÷3=33.33333...」のように割り切れない値が出ても手打ちで入力しなくても良い、というところです。通常は値が大きくなると電卓などを使用し手打ち入力しなければなりませんが、その計算は関数がしてくれるので無駄な時間を省けますね。rgba()色の指定に加え、透過度をできる関数です。文字の入ったボックスの背景を透過させる場合、背景だけでなく文字も透けてしまいます。※比較ができるよう、上にopacity、下にrgba関数を使用しています。CodePen.大元のdivに青い背景を指定し中のdivを白い背景に50%の透過させているのですが、上のopacityは文字まで透けています。下のrgba関数は文字は透けていないのがわかります。var()変数を宣言・参照することができます。何度も使用するbackgroundやcolorなどに幅広く使用できます。class="box"><p>テキスト</p></div>–bgという変数名をつけ、宣言します。.boxのbackgroundで参照しています。こちらはIEでは未対応だそうで、注意が必要です。まとめいかがでしたでしょうか?どれもすぐに取り入れられる関数なので、どんどん取り入れ時短しましょ〜!他にもCSS関数がいろいろあるので、ステップアップしたい方は調べてみてくださいね。facebooktweetはてブLINEPocketfeedly関連記事この記事を書いた人hgm農業高校出身フロントエンドエンジニアの社員hgmです。猫センサー搭載済みの愛猫家。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。MAX】2018年10月19日10今話題のLINEのオープンチャットとは?実際に参加してみた2019年09月11。