カードにNEW通知バッジを付ける方法【HTML/CSS・サンプルコード付き】

カードUI

カードにNEW通知バッジを付ける方法

カードにNEW通知バッジを付ける方法を紹介します。カードの右上に小さなバッジを重ねることで、新着カードや注目カードを分かりやすく目立たせることができます。記事一覧、商品カード、サービス紹介カードなどで、新しい情報をユーザーに伝えたい場面に使いやすいHTML/CSSサンプルです。

このサンプルでは、カード本体にposition: relative;を指定し、NEWバッジをposition: absolute;で右上に配置します。JavaScriptは使用せず、HTMLとCSSだけで実装できるため、既存のカードUIにも追加しやすい構成です。バッジの文字、色、サイズ、位置はCSSから調整できます。

LINEやアプリの通知バッジのように、カードから少しはみ出した丸いラベルを表示できます。新着記事、更新情報、おすすめカード、限定コンテンツなどを一覧内で強調したい場合に便利です。シンプルな作りなので、初心者でも導入しやすく、実際のWebサイトでも利用しやすい装飾です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

NEW

カードタイトル

カードの右上に、少しはみ出したNEW通知バッジを表示しています。

このデモでは、カード右上にNEW通知バッジを重ねて表示する見た目を確認できます。

コードをコピーして使おう！

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

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

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>カードにNEW通知バッジを付ける方法</title>

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

</head>
<body>

  <!-- カード表示エリア -->
  <div class="card-new-badge_demo">

    <!-- NEW通知バッジ付きカード -->
    <div class="card-new-badge_card">

      <!-- NEW通知バッジ -->
      <div class="card-new-badge_label">NEW</div>

      <!-- カードタイトル -->
      <h3>カードタイトル</h3>

      <!-- カード説明文 -->
      <p>
        カードの右上に、少しはみ出したNEW通知バッジを表示しています。
      </p>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルではカード本体とNEW通知バッジの構造を記述し、CSSファイルではカードやバッジのデザイン、配置、色、サイズなどを設定します。JavaScriptは使用していないため、静的なWebページでもそのまま利用できます。 

sample/
├── index.html
└── style.css

sampleフォルダ内に各ファイルを配置し、ブラウザでsample/index.htmlを開くと動作を確認できます。カードタイトルや説明文、NEWバッジの文字はindex.htmlから変更でき、バッジの色、大きさ、表示位置、カードの余白、枠線、背景色などのデザインはstyle.cssから自由にカスタマイズできます。

コメント