モダンCSS・プラットフォーム
新しいCSSとブラウザAPIで、JSを減らす実装。
新しい CSS とブラウザ API で、JS を減らして実装する型のカテゴリ。View Transitions による一覧⇄詳細のモーフ、Anchor Positioning と Popover だけのツールチップ、details の高さアニメーション、コンテナクエリで入れ物の幅に適応するカード、:has() だけの選択式カードがある。原則はドハティ閾値。ブラウザ側で動く実装は JS の読み込みや実行を待たないので、応答が速く、壊れにくい。ただし対応状況がブラウザによって違うので、見本にはフォールバックの考え方も含む。同じ機能を JS で書き始める前に「もう CSS でできないか」を確かめるために引く。
使い分け部品の置き場所で形が変わるなら container-adaptive-card、選択状態の見た目は has-select-cards、開閉は details-disclosure、吹き出しは anchor-tooltip。view-transition-morph は非対応ブラウザで即時切替になることを許容できる画面に。
まず見る3件
- クリック
モーフ遷移（View Transitions）
View Transitions (morph)
カードをタップすると、そのサムネがそのまま拡大して詳細へなめらかに変形する。View Transitions APIで一覧⇄詳細をモーフさせる。
- 変形させたい 2 要素に同じ view-transition-name を付けるだけで、位置と大きさの補間はブラウザがやる。FLIP の計測コードが要らない
- 同名の要素が同時に 2 つあると遷移がエラーで即時切替になる。旧スナップショットの前に元へ、コールバック内で先へ、と付け外す
- 変形は 400ms。既定の 250ms だとサムネが「飛んだ」ように見え、一覧と詳細が同じ物だと伝わりにくい
- JS
- ドラッグ
コンテナクエリ適応カード
Container Query Card
同じカードが、画面幅ではなく“置かれた入れ物”の幅に応じて縦積み⇄横並びに切り替わる。右下をドラッグして幅を変えると形が変化する。
- container-type: inline-size は入れ物に付け、@container はカードに書く。カード自身を容器にすると自分の幅を参照できず判定が回る
- 境界は 260px。横並びで 96px のメディア＋見出しが 1 行に収まる最小幅から決めた。数字は中身で決め、画面幅の慣例で決めない
- 横並びではメディアを aspect-ratio 1・幅 96px の固定にする。16:9 のまま横に置くと縦が潰れて絵が読めない
- CSSのみ
- クリック
:has() 選択式カード
:has() Selectable Cards
ラジオを隠したプラン選択カード。選ぶとそのカードだけ枠と背景が変わり、チェックが点く。:has()だけで実現しJSは不要。
- radio は display: none にせず opacity 0 でカード全面に重ねる。消すとキーボードと読み上げから消え、全面に重ねれば当たり判定もカード全体になる
- 装飾は label:has(input:checked) で label 側に当てる。input + span の兄弟セレクタでは label の枠色までは届かない
- 選択の手がかりは枠色・背景・チェック記号の 3 つ。色覚差でも記号 1 つで判別できる
- CSSのみ
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| モーフ遷移（View Transitions） View Transitions (morph) | クリック | JS | 一覧⇄詳細で同じサムネが変形する遷移・モーダルの代わりに位置の連続性を保つ | default |
| アンカーツールチップ（JSなし） CSS Anchor Positioning Tooltip | ホバー | CSSのみ | アイコン・短いボタンの補足説明・JS を使わずに吹き出し位置を決めたいとき | default / hover / focus |
| ネイティブ開閉アニメ（details） Native Details Disclosure | クリック | CSSのみ | FAQ・配送/返品などの折りたたみ説明・JS なしで高さアニメ付きの開閉 | default |
| コンテナクエリ適応カード Container Query Card | ドラッグ | CSSのみ | サイドバーと本文で同じカードを別レイアウトに・置き場所の幅で縦積み⇄横並びを切り替える部品 | default |
| :has() 選択式カード :has() Selectable Cards | クリック | CSSのみ | プラン・配送方法など1つを選ぶカード・ラジオをカード全体で押させたい選択 | default / focus |
すべての見本（5件）
- クリック
モーフ遷移（View Transitions）
View Transitions (morph)
カードをタップすると、そのサムネがそのまま拡大して詳細へなめらかに変形する。View Transitions APIで一覧⇄詳細をモーフさせる。
- JS
- ホバー
アンカーツールチップ（JSなし）
CSS Anchor Positioning Tooltip
ボタンにホバー/フォーカスすると、CSS Anchor PositioningとPopoverだけで位置が決まる吹き出しが出る。画面端では自動で上下反転。JS不要。
- CSSのみ
- クリック
ネイティブ開閉アニメ（details）
Native Details Disclosure
HTMLの<details>だけで、中身がふわっと高さアニメーションしながら開閉する。::details-contentとcalc-size()でJSなしのアコーディオン。
- CSSのみ
- ドラッグ
コンテナクエリ適応カード
Container Query Card
同じカードが、画面幅ではなく“置かれた入れ物”の幅に応じて縦積み⇄横並びに切り替わる。右下をドラッグして幅を変えると形が変化する。
- CSSのみ
- クリック
:has() 選択式カード
:has() Selectable Cards
ラジオを隠したプラン選択カード。選ぶとそのカードだけ枠と背景が変わり、チェックが点く。:has()だけで実現しJSは不要。
- CSSのみ