モダンCSSの使い方
ブラウザが対応した新しいCSSの機能の使い方をまとめています。
個別の変形プロパティや色の関数のように、古い書き方を置き換えられる機能から、subgridやcalc(infinity)のように、これまで難しかった表現を短く書ける機能まで扱います。
2025
2024
- 2024年6月にXに投稿したCSSテクニックのまとめ
- line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい
- えっ!?まだ色の指定でrgba()関数を使っているの!?
- IntersectionObserverを使ったスクロール連動アニメーションの実装例
- スクロールバーのCSSにまつわるエトセトラ
- カードの高さを揃えたければsubgridを使えばいい
- calc(infinity)の使い道
- あなたが教わってるそのCSSテクニックはもう古い(inset、aspect-ratio、margin-inlineなど)
- えっ!?まだtransformプロパティを使ってるの!?translate・rotate・scaleを使おう
- アコーディオンのスライドアニメーションはgrid-template-rowsを使えばCSS2行で実装できる