JSなしで、ここまで作れる — ブラウザ標準で実装するモダンUI
これまでJavaScriptライブラリやスクロール監視に頼っていたUIが、ブラウザ標準のHTML/CSSだけで作れるようになってきました。ポップオーバーや位置合わせ、スクロール連動など、JSなしでどこまで実現できるかの参考にしてください。
ポップオーバーAPIの基本の使い方とスタイリング
ポップオーバーを表示するための標準的な仕組みであるポップオーバーAPIについて解説します。今回は基本的な使い方とスタイリングについて解説します。
CSS Anchor Positioningの基本とanchor()関数
CSS Anchor Positioningは、指定した要素（アンカー）の位置やサイズを基準に別の要素を配置できる仕組みです。今回はCSS Anchor Positioningの概要と、anchor()関数の基本的な使い方を解説します。
scroll-state()で判定できる3つの状態
スクロールの状態の変化をCSSだけで判定し、スタイルを定義できるコンテナクエリーについて説明します。
テキストの折り返しに関するtext-wrap
テキストの折り返しに関するプロパティであるtext-wrapについて解説します。文字組表現に気を使いたい場合に役立つプロパティです。
コンテンツのクロスフェード
CSS Gridは、コンテンツのレイアウト以外にもいろいろな活用ができます。まずは、コンテンツのクロスフェードを実現する方法を見てみましょう。
今回のキュレーター
大塚 亜周編集老舗実用系出版社にて、女性誌編集ならびにデジタル事業開発に従事。グローバルデジタルエージェンシーに転職後、コンテンツディレクションと情報設計のスキルを生かして、大手企業のマーケティングを支援する。人事労務SaaS「SmartHR」では、UXライターとしてプロダクト開発に携わる。2023年3月に出版した『ちいさくはじめるデザインシステム』は、著者としてだけでなく、企画・編集も担当。