カードコンポーネントシミュレーター

カードコンポーネントのサイズ、形状、画像、テキストエリアなどを カスタマイズして、オリジナルのカードを作成できます。作成したカードの HTML、CSSコードをコピーして、あなたのプロジェクトで使用できます。

カード管理

カード設定

デバイスモード

カードサイズ

カード形状（角丸設定）

カード背景と境界線

カードマージン

カードイメージ設定

テキストエリア設定

テキストエリアのパディング

Card image

カードの見出し

これはカードの本文です。ここにカードの説明文や詳細情報を記載します。

コード

<div class="card-1">
  <div class="card-1-image">
    <img src="https://placehold.jp/300x200.png" alt="Card image">
  </div>
  <div class="card-1-text-area">
    <h3 class="card-1-heading">カードの見出し</h3>
    <p class="card-1-body">これはカードの本文です。ここにカードの説明文や詳細情報を記載します。</p>
  </div>
</div>