ホバーで浮かせる

[ ] のところを書きかえて使ってください。英語のほうが伝わりやすいツールもあります。

クリックできる[カード]に、ホバーで少し浮く効果をつけてください。transform で4pxだけ上げて、影は重ねた要素の opacity で出す。キーボードで選んだときも同じ見た目に。動きを減らす設定の人には、浮かせずに枠の色だけ変えてください。

Add a lift-on-hover effect to the clickable [cards]: move them up 4px with transform and fade in a shadow layer with opacity. Apply the same look on keyboard focus. For people who prefer reduced motion, don't move them; just change the border color.

ひとりAIラボ作成のテンプレートです（各社の公式ガイドの文ではありません）。

確認日 2026年11月2日。公式ガイドのページを開いて、本文にこの言葉（英語）が出てくるかを見ました。「公式記載なし」は、出典のページに見当たらなかったという意味です。

• 操作をきっかけに起きる動きは、なくても困らないなら、止められるようにします（WCAG 2.3.3、レベルAAA）。^[6]
• 動かすのは transform と opacity にします。レイアウトや描画のやり直しが起きるプロパティは、どうしても必要なとき以外は避けます。^[7]

1. 1.v0 Docs（トップ）（外部サイト、新しいタブで開く）https://v0.app/docs
2. 2.v0 Docs「Text Prompting」（外部サイト、新しいタブで開く）https://v0.app/docs/text-prompting
3. 3.v0 Docs「Design Mode」（外部サイト、新しいタブで開く）https://v0.app/docs/design-mode
4. 4.Lovable Docs「Prompting best practices」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-one
5. 5.MDN「Using CSS transitions」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
6. 6.W3C「Understanding SC 2.3.3: Animation from Interactions」（外部サイト、新しいタブで開く）https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html
7. 7.web.dev（アニメーションの性能の記事）（外部サイト、新しいタブで開く）https://web.dev/articles/animations-guide