EC 商品カード（セール・カート付き）
商品画像・セールバッジ・お気に入りハート・価格・カートボタンという、EC の商品一覧に必要な要素を 1 枚にまとめたカードです。バッジとハートは position:absolute で画像の角に重ね、本体側を position:relative にすることで基準位置を作っています。
解説
商品画像・セールバッジ・お気に入りハート・価格・カートボタンという、EC の商品一覧に必要な要素を 1 枚にまとめたカードです。バッジとハートは position:absolute で画像の角に重ね、本体側を position:relative にすることで基準位置を作っています。割引バッジは background で目立つ色を敷き、お気に入りボタンは :hover で色が変わる小さなインタラクションを持たせています。
こんな場面で使えます
- ネットショップの商品一覧・カテゴリ一覧ページ
- セール特集やタイムセールのまとめ表示
- サブスクや予約サービスのプラン一覧
カスタマイズではバッジの文言を -30% から NEW や SOLD OUT に変えるだけで用途が広がります。ハートやカートは見た目だけのボタンなので、実際の動作は JavaScript で click イベントを足してください。お気に入りボタンには aria-label が付いており、スクリーンリーダーでも役割が伝わります。色を変える場合はバッジとカートボタンを同系色で揃えると統一感が出ます。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
お気に入りやカートボタンは押すと動きますか。
見た目のパーツとして用意されているので、押しただけでは状態は変わりません。実際にお気に入り登録やカート追加を行うには、JavaScript で click イベントを付けて処理を書く必要があります。
セールバッジの文字や色は変えられますか。
はい。バッジは独立した要素なので、テキストを書き換えれば NEW や 限定 などに変えられますし、background の色を変えればブランドカラーに合わせられます。位置は top と left の値で微調整できます。