カードにNEWバッジや斜めリボンを配置する方法｜位置・はみ出し・回転

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>カード装飾</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- カード全体 -->
  <div class="card-decoration_wrap">

    <!-- ① 位置：左上にNEWバッジを配置 -->
    <div class="card-decoration_card">

      <!-- 位置を変更する装飾 -->
      <span class="card-decoration_position">NEW</span>

      <!-- カード内の文字 -->
      <p class="card-decoration_card-text">カード</p>

    </div>

    <!-- ② はみ出し：右上から丸型バッジをはみ出させる -->
    <div class="card-decoration_card">

      <!-- カードの外側にはみ出す装飾 -->
      <span class="card-decoration_overflow">人気</span>

      <!-- カード内の文字 -->
      <p class="card-decoration_card-text">カード</p>

    </div>

    <!-- ③ 回転：右上に斜めリボンを配置 -->
    <div class="card-decoration_card card-decoration_rotate-card">

      <!-- 回転させる装飾 -->
      <span class="card-decoration_rotate">おすすめ</span>

      <!-- カード内の文字 -->
      <p class="card-decoration_card-text">カード</p>

    </div>

  </div>

</body>
</html>

/* =========================================
   カード全体
========================================= */

/* 3種類のカードを横並びにする */
.card-decoration_wrap {
  display: grid; /* カードを格子状に配置 */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3列に均等配置 */
  gap: 35px; /* カード間の余白。値を大きくすると間隔が広がる */
  width: 100%; /* 親要素の横幅に合わせる */
  max-width: 1100px; /* 最大横幅。値を大きくすると全体が広がる */
  box-sizing: border-box; /* 余白を横幅に含める */
  margin: 50px auto; /* 上下50pxの余白。左右中央に配置 */
  padding: 30px; /* 全体の内側余白。値を大きくすると余白が広がる */
}

/* =========================================
   共通カード
========================================= */

/* 装飾の配置基準となるカード */
.card-decoration_card {
  position: relative; /* このカードを基準に装飾を配置 */
  display: flex; /* カード内の文字を中央に配置 */
  align-items: center; /* 上下中央に揃える */
  justify-content: center; /* 左右中央に揃える */
  min-width: 0; /* 狭い画面でもカードが縮小できるようにする */
  min-height: 170px; /* カードの最小高さ。値を大きくすると縦に広がる */
  padding: 25px 15px; /* 上下25px・左右15pxの内側余白 */
  background: #ffffff; /* カードの背景色 */
  border: 1px solid #cbd5e1; /* 枠線の太さと色 */
  border-radius: 10px; /* 角丸。値を大きくすると丸みが強くなる */
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07); /* カードの影 */
}

/* カード内の文字 */
.card-decoration_card-text {
  margin: 0; /* 標準の余白を削除 */
  color: #94a3b8; /* 文字色 */
  font-size: 14px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight: 700; /* 文字の太さ */
}

/* =========================================
   ① 位置
========================================= */

/*
  top・right・bottom・leftで装飾の位置を変更できます。

  左上：topとleft
  右上：topとright
  左下：bottomとleft
  右下：bottomとright

  上辺中央に配置する場合は、次のように変更します。

  top: 10px;
  left: 50%;
  transform: translateX(-50%);

  配置方向を変更するときは、使用しない
  top・right・bottom・leftを削除してください。
*/

/* NEWバッジの位置とデザイン */
.card-decoration_position {
  position: absolute; /* カードを基準に位置を指定 */
  top: 10px; /* 上からの距離。値を大きくすると下へ移動 */
  left: 10px; /* 左からの距離。値を大きくすると右へ移動 */
  padding: 5px 11px; /* 上下5px・左右11pxの内側余白 */
  background: #2563eb; /* バッジの背景色 */
  border-radius: 5px; /* 角丸。値を大きくすると丸みが強くなる */
  color: #ffffff; /* 文字色 */
  font-size: 12px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight: 700; /* 文字の太さ */
}

/* =========================================
   ② はみ出し
========================================= */

/*
  top・rightなどにマイナス値を指定すると、
  カードの外側へ装飾をはみ出させられます。

  topをマイナスにすると上側へ、
  rightをマイナスにすると右側へはみ出します。

  はみ出した部分を隠す場合は、
  カード側にoverflow: hidden;を指定してください。
*/

/* カードの外側にはみ出す丸型バッジ */
.card-decoration_overflow {
  position: absolute; /* カードを基準に位置を指定 */
  top: -22px; /* 上側へのはみ出し量。マイナス値を大きくすると上へ移動 */
  right: -20px; /* 右側へのはみ出し量。マイナス値を大きくすると右へ移動 */
  display: flex; /* バッジ内の文字を中央に配置 */
  align-items: center; /* 上下中央に揃える */
  justify-content: center; /* 左右中央に揃える */
  width: 65px; /* バッジの横幅。値を大きくすると横に広がる */
  height: 65px; /* バッジの高さ。値を大きくすると縦に広がる */
  box-sizing: border-box; /* 枠線を幅と高さに含める */
  background: #f97316; /* バッジの背景色 */
  border: 3px solid #ffffff; /* 外周の枠線の太さと色 */
  border-radius: 50%; /* 円形にする */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); /* バッジの影 */
  color: #ffffff; /* 文字色 */
  font-size: 12px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight: 700; /* 文字の太さ */
}

/* =========================================
   ③ 回転
========================================= */

/* カードからはみ出したリボンを切り取る */
.card-decoration_rotate-card {
  overflow: hidden; /* カードの外側にはみ出す部分を非表示 */
}

/*
  transform: rotate()で装飾を回転できます。

  rotate(45deg)：時計回りに45度回転
  rotate(-45deg)：反時計回りに45度回転
  rotate(0deg)：回転なし

  角度を変更すると見た目の位置も変わるため、
  top・rightなどで位置を調整してください。
*/

/* 右上に配置する斜めリボン */
.card-decoration_rotate {
  position: absolute; /* カードを基準に位置を指定 */
  top: 20px; /* 上からの距離。値を大きくすると下へ移動 */
  right: -37px; /* 右端からの距離。マイナス値を大きくすると右へ移動 */
  width: 145px; /* リボンの横幅。値を大きくすると横に広がる */
  padding: 6px 0; /* 上下6pxの内側余白 */
  background: #e11d48; /* リボンの背景色 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12); /* リボンの影 */
  color: #ffffff; /* 文字色 */
  font-size: 12px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight: 700; /* 文字の太さ */
  text-align: center; /* 文字を中央に揃える */
  transform: rotate(45deg); /* 回転角度。正の値で時計回り、負の値で反時計回り */
}

/* =========================================
   レスポンシブ対応
========================================= */

/* 画面幅640px以下ではカードを縦並びにする */
@media (max-width: 640px) {

  /* カード全体 */
  .card-decoration_wrap {
    grid-template-columns: 1fr; /* カードを1列に変更 */
    gap: 45px; /* カード間の余白。値を大きくすると間隔が広がる */
    max-width: 420px; /* 最大横幅。値を大きくすると全体が広がる */
    padding: 35px 25px; /* 上下35px・左右25pxの内側余白 */
  }

  /* 共通カード */
  .card-decoration_card {
    min-height: 160px; /* 最小高さ。値を大きくするとカードが縦に広がる */
  }

}