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

CSSのSpring Physics — 2026年 第15週 CSS・スタイリング

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 15-2026
アニメーション

CSSのSpring Physics

CSSのcubic-bezierイージングはスプリングを近似できますが、4つの制御点と単一のオーバーシュートという根本的な制限があります。Chrome 113、Firefox 112、Safari 17.2からサポートされているCSS linear()関数は、実際の減衰調和振動子方程式（stiffness、damping、massのパラメータ）を60個の均等間隔の値にサンプリングして純粋なCSSイージングカーブに焼き付けることで、この制限を克服します。springToLinear()ジェネレーターはビルド時にlinear()文字列と正確なsettleデュレーションを計算し、ランタイムにJavaScriptは不要です。トレードオフとして、トークン出力の冗長性（60ポイントで約400文字）、アニメーション中断時の速度継続性のなさ、固定のdurationトークンスケールと競合する可変のdurationMsが挙げられます。ジェスチャー駆動や中断可能なアニメーションにはFramer Motionが引き続き適切です。

CSSのSpring Physics
Read Articlearrow_forward
Video · レイアウト

このUIを10分で実装できる？

Kevin Powellは、読み取り専用のHTMLで構成されたお天気カードUIを時間制限内にCSSで実装する挑戦を試み、リアルタイムでライブの意思決定プロセスを見せています。チャレンジのスキャフォルドが提供するCSSカスタムプロパティ（--bg-card、--bg-header、--border-radius-cardなど）を活用し、カードの各セクションにdisplay: flexとdisplay: gridを適用し、カウントダウン下でfont-size、padding、line-heightの値を繰り返し調整する実践的なレイアウト戦略を示します。10分間で64%の視覚的マッチングを達成し、トップダウンレイアウト思考の落とし穴、スペックなしでフォントサイズを合わせる難しさ、そして初期にピクセルパーフェクションにこだわらないことがなぜ全体的な進行速度を上げるかについて振り返っています。

AI_INFOGRAPHIC
このUIを10分で実装できる？ — infographicWATCH_VIDEOarrow_forward
Article · シェイプREAD TIME: 2m

border-shapeでWebの形を変える

新しいCSSのborder-shapeプロパティはChrome 147+で利用可能で、形状のある要素を作成するためのclip-pathおよびmaskの強力な代替手段を提供します。コンテンツをクリッピングしてborderとshadowを隠すclip-pathとは異なり、border-shapeはborder、shadow、outlineを含む要素全体を再形成しながら、同じ値構文（polygon()、shape()、inset()、circle()など）を受け入れます。移行パスは簡単で、既存のコードでclip-pathをborder-shapeに置き換えるだけでデコレーションが自動的に保持されます。著者は、reveal効果や繰り返しパターンマスクにはclip-pathを維持し、静的な形状にborderやshadowのデコレーションが必要な場合はborder-shapeを使用することを推奨しています。

READ_FULL_LOGarrow_forward
Article · タイポグラフィREAD TIME: 5m

font-familyのFallbackは思った通りに動かない

微妙ですが重要なCSSの誤解があります。単一のWebフォントのみでフォールバックのない子要素にfont-familyを宣言すると、ブラウザはDOMを遡って親のフォントスタックを継承しません。フォールバックはその単一の宣言内でのみ解決され、Webフォントが利用できない場合、ブラウザは親のsystem-uiやsans-serifではなく、独自のデフォルト（通常はTimes New Roman）にフォールバックします。このミスマッチなserifテキストの一瞬の表示は、フォールバックフォントのメトリクスがWebフォントと大きく異なる場合、測定可能なCumulative Layout Shiftを引き起こすこともあります。修正方法は、すべてのfont-familyオーバーライドで、最低限sans-serifなどのジェネリックファミリーを含む完全なフォントスタックを常に宣言することです。

READ_FULL_LOGarrow_forward
Article · カラーREAD TIME: 5m

light-dark()でInverted Themeを作る

Dave Rupertは、CSS light-dark()、color-scheme、CSSコンテナスタイルクエリを使用して、反転カラーテーマ — 現在のユーザー設定と常に反対を表示するセクション — を実装する方法を探ります。このテクニックは、アクティブなテーマをカスタムプロパティ--themeに格納し、@container style(--theme: light)および@container style(--theme: dark)ブロックを使用して、data-theme="inverted"を持つ要素の値を条件付きで反転させ、色変数を再定義することなく機能します。コンテナスタイルクエリは現在Safari 18+とChrome/Edge 111+でサポートされており、Firefoxのサポートはnightlyビルドのフラグ後ろにあり、Interop 2026の対象となっています。getComputedStyleを使用した軽量なJavaScriptポリフィルも提供されていますが、getComputedStyleがレイアウトリフローを引き起こす可能性があるというトレードオフが文書化されています。

READ_FULL_LOGarrow_forward
Article · パフォーマンスREAD TIME: 8m

現代Webで標準HTML Video・Audio Lazy Loadingを使う方法

2019年からimgとiframeでサポートされていたloading="lazy"属性が、videoおよびaudio要素のウェブ標準となり、Chrome 148（2026年5月リリース）でデフォルトで提供されています。SquarespaceエンジニアのScott Jehlは主要な動作を説明しています。lazy videoはソースメディアとposter画像の両方を遅延させ、lazy autoplayはページロード時に即座に実行されるのではなく表示されるまで待機し、preload属性は引き続き機能しますが要素がビューポートに入るまで遅延されます。audioの場合、controls属性が要素を可視にしてlazy loadingをトリガーするために必要です。開発者はlayout shiftを防ぐために明示的なwidthとheight（またはaspect-ratio）を設定し、above-the-foldのメディアにloading="lazy"を適用するとレイアウト後まで取得が遅延してLargest Contentful Paintが悪化する可能性があるため避けるべきです。

READ_FULL_LOGarrow_forward
Article · タイポグラフィREAD TIME: 2m

CSSのMulti-stroke Text Effect

この短い記事では、CSSでレトロな多重ストロークテキスト効果を実現する方法を示しています。それぞれ漸進的に大きなtext-stroke-widthと異なる色を持つ要素を重ねる手法です。text-strokeは文字の形状を維持しながら増加する幅でアウトラインを描くため、要素を太いものから細いものの順でレイヤリングすると同心円状のストロークが見えます。このアプローチは「Graphic Japan」という本の印刷グラフィックからインスピレーションを得ています。実用上の注意点として、CSSフィルターに匹敵する相当なパフォーマンスコストがあり、本番環境での使用には適していませんが、生成的な実験やcss-doodleを使った静止画像生成には適しています。FirefoxはChromeやSafariよりもストロークをよりスムーズにレンダリングします。

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

今週はいくつかの重要なCSS機能が注目を集めました。Chrome 113・Firefox 112・Safari 17.2からサポートされているCSS linear()イージング関数は、減衰調和振動子方程式を最大60個の均等間隔の値にサンプリングし、ランタイムJavaScriptなしの純粋なCSSカーブに焼き付けることで、本物のスプリング物理アニメーションを実現します。springToLinear()ジェネレーターはビルド時にカーブとsettleデュレーションを計算しますが、トークン出力の冗長性（60ポイントで約400文字）とアニメーション中断時の速度継続性のなさというトレードオフがあります。Chrome 147で導入されたborder-shapeは、polygon()・shape()・inset()の同じ構文を受け入れながらborder・shadow・outlineを含む要素全体を再形成するclip-pathの強力な代替手段です。

2つのタイポグラフィの注意点も詳しく取り上げられました。広く誤解されているfont-familyのフォールバック動作により、ジェネリックフォールバックなしで単一Webフォントのみを宣言した子要素は、親のsystem-uiスタックを継承せずにブラウザのデフォルト（多くの場合Times New Roman）にフォールバックし、測定可能なCumulative Layout Shiftを引き起こす可能性があります。また、text-stroke-widthレイヤーを重ねた多重ストロークテキスト効果は視覚的には有効ですが、CSSフィルターに匹敵する相当なパフォーマンスコストがあり、本番UIよりもcss-doodleを使った生成実験にのみ適しています。

カラーテーマの面では、Dave RupertがCSS light-dark()・color-scheme・コンテナスタイルクエリを使用して反転カラーテーマを実装する方法を実演しました。現在はSafari 18+とChrome/Edge 111+でサポートされており、FirefoxはInterop 2026での対応を目指しています。HTMLのvideoおよびaudio要素がloading="lazy"をWeb標準として正式サポートし、Chrome 148でデフォルト提供されましたが、ファーストビューのメディアにはLCPの低下を防ぐためloading="eager"とfetchpriority="high"を併用すべきです。

Key Takeaways
  • CSS linear()（Chrome 113+、Firefox 112+、Safari 17.2+）はビルド時に本物のスプリング物理を純粋なCSSイージングカーブに焼き付けることができ、ランタイムJavaScriptが不要です。springToLinear()ジェネレーターでカーブとsettleデュレーションを計算してください。
  • Chrome 147+の新しいCSS border-shapeプロパティはborder・shadow・outlineをすべて保持しながら要素全体を再形成し、clip-pathとは異なります。ほとんどの静的シェイプのユースケースで直接置き換えが可能です。
  • 子要素でfont-familyをジェネリックフォールバック（例：sans-serif）なしで宣言すると、親のフォントスタックではなくTimes New Romanにフォールバックしてしまいます。CLSを防ぐため、すべてのオーバーライドに完全なフォントスタックを含めてください。