ホバー拡張ベント
ベントグリッドのタイルにカーソルを乗せると、その列がぐっと広がって隠れた説明が現れる。CSSの :has() だけで作るモダンなベント。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 3つの特徴をホバーで詳しく見せる
- 限られた高さで説明を出し入れする
- ダーク・カラフルな LP の特徴セクション
- 避ける場面
- 説明が長い（1行に収まらない）
- 4列以上（拡張しても差が小さい）
- :has() 非対応で動きが必須
- 構成要素
- タイル（button）
- 絵文字アイコン
- ラベル
- 隠れた説明
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Tab で各タイル（button）に到達すると列が広がる（:focus-visible）。Enter/Space で開いた状態を固定／解除（aria-expanded）
- 支援技術
タイルは button で絵文字（aria-hidden）＋ラベルが名前。aria-expanded で開閉を伝える。隠れた説明は max-width 0 でも DOM にあり読み上げに乗る。reduce で即時
- 動き
列幅 400ms cubic-bezier(.4,0,.2,1) で 1fr→2fr・説明は 400ms で幅展開＋300ms フェード。注目タイルに視線を集める。reduce では即時
デザインの要点
- 広げるのは親の grid-template-columns（1fr→2fr）。タイル自身の width を変えると隣が押し出されて段が崩れる
- 説明は max-width 0→160px と opacity の2段で出す。幅だけだと文字が途中まで見え、opacity だけだと場所が空かない
- ホバーだけでなく :focus-visible でも列を広げ、クリックで固定できるようにする。タッチとキーボードに同じ経路を残す
- 3列までに留める。4列以上では 2fr にしても差が小さく、どこが注目されているか読めない
実装メモ
拡張は親に :has(.tile:hover) を効かせて grid-template-columns を変える実装(モダンブラウザ対応)。タッチ端末では :has() のホバーが効かないので、クリック（タップ・Enter）で .is-open を付け替えています。
コード（コピーして使えます）
<div class="bento">
<button class="bento-tile" type="button" aria-expanded="false" style="--c1:#2b50c7;--c2:#6a8cff">
<span class="bento-emoji" aria-hidden="true">🚀</span>
<span class="bento-label">Launch</span>
<span class="bento-more">素早く立ち上げ</span>
</button>
<button class="bento-tile" type="button" aria-expanded="false" style="--c1:#c779d0;--c2:#ff9a8b">
<span class="bento-emoji" aria-hidden="true">🎨</span>
<span class="bento-label">Design</span>
<span class="bento-more">美しい見た目</span>
</button>
<button class="bento-tile" type="button" aria-expanded="false" style="--c1:#1f9d76;--c2:#5ad1a5">
<span class="bento-emoji" aria-hidden="true">⚡</span>
<span class="bento-label">Fast</span>
<span class="bento-more">軽快な動作</span>
</button>
</div>