アニメーションScroll-driven Animation
Josh W. Comeau が CSS Animation Timeline API を実践的に詳しく解説します。このAPIは @keyframes の進行を時間ではなくスクロール位置に対応付けます。animation-timeline: view() を使うと要素がビューポートを通過する間にキーフレームが適用され、animation-timeline: scroll() はページ全体のスクロールを追跡します。animation-range プロパティの cover・contain・entry・exit 値でアニメーションの開始と終了タイミングを細かく制御でき、animation-range-start や animation-range-end でパーセント指定も可能です。さらに view-timeline と timeline-scope を使い、ある要素のスクロール位置で別要素のアニメーションを制御する「リンクタイムライン」も紹介しており、名前付きタイムラインのスコープ制限という注意点も解説しています。
Read Articlearrow_forward Video · レイアウト
便利なCSS Layout Patternとさらに引き上げる楽しい方法
Kevin Powell が3つの実用的な CSS レイアウトパターンと2つのボーナスビジュアルテクニックを解説します。まず grid-auto-flow: column と grid-auto-columns で横スクロールオーバーフローを構築し、scroll-snap-type: x mandatory と scroll-snap-align: center でカードのスナップを実現します。次に repeat(auto-fit, minmax(min(100%, 300px), 1fr)) のオートグリッドパターンを詳しく説明し、小さなコンテナで起きるオーバーフローの問題と解決法を紹介します。3つ目はサイドバーコンポーネントに container-type: inline-size を宣言し @container で500px以上の時に3カラムグリッドへ切り替えるコンテナクエリの活用例です。ボーナスとして、チケット風カードコーナー用の corner-shape: scoop プロパティと、animation-timeline: view() を使った横スクロールビューポートでカードをスケール・フェードする scroll-driven animation を紹介しています。
AI_INFOGRAPHICWATCH_VIDEOarrow_forwardArticle · CSSテクニックREAD TIME: 7m
100% CSS：repeat(--n, anything)
CSS の grid repeat() を汎用化してほしいというコミュニティの要望に触発され、著者は JavaScript を一切使わずモダン CSS だけで カスタム --repeat() 関数を実装しました。この手法は calc() と round(down) を使って10進数の繰り返し回数を8ビットの2進数に変換し、カスタムプロパティで2の累乗単位のセットを生成することで最大255回の繰り返しをサポートします。最終的な出力は新しい if(style(--bitN = 1): ...; else: ;) の条件構文で組み立てられ、未使用の累乗変数は計算しない短絡評価で動作します。content・text-shadow・filter drop-shadow()・shape() の線分繰り返しなど多様な活用例を示しており、npm パッケージとしても公開されています。
READ_FULL_LOGarrow_forwardArticle · ストリーミングUIREAD TIME: 17m
Streaming Content向けのStable Interface Design
Joas Pambou は、ストリーミング UI の3つの核心的な問題 — スクロールの横取り・レイアウトシフト・過剰なレンダリング頻度 — を特定し、それぞれに対する具体的な JavaScript と CSS の解決策を提示します。スクロール制御では 60px の閾値を持つ userScrolled フラグでユーザーの意図的なスクロールと小さなレイアウト変化を区別し、ユーザーが意図的に上にスクロールしたときだけ自動スクロールを停止します。レイアウトの安定性は、トークンごとに innerHTML を消去・再構築する代わりにライブテキストノードに文字を直接追記することで、レイアウト再計算とカーソルのちらつきを両方排除します。レンダリング頻度は受信文字をバッファに蓄積し requestAnimationFrame ごとに一括フラッシュする方式で削減します。さらにストリームのキャンセル処理・再試行 UX・aria-live リージョン・:focus-visible キーボードナビゲーション・タイプライタアニメーション向け prefers-reduced-motion 対応も解説しています。
READ_FULL_LOGarrow_forwardArticle · カラーREAD TIME: 6m
CSSでGenerative Colorを作る
この記事では、oklch() CSS 関数と相対カラー構文を使って、単一の hex 値から11段階のカラーパレットを生成する方法を紹介します。相対カラーの from キーワードは任意の hex を lightness（l）・chroma（c）・hue（h）に変換し、それを calc() で調整できます。極端な明度での彩度の過剰を防ぐため、calc(0.08 * (c / .2)) のような式で各ステップの chroma を比率調整します。オプションの --chroma CSS 変数を使えば、ソースの hex を変えずにパレットの鮮やかさを手動で上書きできます。著者はこのアプローチを使い、サイト全体の配色システムをわずか6つの hex コードだけで管理しています。
READ_FULL_LOGarrow_forwardArticle · CSS単位READ TIME: 4m
知っておくべきModern CSS Unit：dvh、Container Query Unit、lh、cap
このガイドでは、ここ数年で主要ブラウザすべてに搭載された4種類の CSS 長さ単位を実践的に解説します。それぞれ px・rem・% では解決できなかった問題を解消します。動的ビューポート単位 dvh は、100vh がアドレスバーを無視するモバイル Safari の長年のバグを修正し、全画面レイアウトには 100dvh が推奨デフォルトとなっています。cqw や cqi などのコンテナクエリ単位は container-type で設定された最も近いコンテナを基準にサイズを決めるため、メディアクエリなしでコンポーネント単位のレスポンシブタイポグラフィが実現できます。lh 単位は要素の計算済み line-height に解決され、margin-block-start: 2lh のような縦方向のリズム管理が容易になります。さらに cap（大文字の高さ）・ic（CJK 表意文字の幅）・ex（x-height）でフォントメトリクスに正確に UI 要素を揃えることが可能です。
READ_FULL_LOGarrow_forwardArticle · 3DエフェクトREAD TIME: 6m
HTML、CSS、少しのJavaScriptで3D Stageを再現
Nick Hazekamp が、CSS perspective と小さな JavaScript 傾きコントローラーを使ってリアルな3Dステージの錯視効果を作る手順を解説します。scene コンテナは perspective: 1000px・perspective-origin: 50% 36%・transform-style: preserve-3d で共有3D空間を確立します。ステージ本体は rotateX(72deg) で傾けた矩形で、視覚的な重労働はほぼ CSS が担います。固定の background と translate3d() で移動した foreground レイヤーが3層構成を完成させます。難しいのは傾きが変わるたびに background と foreground の幅をステージの前後エッジに幾何学的に合わせることで、小さな JS 関数が getBoundingClientRect() と現在の perspective 値を読み取り、透視投影スケールの計算式で正しい射影幅を求め、CSS カスタムプロパティとして書き戻しています。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
今週のCSSは、主要ブラウザ全てで利用可能になったAPIの深掘りチュートリアルが注目を集めました。Josh W. Comeau はanimation-timeline: view()・animation-timeline: scroll()・animation-range（cover・contain・entry・exit）・view-timelineとtimeline-scopeによるリンクタイムラインまで、CSS Animation Timeline APIの全体像を網羅したガイドを発表しました。Kevin PowellはScrollテーマを拡張し、scroll-snap-type: x mandatoryによるカードスナップ、新しいcorner-shape: scoopプロパティによるチケット風カードコーナー、そしてcontainer-type: inline-sizeと@containerを使ったコンテナクエリを紹介しました。
実験的な分野では、calc()とround(down)で10進数を8ビット2進数に変換し、新しいif(style(--bitN = 1): ...; else: ;)条件構文で組み立てる純粋CSS製の--repeat()関数が実装されました。JavaScriptなしでcontent・text-shadow・drop-shadowなどで最大255回の繰り返しが可能です。モダンCSS単位のガイドは、モバイルセーフな全画面レイアウトのためのdvh、コンポーネントスコープのレスポンシブタイポグラフィのためのcqw/cqi、縦方向のリズムのためのlh、フォントメトリクス揃えのためのcap/ic/exを強調しました。
さらに2本の記事が週を締めくくります。oklch()と相対カラー構文で単一のhexから11段階のパレットを生成するテクニックと、perspective: 1000px・rotateX(72deg)・getBoundingClientRect()による透視投影スケール計算でCSS 3Dステージ錯視を作る手法です。
Key Takeaways- CSS Animation Timeline API（animation-timeline: view()・scroll()・animation-range）はscroll-driven animationの標準として確立し、Josh W. Comeau のガイドが決定的なリファレンスとなっています。
- calc()・round(down)・新しいif(style())条件構文を活用した純粋CSS製--repeat()関数で、text-shadowやdrop-shadowなどのプロパティでJavaScriptゼロで最大255回の繰り返しが実現します。
- dvhはモバイルセーフな全画面レイアウトで100vhを置き換え、cqw/cqiはコンポーネントスコープのレスポンシブタイポグラフィを実現し、oklch()の相対カラーで単一のhexから11段階のパレットを生成できます。
