Capsule AI
/
EC・ショップ（テンプレートから）（複製）（アレンジ）（アレンジ）（アレンジ）
1部品・0〜数百トークン
↩ 戻す
履歴
複製
💬 ことばで直す
▶ Run
🔗 共有
🚀 デプロイ
⏹
☰
▷ プレビュー
</> コード
🖥 PC
📱 スマホ
↻ 新タブ
atomic.studio/s/53632
📄 index.html
コードを直接編集して「適用」でプレビューに反映
適用 ▷
<div class="min-h-screen bg-zinc-950 text-white"><div class="flex flex-col items-center justify-center min-h-[200px] p-6 md:p-8 lg:p-10"><h2 class="text-xl md:text-2xl lg:text-3xl font-bold text-[#374151] mb-4 md:mb-6 lg:mb-8">カウンター</h2><div class=" relative flex items-center justify-center w-24 h-24 md:w-28 md:h-28 lg:w-32 lg:h-32 rounded-full bg-gradient-to-br from-[#7c3aed] to-[#a78bfa] shadow-lg shadow-[#7c3aed]/30 cursor-pointer select-none transition-all duration-300 ease-out hover:scale-105 hover:shadow-[#7c3aed]/40 " role="button" tabindex="0" aria-label="カウント: 0"><span class="text-white text-3xl md:text-4xl lg:text-5xl font-bold drop-shadow-sm">0</span></div><p class="mt-4 md:mt-5 lg:mt-6 text-sm md:text-base lg:text-lg text-[#6b7280] font-medium tracking-wide">クリックしてカウントアップ</p></div></div>
▸ コンソール
1部品・0〜数百トークン
✕