今日から使えるCSS
- カテゴリー
- CSS >
- CSS単位／関数／色
- CSS >
- CSSプロパティ
全5回
このシリーズでは、ブラウザの実装状況がある程度進み、これからぐっと使いやすくなってくる注目CSSを取り上げ、その仕様とユースケースをていねいに解説します。使えるものは、どんどん使って、より豊かな表現を実現しましょう。
第5回 CSS Scroll Snap
ユーザーのスクロール操作に応じて要素にスナップする動作が、CSSで実装できるようになっています。スクロールコンテナに指定するプロパティとスナップさせる要素に指定するプロパティがあるので、それぞれ見てみましょう。
第4回 CSS Custom Properties
ネイティブのCSSとして変数の仕組みを使えるCSS Custom Propertiesの実装方法と、使いどころを解説します。CSS内で完結するだけでなく、JavaScriptと変数を通して連携することも可能です。
第3回 position: sticky
要素の位置指定を行うpositionプロパティの中から、stickyについて解説します。たとえばアドレス帳のリストで、索引の見出しが画面上部に追従するようなUIを、CSSのみで実装できます。
第2回 @supportsルール
プロパティや値の対応状況によって、適用させたいCSSを分けたい場合があります。@supportsルールはそれをスマートに実現できる仕組みです。使用例と併せて紹介しましょう。
第1回 calc()
CSSの関数として定義されているcalc()は、SassなどCSSプリプロセッサを利用して実現している値の計算が可能です。記事では、その仕様を詳しく解説し、さらに実務で登場しそうな使用例を紹介します。