(BUSAN.SASHIMI)
terminal
Weekly Digest // STYLING — Week 3-2026
paletteWeekly Report

ゲームチェンジャーとなる新しいCSSスクロール機能 — 2026年 第3週 CSS・スタイリング

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 3-2026
アニメーション

ゲームチェンジャーとなる新しいCSSスクロール機能

CSSは今、JavaScriptライブラリ全体を置き換え得る4つのスクロール駆動プリミティブを提供しています。scroll stateコンテナクエリ（container-type: scroll-state）、:target-current疑似クラスによるscroll target group、カスタムカルーセルインジケーター用の::scroll-markerおよび::scroll-marker-group疑似要素、そして自動無効化をサポートする::scroll-button疑似要素です。scroll-stateを使えば、要素がスクロール可能か（scroll-top）、position: stickyで固定されているか（stuck）、特定の軸にスナップされているか（snapped-x）をクエリできます。デモはすべてJavaScript不要で実装されており、Chromiumベースのブラウザでサポートされてきています。

ゲームチェンジャーとなる新しいCSSスクロール機能
play_arrow
16:09
AI_INFOGRAPHIC
ゲームチェンジャーとなる新しいCSSスクロール機能 — infographicWatch Recordingarrow_forward
Video · アニメーション57:54

このアニメーショングラデーションボタンを再現できる？

Kevin Powellが、多層radial-gradient()ボタンエフェクトを純粋なCSSで再現する過程を思考過程とともに解説します。中心となる手法は、backgroundプロパティに複数のradial-gradient()レイヤーを重ね、各位置の値をsyntax: "<percentage>"でregistered @propertyとして登録し、@keyframesアニメーション内で補間できるようにすることです。別の@propertyはボタンの塗りつぶし色（syntax: "<color>"）を登録し、:hover時にsolid-fillとborder状態の間をスムーズにtransitionします。background-origin（padding-box vs. content-box）はグラデーションが透明なborderの下に滲むかを制御します。

AI_INFOGRAPHIC
このアニメーショングラデーションボタンを再現できる？ — infographicWATCH_VIDEOarrow_forward
Article · CSSREAD TIME: 6m

Dave Rupertの2026年サイトリデザイン：名前付きグリッドライン、View Transition、等幅フォント

Dave Rupertの2026年のサイトリデザインは、3つのCSS主導の変更を特徴としています。まず、サイト全体がMicrosoftのCascadia Codeの変種であるCascadia Monoに切り替わりました。多くのインディーフォントに欠けている№グリフを含むことが選択理由の一つです。次に、named CSS grid lines（例：grid-column: wide-start / wide-end）によりレイアウト制御が大幅に改善されました。Stephanie Ecklesの手法を参考にしたこのアプローチは、壊れやすいネガティブマージンのオーバーライドを構成可能なmodifierクラスに置き換えます。第三に、マルチページview transitionsを再設計し、ホームページのSVGロゴがサブページのナビゲーションバーに変換されます。:is()、:has()、CSSネスティングの活用でCSSを557行から391行に削減し、約0.8 KB（brotli）を節約しました。

READ_FULL_LOGarrow_forward
Article · CSSREAD TIME: 2m

::details-contentでdetailsコンテンツをスタイリング

新しい::details-content疑似要素は、<details>要素内の展開コンテンツコンテナにCSSが直接アクセスできるようにします。以前はラッパーdivなしでは不可能だった機能です。Chrome 131が2024年11月に、Safari 18.4が2025年3月31日に、Firefox 143が2025年9月にサポートを追加し、3つのエンジンすべてでBaseline newly availableとなりました。実用的な使用例として絶対位置指定があります。::details-contentにposition、width、z-indexを適用することで、展開するフォームフィールドをカードグリッドの上にオーバーレイし、レイアウトシフトを防ぎます。heightトランジションアニメーション、背景スタイリング、overflowの制御にも活用でき、@supports selector(::details-content)でプログレッシブエンハンスメントを実装できます。

READ_FULL_LOGarrow_forward
Article · カラーREAD TIME: 11m

CSS相対色でアニメーションをテーマ化（Smashing Animations 第8回）

Andy Clarkeは、OKLCH色空間のCSS relative colorsを使ってSVGアニメーションの手動パレット管理を置き換える方法を紹介します。単一の--foundationカスタムプロパティを定義し、oklch(from var(--foundation) calc(l ± n) calc(c * n) calc(h ± n))ですべてのfill、stroke、グラデーションストップを導出します。基本ルールは、明度は加減算（move）、彩度は乗算（scale）、色相は角度の加減算（rotate）です。色をスムーズにアニメーションするには、各OKLCHチャンネルをsyntax: "<number>"で登録した@propertyに分割して--foundationに再合成します。ひとつのflameトークンがランプの発光とmix-blend-mode: colorオーバーレイの両方を制御するライティングシステムの例も含まれます。

READ_FULL_LOGarrow_forward
Article · フォームREAD TIME: 7m

カスタマイズ可能なselectの最新情報：複数選択

Brecht De Ruytéは、現在Chrome Canaryでテスト可能なCSS カスタマイズ可能な<select multiple>要素の開発状況を紹介します。selectと::picker(select)疑似要素の両方にappearance: base-selectを適用すると、複数選択のUXが改善されます。マウスクリック時にCtrl/Cmdを押し続ける必要がなくなり、タッチデバイスのシングルタップ動作と一致します。select内の.options-grid divでdisplay: gridレイアウトを適用し、::checkmark疑似要素でオプションをカードスタイルにできます。multiple selectにsize="1"を設定するとドロップダウン形式のpickerが生成されます。<selectedcontent>と::after疑似要素を使ったインライン表示案も提案されています。

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

今週のスタイリングイシューは、CSSがかつてライブラリを必要としていたインタラクションパターンを真に置き換えられるエンジンへと成長していることを示しています。Web Dev Simplifiedのフィーチャード動画は、Chromiumに届いた4つの新しいスクロール駆動プリミティブを紹介します。sticky/snapped/scrollableの状態をクエリするcontainer-type: scroll-state、目次リンクの自動ハイライト用:target-current疑似クラス、カスタムカルーセルインジケーター用::scroll-markerと::scroll-marker-group、そして前/次ボタンが自動無効化される::scroll-buttonです。スティッキーヘッダーの再スタイル、ライブ目次、完全なカルーセルなど、すべてのデモがJavaScript不要で実装されています。

複数の記事を貫くテーマは、型付き@propertyがこれまで不可能だったアニメーションを可能にするという点です。Kevin Powellは個々のradial-gradientの位置をsyntax: "<percentage>"のカスタムプロパティとして登録し、@keyframes内で補間できるようにします。Andy ClarkeはこのアイデアをSVGテーマに応用し、単一の--foundationトークンがoklch()ですべてのfill、stroke、グラデーションストップを制御します。Dave Rupertの2026年リデザインはnamed grid linesでネガティブマージンを置き換え、ビュートランジションでSVGロゴをナビゲーションバーに変換し、:is()、:has()、CSSネスティングで166行を削減した実践的な事例を示しています。

2つの記事はネイティブフォーム要素を扱っています。Brecht De Ruyteはappearance: base-selectによる開発中の<select multiple>を紹介し、グリッドカードレイアウトの適用とCtrl/Cmdによる複数選択の廃止を示します。Baselineに到達した::details-content疑似要素は、<details>内のコンテナを直接スタイリングでき、@supports selector(::details-content)でプログレッシブエンハンスメントを実現します。

Key Takeaways
  • Chromiumに届いた4つの新しいCSSスクロール機能（scroll-state、:target-current、::scroll-marker、::scroll-button）は、カルーセル・スティッキーヘッダー・ライブ目次ハイライト用のJavaScriptライブラリ全体を置き換えられます。
  • 型付き@propertyの登録により、radial-gradientの位置とOKLCH色チャンネルのスムーズなCSSアニメーションが実現し、以前はJavaScriptでのみ可能だったレイヤードエフェクトを作成できます。
  • ::details-content疑似要素が3エンジンすべてでBaselineとなり、<details>コンテンツへの直接CSSアクセスによるhighトランジション、オーバーレイ、overflow制御が可能になりました。