レイアウト 巧妙なHeader Blockerのテクニック Josh W. Comeauが、JavaScriptを一切使わずに純粋なCSSだけで、sticky ヘッダーがページセクションごとに異なる背景色を持つように見せる手法を解説しています。仕組みは、position: stickyを使った2つ の非表示「blocker」要素で、hero 領域(青)と本文領域(白)にそれぞれ色を合わせます。sticky 要素はコンテナを外れると追従をやめるため、青い blocker がスクロールアウトした瞬間に白い blocker がシームレスに引き継ぎます。ヘッダー自体は常に透明な背景を保ちます。設計上のトレードオフとして、各セクション上部にヘッダーの高さ(Comeauのブログでは5rem)以上の空きスペースが必要です。
Read Articlearrow_forward Video · Tips
便利なContainer Query Unitのテクニック Kevin Powellが、小さいサイズでグラデーションが歪んで見えるprogress barの問題をスマートに解決する方法を実演します。progress barにlinear-gradientを使うと、グラデーションは要素の現在の幅だけを埋めるため、バーが縮むほど圧縮されて見えます。解決策は、container queryを使う子要素がなくてもprogress要素自体にcontainer-type: inline-sizeを適用してコンテナにすることです。次にグラデーションにbackground-size: 100cqi(コンテナのinline-sizeの100% )を指定すると、バーの現在の幅にかかわらずグラデーションが常に全範囲を表示します。このテクニックはクロスブラウザ対応のため、-webkit-progress-valueと-moz-progress-bar疑似要素にも適用されます。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · アーキテクチャ READ TIME: 16m
舞台裏：リデザインを支えるCSS Architecture Brecht De RuyteがAstro製の個人サイトのCSSアーキテクチャを詳細に解説しています。プリプロセッサなし、postcss-custom-mediaとautoprefixerのみの最小構成PostCSS環境です。基盤となるのは単一の@layer宣言で、vendor → tokens → reset → atoms → molecules → organisms → pages → utilitiesの順序を固定し、インポート順に依存せずcascade優先度を保証します。カスタムプロパティはraw値(--p-)、セマンティックトークン(--s-)、コンポーネントオーバーライド(--c-)の3 階層に分離され、既存の193行 のdark.cssはlight-dark()関数に置き換えられました。CSSリセットでは全ルールを:where()で囲んで詳細度をゼロに保ち、prefers-reduced-motionブロックをレイヤー外に置くことで!importantなしにアニメーションを上書きします。コンポーネントレベルではcontainer queryを採用し、全体でlogical propertyを活用しています。
READ_FULL_LOGarrow_forward Article · ブラウザ情報 READ TIME: 3m
2026年3月のWeb Platform新機能 Rachel Andrewの月次まとめは、2026年3月 の安定版・ベータブラウザリリースを対象にしています。Chrome 146 、Firefox 149 、Safari 26.4 が含まれます。主なポイント: 名前のみで一致するオプションの@containerコンディションがFirefox 149 とSafari 26.4 に追加、Chrome 146 にスクロール駆動アニメーションとtrigger-scopeプロパティ(アニメーショントリガー名の名前空間管理)が導入されました。Firefox 149 はpopover hint値を、Safari 26.4 はdisplay: grid-lanesとimg sizes属性内のmin()・max()・clamp()数学関数をサポートします。Firefox 149 にはCloseWatcherインターフェースも追加されます。ベータではChrome 147 がcontrast-color()、border-shape、スコープ付きview transitionを追加し、Firefox 150 ベータがrevert-rulキーワードとlight-dark()の画像拡張を予告しています。
READ_FULL_LOGarrow_forward Article · CSS進化 READ TIME: 3m
Native CSSへ至るStyling Choiceの歴史 Cassidy Williamsが、オープンソースアプリtodometer の約10年 にわたるスタイリング変遷を振り返ります。Electron/React環境でLessから始まり、2020年 にカプセル化のためCSS ModulesとNode-sassへ移行、2023年 にnode-sassの廃止を機にSassを完全に削除してpostcss-nested(Sass互換構文)へ移りました。今回の記事の核心は、postcss-nestedをCSSスペック構文のpostcss-nestingに切り替え、ネイティブCSS nestingがベースライン対応になったことでPostCSS設定ファイルを丸ごと削除した過程です。マイグレーションのdiffは驚くほど小さく、10年 間のプリプロセッサ依存が結局ブラウザ組み込みの変数とnestingという同じ機能に収束したことを示しています。
READ_FULL_LOGarrow_forward Article · ニュースレター READ TIME: 2m
CSS Weekly 第638号 Zoran JamborによるCSS Weekly 今週号では、border-radiusを超えたbeveled・scooped・squircleコーナーを実現する新しいcorner-shape プロパティを主に取り上げています。その他、カスタマイズ可能なselect要素、Una Kravetsによるcontrast-color()での自動アクセシブルテキスト色、Bramus Van DammeによるLight-dark()の画像サポート拡張、Kitty GiraudelのCSSのみのフォールディングコーナーエフェクト、Temani Afifのanchor positioning活用事例、スクロール可能パネル内でのドロップダウン問題解決策なども紹介されています。
READ_FULL_LOGarrow_forward Article · Web標準 READ TIME: 14m
Polyfill構築から学ぶWeb Standards Schalk Neethlingが、Web Platform Testsを基準にInterop 2026 リストのCSS機能2つ をJavaScriptポリフィルとして実装するconformance-driven development の実験を記録しています。最初の候補、CSS Values Level 5 の高度なattr()関数では、custom propertyの継承と@propertyの問題、var()置換を妨げる複合宣言、曖昧なCSS.supports()の検出といった難所が浮かび上がりました。2つ 目のCSS media pseudo-class(:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked)は単純に見えましたが、メディアイベントがバブリングしないためWeakMapで要素ごとにリスナーを管理する必要があること、stalledの状態がDOMに露出しないこと、:mutedはvolume === 0ではなくmuted IDL属性のみにマッチすること、@layerブロック内のルールはそのコンテキスト内に留める必要があることが判明しました。:volume-lockedはOS制約によりポリフィル不可 と判定されています。
READ_FULL_LOGarrow_forward summarize Digest_Summary
2026年3月はCSSプラットフォームの能力において画期的な月でした。 Rachel Andrewのブラウザまとめによると、Chrome 146 にscroll-driven animationsと新しいtrigger-scopeプロパティが追加され、Firefox 149 とSafari 26.4 に名前のみでマッチするオプションの@containerコンディションが導入され、Safari 26.4 はdisplay: grid-lanesとimg sizes内の数学関数をサポートします。Chrome 147 ベータはcontrast-color()、border-shape、スコープ付きview transitionを追加予定で、Firefox 150 ベータはlight-dark()の画像サポートを拡張します。CSS Weekly 638 号はborder-radiusを超えたsquircleやbeveledコーナーを実現する新しいcorner-shapeプロパティも紹介しました。
実践的なCSSアーキテクチャの考え方も今週の主要テーマでした。Brecht De Ruyteはvendorからutilitiesまでの8 レイヤーで構成される厳格な@layerカスケード、3 階層のカスタムプロパティ命名体系、そして193行 のダークモードCSSを置き換えたlight-dark()を活用したプリプロセッサなしのCSSシステムを詳しく公開しました。Cassidy Williamsはtodometer の10年 のスタイリング変遷をLess、Sass、PostCSSを経て最終的にネイティブCSS nestingに行き着き、PostCSS設定を丸ごと削除した過程として振り返りました。
テクニック中心の2つ の記事も今週を締めくくりました。Josh Comeauの隠れたposition: stickyブロッカー要素を使った純CSSのstickyヘッダー色切り替えテクニックと、Kevin Powellのprogress要素自体にcontainer-type: inline-sizeを適用しbackground-size: 100cqiを使って小さなfill幅でのグラデーション歪みを修正する巧妙なテクニックが紹介されました。
Key Takeaways Chrome 146 はtrigger-scopeとともにscroll-driven animationsを搭載し、Chrome 147 ベータはcontrast-color()とborder-shapeを追加します。cascade layerと最新CSSアーキテクチャが本番環境の標準になりました。 corner-shapeプロパティ（squircle、beveled、scoopedコーナー）とlight-dark()の画像サポート拡張がブラウザに搭載され、SVGハックやJS駆動テーマへの依存が減少します。 ネイティブCSS nestingがベースラインになりました。Cassidy Williamsはtodometerをpostcss-nestedからpostcss-nesting、さらにネイティブnestingへ移行した後、PostCSS設定ファイルを丸ごと削除しました。 
