CSS random()で紙吹雪を降らせる — 2026年 第29週 CSS・スタイリング

CSS-Tricks第15号は2週間分の充実した内容をまとめています。Preethi Samの view() ベースの境界認識CSSはJavaScriptなしでスクロール範囲エフェクトを生成し、Sophie Kooninの時間ベースデザインはTemporal APIと color-mix() を組み合わせてmacOSスタイルの動的テーマを実現します。David Bushellのフルブリード修正はコンテナクエリ単位を使い、オーバーフローなしでネストされたラッパーから脱出します。Chrome 150はSafariとFirefoxにまだない機能を出荷しました。flex-wrap: balance・text-fit・named-feature()・focusgroup・アニメーション可能な zoom が含まれます。AccentColor と AccentColorText はChrome 150でBaselineを達成し、background-clip: border-area と polygon() の角丸はChromeに追加されましたがFirefoxは未対応です。Manuel Matuzovićはグリッドレーンレイアウト（旧メーソンリー）がまだアクセシブルでないと指摘し、reading-flow による修正が提案されましたが大規模テストはまだです。

Ahmad Shadeedは各ラウンドを別々の兄弟要素に人工的に分割したFIFAワールドカップトーナメント表UIを解析し、grid-template-columns と grid-template-rows の両軸へのCSS subgrid を使って意味論的にネストされたHTMLで再実装しています。各 .round は grid-column: 1 / -1 と grid-row: 1 / -1 で親グリッド全体にまたがり、display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid で同じトラックを再公開します。これにより .start と .end の子要素がそれぞれ grid-column: 1 と grid-column: -2 に自己配置できます。試合ペアの垂直センタリングは各ハーフ列に display: flex; flex-direction: column、各試合コンテナに flex: 1 を適用してスペースを均等分配し、ラウンド間のコネクタラインを中央揃えにします。レスポンシブ動作では grid-template-columns: repeat(4, 1fr) で狭い幅においてラウンドを単一列に折りたたみます。 この記事はレイアウトのみに焦点を当て、アニメーションとホバーエフェクトは明示的に除外しています。

このCodropsのケーススタディは、Trionn スタジオチームが4ヶ月かけてアニメーション・WebGL・オーディオを単一の統合システムとして実装した受賞歴（FWA・GSAP・CSS Design Awards）のあるポートフォリオサイトのアーキテクチャを公開しています。GSAP + @gsap/reactは ScrollTrigger でページ遷移とスクロール駆動シーケンスを制御します。単一の正規化された scrollProgressRef（0–1）が371枚のWebPフレーム・グリフパーティクル爆発・サービスカードの曲線パスアニメーション・カラーパレット切り替えを競合なく統括します。Three.jsは共有レンダーループを直接制御するためReact Three Fiberを使わずに採用し、ホバー検出はシンボルの実際の3Dジオメトリへのレイキャスティングで行い、カードの角丸は透過PNGではなく符号付き距離関数（SDF）フラグメントシェーダーで生成しています。371枚のWebPフレームは requestIdleCallback で20枚ずつバッチロードして img.decode() で前処理し、ギャラリーのWebGLシーンはビューに入る前に明示的にウォームアップ — シェーダーコンパイル、テクスチャアップロード — しています。フッターのプラック可能なギターストリングワードマークとヒーローのホバービープ音を含む全サウンドエフェクトは、録音済みファイルでなくオシレーター・ビブラートLFO・フィードバックディレイを使った Web Audio API でランタイム合成されています。

Brecht De Ruyteは派手な機能に隠れて注目されにくい3つのCSS Baseline機能を取り上げています。CSS Custom Highlight APIはChrome 105・Safari 17.2・Firefox 111から利用可能で、従来のDOM分割アプローチを CSS.highlights.set() と ::highlight() 擬似要素に置き換えます。ブラウザはペイントフェーズに介入してグリフの真下に着色した矩形を直接描画し、レイアウトフェーズを完全にスキップしてリフローを排除します。text-indent キーワードの hanging と each-line は Chrome 146とともに2026年3月にBaselineを達成（SafariとFirefoxは先行実装）：hanging は参考文献スタイルのインデントをネイティブに実装し、each-line はすべての <br> 改行後にインデントを適用します。font-family: math とネイティブMathMLタグ（<math>・<mfrac>・<msub>）は、ブラウザにSTIXやLatin Modern Mathのような数学レイアウトフォントを読み込むよう指示し、外部JavaScriptライブラリなしにスクリーンリーダーでアクセシブルな数式出力を可能にします。両機能とも Chrome 109とともに2023年にBaseline を達成しています。