カードにNEW通知バッジを表示する方法
カードの右上にNEW通知バッジを表示する方法を紹介します。このサンプルでは、カードを基準にバッジを絶対配置し、右上から少しはみ出す位置へ赤色の「NEW」ラベルを重ねて表示します。JavaScriptは使用せず、HTMLとCSSだけでカードと通知バッジの見た目を作成します。
ブログの新着記事、ECサイトの新商品、会員サイトの新しいコンテンツ、管理画面の追加機能など、新しく追加された情報をカード上で目立たせたい場面に利用できます。カード本体とは異なる赤色の円形バッジを右上へ配置することで、カードの内容を大きく変更せずに「NEW」であることを分かりやすく表示できます。
HTMLではカードタイトル、説明文、バッジ内の「NEW」という文字を変更できます。CSSではカードの横幅、余白、背景色、枠線、角丸、影のほか、バッジの大きさ、配置位置、背景色、文字サイズなどを調整できます。シンプルな構成のため、既存のカードUIへ新着を示す通知バッジを追加したい場合にも利用しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
カードタイトル
カードの右上に、少しはみ出した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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではカードのタイトル、説明文、NEW通知バッジを配置し、CSSではカードのデザインとバッジの位置や大きさ、色などを設定します。カードを基準にNEW通知バッジを絶対配置することで、カードの右上から少しはみ出した位置へ円形のバッジを重ねて表示します。JavaScriptや外部ライブラリは使用しません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはNEW通知バッジ付きカードの内容を構成するファイルです。card-new-badge_labelの「NEW」、カードタイトル、説明文を用途に合わせて変更できます。
style.cssはカード表示エリア、カード本体、NEW通知バッジ、タイトル、説明文のデザインを設定するファイルです。カードの横幅や余白、背景色、枠線、角丸、影に加えて、NEW通知バッジの大きさ、配置位置、背景色、文字サイズなどを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。index.htmlからstyle.cssを読み込む構成になっているため、sample/index.htmlをブラウザで開くと、右上にNEW通知バッジが付いたカードが表示されます。
バッジの文字を変更する場合は、index.htmlの<div class="card-new-badge_label">NEW</div>にある「NEW」を編集してください。カードタイトルと説明文もindex.htmlから変更できます。
カスタマイズできる内容
index.htmlでは、NEW通知バッジの文字、カードタイトル、カード説明文を変更できます。style.cssでは、カード表示エリアの背景色や余白、カード本体の横幅、背景色、枠線、角丸、影を変更できます。また、NEW通知バッジの位置、大きさ、背景色、文字色、文字サイズ、枠線、影も用途に合わせて調整できます。
数値調整
style.css
padding:40px 20px;
カード表示エリアの内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくするとカード周囲の余白が広がります。
border-radius:18px;
カード表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:320px;
カード本体の横幅です。値を大きくするとカードが横に広がり、小さくすると狭くなります。
padding:28px 24px;
カード本体の内側余白です。28pxは上下、24pxは左右の余白を表します。値を大きくすると文章とカード端の間隔が広がります。
border-radius:18px;
カード本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 12px 30px rgba(15,23,42,.08);
カード本体の影です。12pxや30pxを変更すると、影の位置や広がりを調整できます。
top:-14px;
NEW通知バッジの上下位置です。マイナス方向の値を大きくすると、カード上部からさらに外側へ移動します。
right:-14px;
NEW通知バッジの左右位置です。マイナス方向の値を大きくすると、カード右側からさらに外側へ移動します。
width:56px;
NEW通知バッジの横幅です。値を大きくするとバッジが横方向に大きくなります。
height:56px;
NEW通知バッジの高さです。値を大きくするとバッジが縦方向に大きくなります。横幅と同じ値にすることで円形を維持できます。
border:4px solid #ffffff;
NEW通知バッジを囲む枠線です。4pxを大きくすると白い枠線が太くなり、小さくすると細くなります。
font-size:13px;
NEW通知バッジ内の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
font-size:22px;
カードタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
font-size:15px;
カード説明文の文字サイズです。値を大きくすると説明文が大きくなり、小さくすると小さくなります。
line-height:1.8;
カード説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
コメント