仕様解説
今日から使えるCSS
5

ユーザーのスクロール操作に応じて要素にスナップする動作が、CSSで実装できるようになっています。スクロールコンテナに指定するプロパティとスナップさせる要素に指定するプロパティがあるので、それぞれ見てみましょう。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

ネイティブのCSSとして変数の仕組みを使えるCSS Custom Propertiesの実装方法と、使いどころを解説します。CSS内で完結するだけでなく、JavaScriptと変数を通して連携することも可能です。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

要素の位置指定を行うpositionプロパティの中から、stickyについて解説します。たとえばアドレス帳のリストで、索引の見出しが画面上部に追従するようなUIを、CSSのみで実装できます。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

プロパティや値の対応状況によって、適用させたいCSSを分けたい場合があります。@supportsルールはそれをスマートに実現できる仕組みです。使用例と併せて紹介しましょう。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア
矢倉 眞隆
矢倉 眞隆 | フロントエンド・エンジニア

CSSの関数として定義されているcalc()は、SassなどCSSプリプロセッサを利用して実現している値の計算が可能です。記事では、その仕様を詳しく解説し、さらに実務で登場しそうな使用例を紹介します。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア