CSS機能 CSS Anchor Positioning入門：anchor-name、position-anchor、position-area CSS anchor positioningは、anchor-name（参照要素に<dashed-ident>形式、例：--tooltip-anchorで指定）、position-anchor（位置指定要素に宣言、position: absoluteまたはfixedが必須）、position-area（アンカーを囲む3×3 の概念的グリッドのいずれかのセルに要素を配置）という3つ のプロパティを使い、Popper.js やFloating UI といったJavaScriptライブラリなしで要素間の位置関係を宣言的に表現できます。position-areaの重要な特性として、要素を単に移動させるのではなく、そのグリッド領域を要素のcontaining blockとして再定義する点が挙げられます。これにより、パーセント指定のサイズやinset: 0はビューポートではなくその領域に対して機能します。物理キーワード（top、right）と論理キーワード（block-start、inline-end）は同じposition-area値に混在させることができません。Popover APIを使用する場合、ブラウザが暗黙的にアンカー関係を確立するため、anchor-nameとposition-anchorは不要です。領域に合わせてサイズ調整する際は必ずbox-sizing: border-boxを追加し、キーボードフォーカス順序とスクリーンリーダーのセマンティクスはこのAPIが管理しないことに注意が必要です。
Read Articlearrow_forward Video · CSS機能 5:58
CSS Gridが複雑に感じられる理由とシンプルに保つ方法 Kevin Powell は、CSS Gridが複雑だという認識は主に誤った使い方から来ていると主張しています。ヘッダー、サイドバー、メイン、フッターといったページ全体のレイアウトに明示的なライン番号やgrid-template-areasを適用するより、スコープを絞ったシンプルなグリッドで十分 なケースがほとんどだという主張です。デモでは定番のholy grailレイアウトをリファクタリングし、全幅のヘッダーとフッターをグリッドから切り離して、中央コンテンツ領域にのみ3 カラムのgrid-template-columns（auto 1fr auto）定義を残すことで、各子要素へのライン番号指定を不要にしています。レスポンシブ対応は860px 未満でgrid-template-columnsを解除する単一のネストされたメディアクエリで十分 で、カラムは自然にスタックします。Powellはflexboxとの違いも比較しており、CSS Gridはアイテムがwrapした際に予測しにくいflex-growの相互作用なしに、親要素で子カラムのサイズを一度に宣言できます。実践的な結論は、まず少数のトラックのみを扱う小さく目的に特化したグリッドをデフォルトとし、行と列を協調して制御する必要がある場合にのみgrid-template-areasと明示的なライン番号を使用することです。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Video · CSS機能 11:10
新しいCSS関数が最高です CSSに@function at-ruleによるネイティブカスタム関数が登場しました（現在実験的機能 ）。Web Dev SimplifiedのKyleが段階的に複雑なサンプルで解説しています。関数は@function --name(--param <type>)形式で宣言し、returnキーワードの代わりに特別なresultプロパティで値を返します。通常のCSSカスケード順序に従うため、最後のresult代入が最終値となり、関数本体内でメディアクエリを使った条件分岐が可能です。<color>、<number>、<percentage>といった型アノテーションは現時点では任意ですが、機能が成熟するにつれてdev toolの警告機能を支えるようになります。関数はCSSレイヤーに従うため、優先度の低いレイヤーで同名の関数を定義するとJavaScriptのfunction shadowingに似たオーバーロードとして動作します。動画では、ネストされたメディアクエリを使って3つ のブレークポイント（≤200px 、200 〜300px 、それ以上）で値を切り替える--responsive(--small, --medium, --large)ユーティリティを実演し、--largeパラメーターが省略された場合にCSSのif()スタイルクエリで柔軟にフォールバックする方法も紹介しています。JavaScriptと異なり早期returnがなく、すべての条件パスが評価され、カスケード順で最後のresultがブラウザの使用値になるという点が重要な考え方の転換です。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · クリエイティブコーディング READ TIME: 1m
ミリオンダラー・グリッド Patrick Brosset は、2005年 のMillion Dollar Homepage1 ピクセル1 ドル（最小購入10×10 ピクセル）で広告スペースを販売したバイラルマーケティング — をCSS Gridで再現しました。元のページは一枚につなぎ合わせた画像とHTMLイメージマップで実装されていましたが、この再現作では100 列100行 のCSSグリッドと、grid-areaプロパティで各広告ブロックを配置するdiv要素に置き換えています。このデモは、大規模な明示的グリッド上で精密かつ不均一な配置を処理するCSS Gridの能力を具体的に示す事例であり、grid-areaショートハンドが元のピクセル座標に直接マッピングされます。元の画像アセットを再利用し、明示的な不適切コンテンツは除去されています。
READ_FULL_LOGarrow_forward Article · CSS機能 READ TIME: 1m
CSSスクロールマーカー：JavaScriptなしでカルーセルを作る ::scroll-marker疑似要素は、スクロールコンテナに直接連結されたインタラクティブなナビゲーションインジケーターを生成する新しいCSS機能です。クリック時に特定のセクションへスナップするアンカーリンクのように動作し、JavaScriptなしでカルーセルのページネーションドットを実装できます。Scroll markersはスクロールコンテナの子要素に宣言してスクローラーに自動接続されるため、従来のドット型カルーセルに必要だったJavaScriptのイベントリスナー、スクロール計算、アクティブ状態管理を置き換えます。Usman Writesによるこの記事は、この機能をスクリプティングが必要だったUIパターンをCSSが継続的に吸収するトレンドの一例として紹介しています。公開時点ではブラウザサポートが初期段階のため、本番環境での使用は対応状況を確認した上で判断する必要があります。
READ_FULL_LOGarrow_forward Article · CSS機能 READ TIME: 9m
CSSアンカー関数による精密な配置：anchor()、anchor-center、anchor-size() Schalk Neethling によるCSS anchor positioningシリーズ第2 弾は、position-areaの3×3 グリッドを超えた3つ の関数でピクセル精度の制御を提供します。anchor(<side>)はcontaining blockエッジから指定されたアンカーエッジまでの距離として解決され、inset-block-startやleftなどのinsetプロパティで使用します。物理的・論理的・コンテキスト（inside/outside）・パーセントキーワードをサポートしますが、物理キーワードは対応するプロパティの軸と一致させる必要があります。calc()と組み合わせることで正確なギャップ（例：calc(anchor(start) + 0.5rem)）や、inset-block-startとinset-block-endで異なるアンカーを参照するマルチアンカーストレッチが可能になります。Popover APIの重要な注意点：UAスタイルシートが[popover]にinset: 0; margin: autoを設定するため、anchor関数を正しく動作させるにはinset: auto; margin: unsetで明示的にリセットする必要があります。anchor-centerはalign-self/justify-selfの値で、要素のエッジをアンカーの中点に移動させるだけのanchor(center)と異なり、その軸で位置指定要素をアンカーの中心に完全に揃えます。anchor-size(<dimension>)はアンカーの測定されたサイズを返し（例：inline-size: anchor-size(inline)でドロップダウンをトリガーの幅に合わせるなど）、anchor()と異なり軸の一致制約はありません。
READ_FULL_LOGarrow_forward summarize Digest_Summary
CSSはまたもJavaScriptの領域を取り込みながら2026年 を迎えました。中心にあるのはSchalk Neethling によるCSS Anchor Positioning の2 部作です。第1回 はanchor-name、position-anchor、3×3 のposition-areaグリッドを、第2回 はグリッドでは足りない場面のためのanchor()、anchor-center、anchor-size()を扱います。ポジショニングライブラリなしのツールチップ・ドロップダウン・コンテキストメニューは、もはやデモではなく実務のワークフローです。
同じ流れは今週の他の記事にも通じています。::scroll-markerはJavaScript不要のカルーセルを現実にし、Web Dev Simplifiedはオーバーロードまで備えたCSSカスタム関数 を解説します。一方でKevin Powell は「Gridを作り込みすぎない」という新年の抱負を提案し、Patrick Brosset は2005年 のMillion Dollar Homepage100×100 のCSS gridひとつで再現して、レイアウト機能の進化を鮮やかに示しました。
Key Takeaways CSS Anchor Positioningは実務のツールチップ・ドロップダウンに使える段階です。まずposition-areaを習得し、ピクセル精度が必要なときだけanchor()を使いましょう。 ::scroll-markerとCSSカスタム関数は、JavaScriptが必要だった機能をCSSが取り込み続けていることを示しています。 Gridの複雑さは多くの場合自ら招いたものです。フル仕様に手を出す前に、シンプルなトラック定義から始めましょう。 
