CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで商品カードを作成する方法｜サンプルコード付きでわかりやすく解説

CSSを使えば、商品画像・商品名・価格・購入ボタンをひとまとめにした洗練された「商品カード」を簡単に作成できます。この記事では、実際に動作するサンプルコードをもとに、商品カードの作り方を初心者向けに解説します。

商品カードとは？

商品カード（プロダクトカード）は、ECサイトなどでよく使われるUIコンポーネントです。box-shadowで柔らかい影を付けて立体感を出し、中央揃えのレイアウトと組み合わせることで、見栄えの良いカードを作ることができます。

サンプルコード

以下がCSSで商品カードを作成する完全なコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .productCard {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        max-width: 300px;
        margin: auto;
        text-align: center;
        font-family: arial;
        background-color: rgb(190, 224, 224);
    }
    .productDetails {
        color: rgb(26, 0, 51);
        font-weight: bold;
        font-size: 18px;
    }
    button {
        border: none;
        outline: 0;
        display: inline-block;
        padding: 8px;
        color: white;
        background-color: rgb(23, 31, 102);
        text-align: center;
        cursor: pointer;
        width: 100%;
        font-size: 18px;
    }
    button:hover, a:hover {
        opacity: 0.7;
    }
</style>
</head>
<body>
<h2 style="text-align:center">商品カードのサンプル</h2>
<div class="productCard">
<img src="https://images.pexels.com/photos/1152077/pexels-photo-1152077.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
style="width:100%"/>
<h1>レザーバッグ</h1>
<p class="productDetails">上質なエキゾチックレザー</p>
<p>価格：50ドル</p>
<p><button>今すぐ購入</button></p>
</div>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような商品カードが表示されます。

CSSで商品カードを作成する方法｜サンプルコード付きでわかりやすく解説

コードのポイント解説

  • .productCard：box-shadowでカードに影を付け、max-width: 300pxで幅を制限し、margin: autoで画面中央に配置しています。
  • .productDetails：商品の特徴テキストを太字・18pxで強調し、視認性を高めています。
  • button：border: noneとoutline: 0でデフォルトのボタンスタイルをリセットし、width: 100%でカード幅いっぱいの購入ボタンにしています。
  • :hover：opacity: 0.7により、マウスオーバー時に半透明へ変化し、「クリックできる要素」であることを直感的に伝えます。

まとめ

影・中央中央揃え・ホバーエフェクトという3つの基本テクニックを組み合わせるだけで、ECサイトで使えるレベルの商品カードが完成します。色やフォント、角丸（border-radius）などを追加して、自分のサイトに合ったデザインにカスタマイズしてみてください。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSでレスポンシブなカラムカードを作成する方法【コード例付きで解説】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブなカラムカードを簡単に作成できます。本記事では、floatとcalc()、そしてメディアクエリを組み合わせた基本的な実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 レスポンシブカラムカードの仕組み この手法のポイントは、主に以下の3つです。 calc(25% - 20px)：4枚のカードを横並びにするため、各カードの幅を「全体の25%からマージン分を引いた値」として計算しています。 float: left：カードを左に回り込ませることで、横一列に並べています。 @mediaクエリ：画面幅が