【CSS】覚えておきたい新しいプロパティ2022年編

WEBデザインのまとめサイトを見ていて、気になるサイトは、どうなってるんだろう～とソースやスタイルをチェックすることがあるのですが、知らないプロパティがちらほら、、

今年、個人的に覚えて使っていきたいプロパティ一覧です。ここでは、詳しく追及せず、次回の記事から深掘りしていきたいと思います。

1.CSS変数

:root {
 --main-bg-color: #000;
}
.element {
 background-color: var(--main-bg-color);
}

参考リンク
▼CSS カスタムプロパティ (変数) の使用 | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties

2.CSS数学関数（min / max / clamp）

.element {
    font-size: max(10 * (1vw + 1vh) / 2, 12px);
}

参考リンク
▼CSS Values and Units Module Level 4 | W3C
https://www.w3.org/TR/css-values-4/#calc-notation

3.gridレイアウト

.element {
   grid-column: 4/-1;
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
}

参考リンク
▼ | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout