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
