アニメーションSquash and Stretch：Disney最初のAnimation PrincipleをWebへ
Josh W. Comeauが、ディズニーのスクワッシュ&ストレッチのアニメーション原則をSVGマイクロインタラクションへ応用する方法を解説します。チュートリアルの中心はCSSのpath()関数とdプロパティのtransitionを使った矢印アイコンのアニメーションですが、2026年4月時点でSafariはSVGパス要素のCSS transitionをサポートしておらず、ブラウザカバレッジが約79%にとどまると率直に指摘しています。クロスブラウザ対応のためWeb Animations APIを活用するMotionライブラリを採用し、別スレッドで滑らかなアニメーションを実現します。さらにspring physics（stiffness: 300, damping: 12）で弾力感を加え、通常のhover状態ベースではなくイベントベースのトリガーに切り替えることで、pointerenter時に150msだけストレッチを発動させる遊び心のある演出を実現します。記事の最後にはtransform-origin: center bottomとCSSカスタムプロパティを使ったバウンシングボールのplaygroundも掲載されています。
Read Articlearrow_forward Video · レイアウト
数行のCSSでWrapを検出する
Kevin PowellがJavaScriptのresize observerを使わず、CSS container queryだけでflex wrapの検出を実装する方法をデモします。中心的な技法はflex子要素（"wrap detector"）にcontainer-type: inline-sizeを指定し、その幅が75vwを超えるかどうかをクエリすることです。wrap前はビューポートの一部しか占めませんが、wrap後は全幅に広がって閾値を超えます。Powellはこれを複数カラムのグリッドにも拡張し、2番目のcontainerレイヤーをネストしてvw単位をcqw（container query width）に置き換え、ビューポートではなく親コンテナを基準にクエリを評価させます。明示的なサイズを持たないflex-wrap要素が縮んでしまうという限界も率直に認めており、このテクニックはメディアクエリの代替ではなく補完として紹介されています。Andy BellのPiccalilli記事から着想を得た手法です。
AI_INFOGRAPHICWATCH_VIDEOarrow_forwardArticle · ブラウザプラットフォームREAD TIME: 6m
2026年3月Baseline Monthly Digest
Jeremy Wagnerによる2026年3月のBaselineダイジェストは、大規模な相互運用性マイルストーンの達成を報告しています。新たにNewly availableとなった機能には、MathMLレンダリング用のfont-familyのmath値、細かいタイポグラフィ制御のためのtext-indent: each-lineおよびtext-indent: hangingキーワード、HTTP/3ベースの低遅延双方向通信WebTransportが含まれます。Widely available（30か月の相互運用性を経てpolyfillなしでプロダクション利用可能）となったCSS機能としては、遅延ロード時のレイアウトシフト防止のためのcontain-intrinsic-size、カスタムリストマーカーのための@counter-style、hyphensおよびhyphenate-characterプロパティ、解像度対応CSSイメージのためのimage-set()、overflowメディアクエリ、updateメディア機能、CSS subgridなどが挙げられます。Rachel Andrewによるプロジェクトのリリース日に合わせたBaselineターゲット選定の戦略も紹介しています。
READ_FULL_LOGarrow_forwardArticle · UIコンポーネントREAD TIME: 7m
dialog要素とCSS TransitionによるReact Modalの出入り
Ben Frainが、ネイティブのdialog要素をベースに、::backdropも含めてin/out両方向のtransitionが動作するReactモーダルを構築する複雑な課題を解説します。エントリーtransitionは@starting-styleを使ってDOM挿入前のビジュアル状態（transform: scale(0.8); opacity: 0）を宣言し、CSSがその状態から補間できるようにします。終了transitionではdisplayとoverlayプロパティをアニメーションさせる必要があり、そのためにはtransition宣言にallow-discreteが必須です。Safariではdialogを閉じるとinset値がリセットされて要素が飛び跳ねるバグがあり、inset: 0; position: fixedのルールで修正します。背景クリックによる閉じ方はChromiumではclosedby="any"属性で対応しますが、Safariでは内部div wrapping戦略が必要です。スタイリングは--padding、--radii、--transitionSpeedなどのCSSカスタムプロパティとしてdialog要素に直接公開されています。
READ_FULL_LOGarrow_forwardArticle · アニメーションREAD TIME: 2m
GSAP 3.15：easeReverseによるAdaptive Directional Easingを発表
GSAP 3.15では新しいtweenレベルのプロパティeaseReverseが追加されました。再生ヘッドを逆方向に動かすとeasingカーブも反転してアニメーションが不自然に見えるという長年の問題を解決します。easeReverse: trueに設定すると正方向のeaseを逆方向用に調整して再利用し、ease文字列（例："sine.in"）を渡すと終了時にまったく異なる動きを適用できます。GSAPは再生ヘッドが方向を変えた正確な位置からカーブを再計算するため、tween途中の割り込みも正しく処理されます。timelineのdefaultsを通じてネストされたtweenへcascadeされるため、モーダル、ドロワー、メニューなどのトグル可能なUIパターンに実用的です。これに伴いyoyoEaseはdeprecatedとなり、GSAP 3.15は内部でyoyoEaseをeaseReverseにマッピングして完全な後方互換性を維持します。
READ_FULL_LOGarrow_forwardArticle · レスポンシブREAD TIME: 6m
CSS Breakpoint Unit：PixelでDesignしFluid Accessibilityを自動で得る
@propjockey/breakpoint-systemnpmパッケージは、tan(atan2())というCSS技法で100cqwなどの長さ値を単位なしの数値に変換し、remやemを使わずにユーザーのシステムフォントサイズ設定に自動適応するピクセルベースのブレークポイントを実現します。最大10個の名前付きブレークポイント（sm、md、lgなど）がCSSカスタムプロパティとして登録され、abs()、clamp()、min()、max()、calc()を通じて整数ビットフラグ（0または1）を生成します。このフラグにより、calc()スイッチ、@container style()クエリ、CSS if(style())関数という3つのオーサリングパスが利用可能になります。2つのアクセシビリティ問題も自動的に解決されます：100cqwはスクロールバー幅を除外するためメディアクエリと異なりシステムスクロールバーサイズがブレークポイントレイアウトに影響せず、tan(atan2(1rem))スカラーによりユーザーのシステムフォントサイズ変更がブレークポイント閾値を比例的にシフトさせ、emブレークポイントと同等の効果を自動的にもたらします。2026年4月時点のブラウザ対応率は91%と報告されています。
READ_FULL_LOGarrow_forwardArticle · レイアウトREAD TIME: 6m
masonry-gridlanes-wcを発表：Native-first Masonry Web Component
masonry-gridlanes-wc（v0.1.0）は、CSS Grid Level 3で策定中のdisplay: grid-lanes仕様に準拠しながら、現在のプロダクション環境でmasonryレイアウトを実現するlight-DOMカスタム要素です。ブラウザがgrid-lanesをネイティブサポートしている場合はコンポーネントが完全に退き、そうでない場合はmin-column-width、gap、アイテムのspanningという同じメンタルモデルを使ったJavaScriptフォールバックが配置を担います。masonry-grid-lanesとして登録されたこの要素はHTML属性で設定でき、列計算と間隔をDeclarativeに扱えます。テキスト主体のカードにはオプションのtext-metrics="pretext"属性でPretextライブラリを連携させ、DOM測定を行わずテキストメトリクスのみから高さを算出してリサイズ時の強制リフローを防ぎます。実験的なrowモード（mode="rows"）で水平パッキングもサポートしており、named grid lineやCSS単位解決などのフォールバックの限界についても率直に説明しています。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
今週のスタイリング分野はアニメーション・レイアウト・クロスブラウザ互換性を幅広くカバーしました。Josh W. Comeauは、CSSのpath()とMotionライブラリのWeb Animations API統合を使ってSVGパスアニメーションにディズニーのスクワッシュ＆ストレッチ原則を適用する方法を紹介し、2026年4月時点でSafariがSVGパス要素のCSS transitionをサポートしておらずブラウザカバレッジが約79%であることを率直に指摘しました。GSAP 3.15はtweenレベルのeaseReverseを導入し、逆再生方向にeasingカーブを正しく適応させる機能を提供し、非推奨となったyoyoEaseを置き換えます。
レイアウト面では、Kevin PowellがcontainerType: inline-sizeを使ってCSS container queryだけでflex-wrapを検出する方法をデモし、masonry-gridlanes-wc v0.1.0カスタム要素がCSS Grid Level 3のdisplay: grid-lanes仕様へのプログレッシブエンハンスメントラッパーとして今すぐmasonryレイアウトをプロダクションで実現できることを示しました。Ben Frainは@starting-style、allow-discrete、closedby="any"を使ってネイティブdialog要素のin/outアニメーションを実装する方法と、Safari特有のinsetリセットバグを詳しく解説しました。
2026年3月のBaselineダイジェストはWebTransport、CSS subgrid、contain-intrinsic-sizeがWidely Available状態に達したことを報告し、@propjockey/breakpoint-systemnpmパッケージはtan(atan2())演算でユーザーフォントサイズ設定に自動的に比例するピクセルベースのブレークポイントを91%のブラウザカバレッジで実現する方法を示しました。
Key Takeaways- ネイティブdialog要素のin/outアニメーションには、エントリーに@starting-style、終了にallow-discrete、そしてSafariのinsetワークアラウンドが必要です — 4つすべてが揃ってはじめてクロスブラウザ対応が完成します。
- GSAP 3.15のeaseReverseは逆方向アニメーションの問題をすっきり解決し、yoyoEaseを非推奨化 — モーダル・ドロワー・メニューなどのトグルUIパターンをアップデートしましょう。
- CSS subgridとcontain-intrinsic-sizeが2026年3月のBaselineでWidely Available確定 — polyfillなしでプロダクションに安全にデプロイできます。
