EC・商品
カラースウォッチ
色の丸をタップすると商品プレビューの色と選択中カラー名が変わる。選択中は白いリングでハイライト。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="sw-wrap">
<div class="sw-preview">
<div class="sw-product" id="swProduct">
<svg viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="120" height="80" rx="12" id="swRect" fill="#2b50c7"/>
<ellipse cx="60" cy="38" rx="22" ry="16" fill="rgba(255,255,255,.2)"/>
<rect x="36" y="55" width="48" height="6" rx="3" fill="rgba(255,255,255,.25)"/>
</svg>
</div>
</div>
<p class="sw-selected-name" id="swName">インディゴブルー</p>
<div class="sw-list" role="listbox" aria-label="カラー選択" id="swList">
<button class="sw-dot sw-active" data-color="#2b50c7" data-name="インディゴブルー" role="option" aria-selected="true" style="background:#2b50c7;" aria-label="インディゴブルー"></button>
<button class="sw-dot" data-color="#c74040" data-name="チェリーレッド" role="option" aria-selected="false" style="background:#c74040;" aria-label="チェリーレッド"></button>
<button class="sw-dot" data-color="#2a9d5c" data-name="フォレストグリーン" role="option" aria-selected="false" style="background:#2a9d5c;" aria-label="フォレストグリーン"></button>
<button class="sw-dot" data-color="#8b5cf6" data-name="ラベンダー" role="option" aria-selected="false" style="background:#8b5cf6;" aria-label="ラベンダー"></button>
<button class="sw-dot" data-color="#d97706" data-name="アンバーゴールド" role="option" aria-selected="false" style="background:#d97706;" aria-label="アンバーゴールド"></button>
</div>
</div>