レイアウト Anchor Positioning入門 CSS Anchor Positioning API は、anchor-nameとposition-anchorプロパティを使ってツールチップやドロップダウンなどのフローティング要素を任意のアンカー要素に紐付け、JavaScriptベースの位置決めロジックを置き換えます。position-areaプロパティはアンカー周囲の3x3 グリッドの概念でターゲットを配置し、position-try-fallbacksはビューポートの空きが不足した際にツールチップを自動的に反対側へ切り替えます。Level 2 仕様はanchored container queries（container-type: anchored）を導入しており、2026年7月時点ではChromiumのみ対応 で、アクティブなフォールバック位置に基づいてCSS側でキャレット方向を変更できます。flip-blockキーワードはクロスブラウザの垂直反転ショートカットを提供し、方向性マージンも自動でミラーリングします。フォールバック戦略としてはOddbirdポリフィルと@supports機能クエリによる段階的デグラデーションがあります。
Read Articlearrow_forward Video · アニメーション
CSSで「何もない状態」からAnimation可能に このCoding2GO の動画は、dialogやReactの条件付きレンダリングコンポーネントなど、以前のCSS状態を持たない要素のトランジションに最初のフレームの起点を提供するCSSルール@starting-styleを解説します。@starting-styleがないと、dialogは開く際に既にopen属性セレクタと一致してしまい、ブラウザには遷移元となる「前」の状態がありません。解決策は@starting-style内でopacity: 0とscale: 0.8を宣言し、ブラウザがそれらを要素の初期値として扱うよう指示することです。dialogの場合、displayやoverlayなどのdiscreteプロパティもallow-discreteとともにtransitionリストに追加する必要があり、フェードアウトが完了するまで要素がレンダリング状態を維持します。この動画はそのパターンを::backdrop疑似要素やReactのリストレンダリングにまで拡張し、すべてのモーションを@media (prefers-reduced-motion: reduce)で囲むことを最後に呼びかけます。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · アニメーション READ TIME: 6m
Ease In、Ease Out、その間のすべて この記事はcubic-bezier()イージングを、デザイナーがFigmaなどのベクターツールで既に使っているベジェハンドルの仕組みと結びつけてわかりやすく説明します。cubic-bezier(x1, y1, x2, y2)の4つ の数値は2つ のコントロールハンドルを表し、x値は時間（0 〜1 に制限）、y値は進捗度を示し、この範囲を超えてオーバーシュートや巻き戻し効果を生み出すことができます。CSSキーワードプリセット5 種類を正確なcubic-bezier値にマッピングし、ease-outはcubic-bezier(0, 0, 0.58, 1) であることを示します。入場にはease-out、退場にはease-in、表示位置間の移動にはease-in-outというわかりやすいルールを提示します。単一のベジェ弧でモデル化できない物理ベースのバウンスには、CSS linear()で本物のスプリング方程式をエンコードできます。
READ_FULL_LOGarrow_forward Article · タイポグラフィ READ TIME: 11m
印刷Pageのように組版する 元プリントデザイナーが執筆したこの記事は、JavaScriptを使わずにエディトリアルタイポグラフィをウェブに実現するCSS制御技術6 種類を紹介します。流動的なタイプスケールはclamp()にrem + vwの優先値を組み合わせ、ビューポートに追従しながらユーザーのフォント設定も尊重するよう構成します。text-wrap: balanceはヘッドラインの不揃いな行（Chromiumで最大6行 まで）を防ぎ、text-wrap: prettyは本文末尾の数行 だけ調整してオーファン単語を修正します。initial-letterはネイティブのドロップキャップを提供し（Firefox未対応、グレースフルデグラデーション ）、font-optical-sizing: autoはレンダリングサイズからopszバリアブルフォント軸を自動駆動します。hanging-punctuation: firstは先頭引用符をマージンに送り出して光学的整列を実現します（現在Safari専用 ）。6つ のプロパティすべてのChrome・Firefox・Safari対応表も掲載されています。
READ_FULL_LOGarrow_forward Article · カラー READ TIME: 5m
JavaScriptなしでDark Mode Toggleを作る Jakub T JankiewiczによるこのHTMLラジオ入力とCSS :has()疑似クラスを組み合わせたJavaScriptを使わないダークモードトグルの実装方法を解説します。:root:has(#mode_dark:checked)セレクタは親を認識する条件として機能し、ページ全体で--bgと--fgのCSSカスタムプロパティの上書きをトリガーします。ラジオ入力はappearance: none、opacity: 0、pointer-events: noneで視覚的に隠し、太陽と月の絵文字を持つラベルがクリック可能なUIを担います。@media (prefers-color-scheme: dark)クエリでシステム設定に合わせたデフォルト状態を設定し、手動のラジオ選択がそれを永続的に上書きします。EleventyのようなSSGツールや、AIクローラーや低帯域ユーザーにJavaScriptが届かない環境で特に有効です。
READ_FULL_LOGarrow_forward Article · セレクター READ TIME: 3m
CSSのWildcard Remy Sharpは、CSSにはワイルドカード要素セレクタが存在しないため、rem-* { }のように接頭辞を共有するすべてのカスタム要素を対象とするルールを書けないと指摘します。現在使える回避策は[class^="btn-"]（前方一致、壊れやすい）や[class*="btn"]（含む、過剰に広い）などの属性セレクタのみで、どちらも要素タグ名には機能しません。同じ欠如はquerySelectorAllにも影響し、接頭辞でカスタム要素を初期化するには対象セレクタではなくDOM全体のスキャンが必要です。SharpはLea Veroupが2年 以上前にCSSWGへこの問題を提起したが進展がないと述べ、CSS文法上この目的で*文字が使用可能かどうかも検討しています。
READ_FULL_LOGarrow_forward Article · 3Dアニメーション READ TIME: 12m
Blender Camera PathとThree.js・GSAPでScroll-driven 3D Galleryを構築 Gaspard HeddeによるこのCodropsチュートリアルは、BlenderでBezier曲線を描いてカメラが追従するスクロール駆動の3 Dギャラリーの構築方法を解説します。曲線はBlenderのZ-up座標系をThree.jsのY-up系に変換するPythonスクリプトを通じてJSONとして書き出します。Three.jsではCatmullRomCurve3で曲線を再構成し、曲線のローカル法線ベクトルから派生したランダムな横方向・奥行きオフセットで500 枚の画像プレーンを配置します。GSAP のquickToはカメラスムージング（power3.out、1秒 ）と各プレーンのスケールアニメーション双方を担い、フレームあたり500個 の新tween生成を回避します。近接ベースのフォーカスシステムはカメラに近づいた画像を最大14倍 に拡大し、3 乗の減衰（f cubed ）で効果を局所化します。
READ_FULL_LOGarrow_forward summarize Digest_Summary
今週のCSSカバレッジはJavaScript依存を削減する新しいプラットフォーム機能に集中しました。 CSS Anchor Positioning API はanchor-name・position-anchor・position-areaを使ってツールチップやドロップダウンを任意のアンカー要素に正確に配置し、position-try-fallbacksがビューポートの端での自動反転を処理します。近く公開されるLevel 2 仕様はCSSベースのキャレット方向制御のためのcontainer-type: anchoredを追加しますが、2026年7月 時点ではChromiumのみの対応です。合わせて@starting-styleが長年のギャップを埋めます。dialogや条件付きレンダリングされたReactコンポーネントのような要素はこれまでCSSトランジションがアニメーションを開始する「前」の状態を持てませんでした。@starting-style内に初期値を宣言し、displayやoverlayのようなdiscreteプロパティに対してtransitionリストにallow-discreteを追加することで、JavaScriptなしで滑らかな入退場アニメーションが実現します。
タイポグラフィも重点的に取り上げられました。clamp()ベースの流動的タイプスケール、見出しと本文の折り返しのためのtext-wrap: balanceとtext-wrap: pretty、ドロップキャップのためのinitial-letter、バリアブルフォントのopsz軸を制御するfont-optical-sizing: auto、光学的マージン整列のためのhanging-punctuation: first（現在Safari専用）という6つ のCSS編集タイポグラフィ制御手法が紹介されました。cubic-bezier()イージングをCSSキーワードプリセット5 種の正確な値とともに体系的に整理したガイドも公開され、入場にはease-out・退場にはease-in・画面内移動にはease-in-outという原則が示されました。単一のベジェ弧でモデル化できない物理ベースのバウンスにはCSS linear()でスプリング方程式をエンコードする方法も紹介されました。
ラジオ入力と:has()疑似クラスを組み合わせたJavaScriptなしのダークモードトグルも紹介されました。:root:has(#mode_dark:checked)を使ってカスタムプロパティ値を切り替える手法は、静的サイトやAIクローラーにも機能します。Remy Sharp はCSSのワイルドカード要素セレクタの欠如 — rem-*要素を対象とするルールを書けない問題 — についての議論を提起し、Lea Verou が2年 前にCSSWGへ問題提起したにもかかわらずまだ進展がないことを指摘しました。
Key Takeaways CSS Anchor Positioning（anchor-name、position-area、position-try-fallbacks）はフローティングUI配置の標準アプローチになりました。Level 2 のcontainer-type: anchored機能は2026年7 月時点でChromiumのみ対応です。 @starting-styleはdialogや条件付きレンダリング要素にCSSネイティブの入退場トランジションを実現します。display: noneの突然の切り替えを防ぐため、transitionプロパティにallow-discreteを組み合わせる必要があります。 clamp()流動スケール・text-wrap: balance/pretty・initial-letter・font-optical-sizing: auto・hanging-punctuation: firstの6つ のCSS プロパティを使えば、JavaScriptなしで印刷品質のタイポグラフィをウェブに実現できます。 
