Card Generator
カードの余白・角丸・影・枠線・ホバー効果を視覚的に設定し、CSS をその場でコピーできます。
レイアウト
色と枠線
影とホバー
プレビュー
カードのタイトル
行の高さ・内側の余白・コントラストを確かめられるサンプル本文です。
プレビューは生成した CSS を適用した実際のカード要素です。ホバー効果を確認してからコードをコピーしてください。
使い方
- カードの内側の余白・角の丸み（ピクセル）とトランジション（ミリ秒）を設定します。
- 背景色と文字色を選び、枠線の太さと枠線の色を指定します。
- 影の段階（なし・小・中・大）とホバー効果（なし・少し浮き上がる・影を濃くする）を選びます。
- プレビューにカーソルを合わせてホバー状態を確認し、CSS を生成を押してスタイルシートと HTML スニペットをコピーします。
こんなときに
- 商品一覧のグリッド —— コンポーネントを書く前に、並ぶカードの余白と角丸をそろえます。
- 料金表 —— おすすめプランのカードに、少しの浮き上がりと濃い影を試せます。
- ドキュメントのパネル —— ページのトークンに合う注意カードや警告カードを作れます。
- CSS の学習 —— box-shadow と transform を組合わせたホバーの浮き上がりを学べます。
プライバシーについて
生成ツールは純粋なブラウザー内の JavaScript です。入力はライブのカードと CSS 文字列を更新するだけなので、スタイルがどこかに送信されることはなく、オフラインでも使えます。
FAQ
Q: 浮き上がる効果で配置は崩れませんか？ A: 崩れません。transform: translateY を使うため再計算は起きず、並ぶカードはそのままで、ホバーしたカードだけが上がります。
Q: 角が立ったカードも作れますか？ A: できます。角の丸みを 0 にすれば角ばったカードになり、4 px 程度の小さな値にすれば柔らかい印象になります。
Q: 影の見え方が端末で違うのは？ A: box-shadow はぼかしを使うため、低解像度の画面やダークモードでは描画のされ方が変わります。出力は標準的な CSS なので、差は描画側の話で、このツールが特別なことをしているわけではありません。
Q: プレビューは画像ですか？ A: いいえ。生成した CSS を適用した実際のカード要素なので、内側の余白や文字の回り込みも本番と同じふるまいをします。
データはこのデバイス内にとどまります
Card Generator は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。