CSSアンカーポジショニング入門

DRANK

2025年頃から利用可能になった、CSSの「アンカーポジショニング」。 異なる二つの要素の配置を同期させることに役立ちます。 この解説動画では、簡単なコードをもとに解説します。 ・リンクホバー時のツールチップの表示（position-area） ・隣り合うボタンへ、背景が移動する表現（anchor・anchor-size） ■デモのURL ■参考記事 CSSアンカーポジショニング入門〜anchor()・anchor-size()の使い方〜 - ICS MEDIA 階層メニューやトーストUIが簡単に作れる新技術！　JavaScriptで利用するポップオーバーAPI - ICS MEDIA モーダルやツールチップで役立つ! HTMLのcommandとinterestfor属性を使って、JSを減らすスマートなUI開発 - ICS MEDIA #HTML #CSS ■目次 0:00 オープニング 0:38 実用例の紹介 02:24 デモ1：ヒント表示（position-areaの解説） 05:33 デモ2：座布団の追従（anchor・anchor-sizeの解説） 10:13 まとめ