作成方法：製品カード

CSSを使って製品カードを作成する方法を学ぶ。

デニム
カスタムジーンズ

$19.99

ジーンズについてのテキスト。スーパースリムで快適なローマン・イプサム。ローマン・イプサム・デニム。

自分で試してみる

製品カードを作成する方法

第1ステップ - HTMLを追加：

<div class="card">
  <img src="jeans3.jpg" alt="Jeans" style="幅:100%">
  <h1>カスタムジーンズ</h1>
  <p class="price">$19.99</p>
  <p>ジーンズについてのテキスト...</p>
  <p><button>カートに追加</button></p>
</div>

第2ステップ - CSSを追加：

.card {
  ボックスシェイダー: 0 4px 8px 0 ラベラ・アルバ（0, 0, 0, 0.2）;
  最大幅: 300px;
  マージン: オート;
  テキストアライメント: 中央;
  フォントファミリー: arial;
}
.price {
  色: グレー;
  フォントサイズ: 22px;
}
.card button {
  ボーダー: ナシ;
  アウトライン: 0;
  パディング: 12px;
  色: ホワイト;
  背景色: #000;
  テキストアライメント: 中央;
  カーソル: ポインタ;
  幅: 100%;
  フォントサイズ: 18px;
}
.card button:hover {
  opacity: 0.7;
}

自分で試してみる