ブログ

同じサイト内のページ移動にアニメーションを付ける、ページ間View Transitionsの基本を紹介します。@view-transitionの最小コード、view-transition-nameの使い方、対応していないブラウザでのフォールバックと動きを減らす配慮まで整理します。

details要素に同じname属性を付けるだけで、1つ開くとほかが閉じるアコーディオンをHTMLだけで作れます。summaryの基本、openと:openでの装飾、JavaScriptを使う場合との違い、開閉アニメーションを追加するときの対応状況まで整理します。

角をスクワークルなどへ変えるcorner-shapeと、height:autoへのトランジションを可能にするinterpolate-sizeを紹介します。どちらも一部ブラウザ先行のため、対応状況と@supportsを使った段階的な導入方法もコード例で確認します。

@starting-styleとtransition-behavior: allow-discreteを使い、display:noneから表示される要素やpopover・dialogをCSSでフェードさせます。Baseline 2024の対応状況とoverlayを含む最小構成も整理します。

HTMLのbutton要素に追加されたcommandとcommandforを使い、dialogやpopoverをJavaScriptなしで開閉する方法を紹介します。show-modal、request-close、独自コマンドまで、onclickとの違いと対応範囲をコード例で整理します。

2026年にBaseline Widely availableになった機能から、:user-invalid、lh・rlh、clip-path、search要素を紹介します。Newly availableとの違いと、実務で使いやすい場面、clip-pathのBaseline表記の注意点を整理します。

2026年にBaseline Newly availableになったCSSから、field-sizing、contrast-color()、:open、@scope、コンテナスタイルクエリを紹介します。最新版の主要ブラウザで使える範囲と、古い環境へ配慮する考え方も整理します。