【コピペOK】シンプルでおしゃれなカードデザイン15選【HTML・CSS】

Webサイトで使える、シンプルでおしゃれなカードデザインを15種類まとめました。

すべてHTMLとCSSをコピーして使用でき、文字や色、サイズも自由に変更できます。

記事やサービスの紹介、プロフィール、リンクの案内など、サイトの雰囲気や用途に合ったカードを探してみてください。

シンプルで使いやすいカード

まずは、さまざまなサイトに取り入れやすい、シンプルなカードデザインです。

装飾を控えめにしているため、記事やサービスの紹介など、幅広い用途に合わせられます。

DESIGN 01

枠線だけのカード

細い枠線で囲んだ、シンプルなカードデザインです。
装飾が控えめで、さまざまな用途に使えます。

<div class="card-design-01">

  <p class="card-design-01__title">
    枠線だけのカード
  </p>

  <p class="card-design-01__text">
    細い枠線で囲んだ、シンプルなカードデザインです。<br>
    装飾が控えめで、さまざまな用途に使えます。
  </p>

</div>

.card-design-01 {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 28px;
  box-sizing: border-box;

  color: #626873;
  background: #fff;
  border: 1px solid #dfe2e8;
  border-radius: 12px;
}

.card-design-01__title {
  margin: 0 0 14px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-01__text {
  margin: 0;

  color: #626873;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-01 {
    padding: 22px 20px;
  }

  .card-design-01__title {
    font-size: 18px;
  }

  .card-design-01__text {
    font-size: 14px;
  }
}

色の変更： CSS内の「#dfe2e8」を、お好みのカラーコードへ変更してください。

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

DESIGN 02

シンプルな影付きカード

やわらかな影を付けた、基本的なカードデザインです。
白い背景でもカードの範囲が分かりやすく、さまざまな内容の紹介に使えます。

<div class="card-design-02">

  <p class="card-design-02__title">
    シンプルな影付きカード
  </p>

  <p class="card-design-02__text">
    やわらかな影を付けた、基本的なカードデザインです。<br>
    白い背景でもカードの範囲が分かりやすく、さまざまな内容の紹介に使えます。
  </p>

</div>

.card-design-02 {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 28px;
  box-sizing: border-box;

  color: #626873;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(41, 45, 56, 0.12);
}

.card-design-02__title {
  margin: 0 0 14px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-02__text {
  margin: 0;

  color: #626873;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-02 {
    padding: 22px 20px;
  }

  .card-design-02__title {
    font-size: 18px;
  }

  .card-design-02__text {
    font-size: 14px;
  }
}

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

DESIGN 03

左ライン付きカード

左側にラインを入れて、内容を分かりやすく強調したカードです。
シンプルな形のまま、さりげないアクセントを加えられます。

<div class="card-design-03">

  <p class="card-design-03__title">
    左ライン付きカード
  </p>

  <p class="card-design-03__text">
    左側にラインを入れて、内容を分かりやすく強調したカードです。<br>
    シンプルな形のまま、さりげないアクセントを加えられます。
  </p>

</div>

.card-design-03 {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 28px;
  box-sizing: border-box;

  color: #626873;
  background: #fff;
  border-left: 4px solid #c98792;
  border-radius: 0 12px 12px 0;
}

.card-design-03__title {
  margin: 0 0 14px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-03__text {
  margin: 0;

  color: #626873;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-03 {
    padding: 22px 20px;
  }

  .card-design-03__title {
    font-size: 18px;
  }

  .card-design-03__text {
    font-size: 14px;
  }
}

色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

DESIGN 04

背景色付きカード

背景全体に淡い色を付けたカードデザインです。
内容をひとまとまりに見せながら、やさしい印象を加えられます。

<div class="card-design-04">

  <p class="card-design-04__title">
    背景色付きカード
  </p>

  <p class="card-design-04__text">
    背景全体に淡い色を付けたカードデザインです。<br>
    内容をひとまとまりに見せながら、やさしい印象を加えられます。
  </p>

</div>

.card-design-04 {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 28px;
  box-sizing: border-box;

  color: #626873;
  background: #f8edef;
  border-radius: 12px;
}

.card-design-04__title {
  margin: 0 0 14px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-04__text {
  margin: 0;

  color: #626873;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-04 {
    padding: 22px 20px;
  }

  .card-design-04__title {
    font-size: 18px;
  }

  .card-design-04__text {
    font-size: 14px;
  }
}

色の変更： CSS内の「#f8edef」を、お好みのカラーコードへ変更してください。

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

画像を使ったカード

続いて、画像と文章を組み合わせたカードデザインです。

記事や商品、サービスなどの内容を視覚的に伝えやすく、写真を活かした案内やリンクに向いています。

DESIGN 05

画像が上に入ったカード

画像が上に入ったカード

画像の下にタイトルと説明文を配置した、定番のカードデザインです。

<div class="card-design-05">

  <img
    class="card-design-05__image"
    src="ここに画像のURLを入力"
    alt="">

  <div class="card-design-05__content">

    <p class="card-design-05__title">
      画像が上に入ったカード
    </p>

    <p class="card-design-05__text">
      画像の下にタイトルと説明文を配置した、定番のカードデザインです。
    </p>

  </div>

</div>

.card-design-05 {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;

  color: #626873;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(41, 45, 56, 0.12);
}

.card-design-05__image {
  display: block;

  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-design-05__content {
  padding: 22px;
}

.card-design-05__title {
  margin: 0 0 10px;

  color: #292d38;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-05__text {
  margin: 0;

  color: #626873;
  font-size: 14px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-05__content {
    padding: 20px;
  }

  .card-design-05__title {
    font-size: 18px;
  }
}

画像の変更： 「ここに画像のURLを入力」の部分を、使用する画像のURLへ変更してください。

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

DESIGN 06

画像と文章が横並びのカード

横並びのカード

画像と文章を横に並べたカードです。
狭い画面では、縦並びに切り替わります。

<div class="card-design-06">

  <img
    class="card-design-06__image"
    src="ここに画像のURLを入力"
    alt="">

  <div class="card-design-06__content">

    <p class="card-design-06__title">
      横並びのカード
    </p>

    <p class="card-design-06__text">
      画像と文章を横に並べたカードです。<br>
      狭い画面では、縦並びに切り替わります。
    </p>

  </div>

</div>

.card-design-06 {
  display: flex;

  width: 100%;
  max-width: 560px;
  min-height: 220px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;

  color: #626873;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(41, 45, 56, 0.12);
}

.card-design-06__image {
  display: block;
  flex: 0 0 42%;

  width: 42%;
  object-fit: cover;
}

.card-design-06__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;

  padding: 26px;
  box-sizing: border-box;
}

.card-design-06__title {
  margin: 0 0 12px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-06__text {
  margin: 0;

  color: #626873;
  font-size: 14px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-06 {
    display: block;
    max-width: 360px;
  }

  .card-design-06__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .card-design-06__content {
    padding: 20px;
  }

  .card-design-06__title {
    font-size: 18px;
  }
}

画像の変更： 「ここに画像のURLを入力」の部分を、使用する画像のURLへ変更してください。

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

DESIGN 07

画像に文字を重ねたカード

画像の上に文字を重ねて、内容を印象的に伝えられるカードです。

<div class="card-design-07">

  <img
    class="card-design-07__image"
    src="ここに画像のURLを入力"
    alt=""
  >

  <div class="card-design-07__overlay">

    <p class="card-design-07__title">
      画像に文字を重ねたカード
    </p>

    <p class="card-design-07__text">
      画像の上に文字を重ねて、内容を印象的に伝えられるカードです。
    </p>

  </div>

</div>

.card-design-07 {
  position: relative;

  width: 100%;
  max-width: 480px;
  min-height: 280px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;

  background: #292d38;
  border-radius: 12px;
}

.card-design-07__image {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.card-design-07::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(41, 45, 56, 0.82) 0%,
    rgba(41, 45, 56, 0.38) 58%,
    rgba(41, 45, 56, 0.05) 100%
  );
}

.card-design-07__overlay {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;

  padding: 28px;
  box-sizing: border-box;

  color: #fff;
}

.card-design-07__title {
  margin: 0 0 10px;

  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-07__text {
  margin: 0;

  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-07 {
    min-height: 240px;
  }

  .card-design-07__overlay {
    padding: 22px 20px;
  }

  .card-design-07__title {
    font-size: 18px;
  }

  .card-design-07__text {
    font-size: 13px;
  }
}

画像の変更： 「ここに画像のURLを入力」の部分を、使用する画像のURLへ変更してください。

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

ホバーで動くカード

ここからは、マウスを重ねると動きが加わるカードデザインです。

浮き上がりや拡大などの変化によって、クリックできることを自然に伝えられます。

DESIGN 08

ふわっと浮き上がるカード

マウスを重ねるとカードが少し持ち上がり、やわらかな動きが加わります。

<div class="card-design-08">

  <p class="card-design-08__title">
    ふわっと浮き上がるカード
  </p>

  <p class="card-design-08__text">
    マウスを重ねるとカードが少し持ち上がり、やわらかな動きが加わります。
  </p>

</div>

.card-design-08 {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;

  color: #626873;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(41, 45, 56, 0.1);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card-design-08:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 34px rgba(41, 45, 56, 0.16);
}

.card-design-08__title {
  margin: 0 0 14px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-08__text {
  margin: 0;

  color: #626873;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-08 {
    padding: 24px 20px;
  }

  .card-design-08__title {
    font-size: 18px;
  }

  .card-design-08__text {
    font-size: 14px;
  }
}

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

DESIGN 09

カード全体が大きくなる

マウスを重ねるとカード全体が少し拡大し、リンクの存在を印象的に伝えます。

<div class="card-design-09">

  <p class="card-design-09__title">
    カード全体が大きくなる
  </p>

  <p class="card-design-09__text">
    マウスを重ねるとカード全体が少し拡大し、リンクの存在を印象的に伝えます。
  </p>

</div>

.card-design-09 {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;

  color: #626873;
  background: #fff;
  border: 1px solid #ece8e9;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(41, 45, 56, 0.08);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card-design-09:hover {
  transform: scale(1.04);
  box-shadow: 0 14px 30px rgba(41, 45, 56, 0.14);
}

.card-design-09__title {
  margin: 0 0 14px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-09__text {
  margin: 0;

  color: #626873;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-09 {
    padding: 24px 20px;
  }

  .card-design-09__title {
    font-size: 18px;
  }

  .card-design-09__text {
    font-size: 14px;
  }
}

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

DESIGN 10

画像だけがズームするカード

マウスを重ねると画像部分だけが拡大し、写真を印象的に見せられます。

<div class="card-design-10">

  <div class="card-design-10__image-wrap">

    <img
      class="card-design-10__image"
      src="ここに画像のURLを入力"
      alt=""
    >

  </div>

  <div class="card-design-10__content">

    <p class="card-design-10__title">
      画像だけがズームするカード
    </p>

    <p class="card-design-10__text">
      マウスを重ねると画像部分だけが拡大し、写真を印象的に見せられます。
    </p>

  </div>

</div>

.card-design-10 {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;

  color: #626873;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(41, 45, 56, 0.12);
}

.card-design-10__image-wrap {
  overflow: hidden;

  aspect-ratio: 16 / 9;
}

.card-design-10__image {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;
}

.card-design-10:hover .card-design-10__image {
  transform: scale(1.08);
}

.card-design-10__content {
  padding: 22px;
}

.card-design-10__title {
  margin: 0 0 12px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-10__text {
  margin: 0;

  color: #626873;
  font-size: 14px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-10__content {
    padding: 20px;
  }

  .card-design-10__title {
    font-size: 18px;
  }

  .card-design-10__text {
    font-size: 13px;
  }
}

画像の変更： 「ここに画像のURLを入力」の部分を、使用する画像のURLへ変更してください。

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

DESIGN 11

影が広がるカード

マウスを重ねると影がやわらかく広がり、カードの存在感が高まります。

<div class="card-design-11">

  <p class="card-design-11__title">
    影が広がるカード
  </p>

  <p class="card-design-11__text">
    マウスを重ねると影がやわらかく広がり、カードの存在感が高まります。
  </p>

</div>

.card-design-11 {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;

  color: #626873;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(41, 45, 56, 0.08);

  transition: box-shadow 0.3s ease;
}

.card-design-11:hover {
  box-shadow: 0 18px 42px rgba(41, 45, 56, 0.2);
}

.card-design-11__title {
  margin: 0 0 14px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-11__text {
  margin: 0;

  color: #626873;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-11 {
    padding: 24px 20px;
  }

  .card-design-11__title {
    font-size: 18px;
  }

  .card-design-11__text {
    font-size: 14px;
  }
}

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

DESIGN 12

枠線の色が変わるカード

マウスを重ねると枠線がピンクに変わり、さりげないアクセントが加わります。

<div class="card-design-12">

  <p class="card-design-12__title">
    枠線の色が変わるカード
  </p>

  <p class="card-design-12__text">
    マウスを重ねると枠線がピンクに変わり、さりげないアクセントが加わります。
  </p>

</div>

.card-design-12 {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;

  color: #626873;
  background: #fff;
  border: 2px solid #dfe2e8;
  border-radius: 12px;

  transition: border-color 0.3s ease;
}

.card-design-12:hover {
  border-color: #c98792;
}

.card-design-12__title {
  margin: 0 0 14px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-12__text {
  margin: 0;

  color: #626873;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-12 {
    padding: 24px 20px;
  }

  .card-design-12__title {
    font-size: 18px;
  }

  .card-design-12__text {
    font-size: 14px;
  }
}

色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

背景を活かしたカード

最後は、背景色やグラデーション、透明感を取り入れたカードデザインです。

シンプルな内容でも雰囲気を出しやすく、ページのアクセントとして使用できます。

DESIGN 13

ずらした背景のカード

背景を少しずらして重ねることで、奥行きと遊び心を加えたカードです。

<div class="card-design-13">

  <div class="card-design-13__body">

    <p class="card-design-13__title">
      ずらした背景のカード
    </p>

    <p class="card-design-13__text">
      背景を少しずらして重ねることで、奥行きと遊び心を加えたカードです。
    </p>

  </div>

</div>

.card-design-13 {
  position: relative;

  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  box-sizing: border-box;
}

.card-design-13::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;

  width: 100%;
  height: 100%;

  background: #edf5fa;
  border-radius: 12px;
}

.card-design-13__body {
  position: relative;

  padding: 30px;
  box-sizing: border-box;

  color: #626873;
  background: #fff;
  border: 1px solid #c98792;
  border-radius: 12px;
}

.card-design-13__title {
  margin: 0 0 14px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-13__text {
  margin: 0;

  color: #626873;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-13 {
    width: calc(100% - 10px);
    margin-left: 0;
  }

  .card-design-13__body {
    padding: 24px 20px;
  }

  .card-design-13__title {
    font-size: 18px;
  }

  .card-design-13__text {
    font-size: 14px;
  }
}

色の変更： CSS内の「#edf5fa」と「#c98792」を、お好みのカラーコードへ変更してください。

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

DESIGN 14

グラデーションカード

淡いピンクとブルーをなめらかにつないだ、やわらかな印象のカードです。

<div class="card-design-14">

  <p class="card-design-14__title">
    グラデーションカード
  </p>

  <p class="card-design-14__text">
    淡いピンクとブルーをなめらかにつないだ、やわらかな印象のカードです。
  </p>

</div>

.card-design-14 {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;

  color: #626873;
  background: linear-gradient(
    135deg,
    #f8edef 0%,
    #edf5fa 100%
  );
  border-radius: 12px;
}

.card-design-14__title {
  margin: 0 0 14px;

  color: #292d38;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-14__text {
  margin: 0;

  color: #626873;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-14 {
    padding: 24px 20px;
  }

  .card-design-14__title {
    font-size: 18px;
  }

  .card-design-14__text {
    font-size: 14px;
  }
}

色の変更： CSS内の「#f8edef」と「#edf5fa」を、お好みの2色へ変更してください。

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

DESIGN 15

半透明のすりガラス風カード

すりガラス風カード

置いた場所の背景がうっすら透けて見える、透明感のあるカードです。

<div class="card-design-15">

  <p class="card-design-15__title">
    すりガラス風カード
  </p>

  <p class="card-design-15__text">
    置いた場所の背景がうっすら透けて見える、透明感のあるカードです。
  </p>

</div>

.card-design-15 {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(41, 45, 56, 0.12);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.card-design-15__title {
  margin: 0 0 14px;

  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.card-design-15__text {
  margin: 0;

  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 600px) {
  .card-design-15 {
    padding: 24px 20px;
  }

  .card-design-15__title {
    font-size: 18px;
  }

  .card-design-15__text {
    font-size: 14px;
  }
}

文字色について： 暗い背景に合わせて白い文字を使用しています。明るい背景で使用する場合は、CSS内の「#fff」と「rgba(255, 255, 255, 0.9)」を濃い文字色へ変更してください。

文字の変更： HTML内の日本語部分を、表示したいタイトルと説明文へ書き換えてください。

まとめ

今回は、シンプルなものから画像や動きを取り入れたものまで、15種類のカードデザインをご紹介しました。

気になるデザインが見つかったら、HTMLとCSSをコピーし、文字や色、画像をサイトに合わせて変更してみてください。

カードと組み合わせて使えるデザインを探している方は、見出しデザインとボタンデザインの記事も参考にしてみてください。