全部使ったことある？便利なCSS関数12選！！
- 公開日:
- メンテナンス日:
広告
広告
FAQ
- Sass（SCSS）の変数で calc() を使うとエラーが出るのはなぜ？
- Sass変数（$widthなど）を
calc()の中で使う場合は、インターポレーション（#{$変数名}）で囲む必要があります。例えばwidth: calc(100% - #{$gap});のように記述してください。詳しい Sassでのcalc活用例 を本記事で紹介しています。
- min(), max(), clamp() の使い分けがわかりません。
- 「最大値を制限」したいなら min()、「最小値を確保」したいなら max()、その「両方を同時に制御」したいなら clamp() を使います。特にレスポンシブなフォントサイズ設定には clamp() が最適です。それぞれの 具体的なコード例 をチェックしてみてください。
- calc() 関数の中で単位（pxや%）を混ぜて計算できますか？
- はい、可能です。
calc(100% - 20px)のように、異なる単位同士を計算できるのが calc() 最大のメリットです。ただし、演算子（+ - * /）の前後には 必ず半角スペースが必要 ですので注意してください。実装のコツは calc関数のセクション で解説しています。
- CSS関数はどのブラウザまで対応していますか？
- 現在、IE11のサポート終了により、calc() や rgba() はもちろん、比較関数（min/max/clamp）も主要なモダンブラウザ（Chrome, Edge, Safari, Firefox）ですべて利用可能です。安心して 12種類のCSS関数 を導入してください。
広告
