【CodePen】バッジ・通知・リボンのアイデア13選

💡 実装のポイント
六角形は.badgeのborder-radius: 10pxを持つ矩形に、::before（rotate(60deg)）と::after（rotate(-60deg)）を重ねて3方向から作り出す純CSSシェイプ。色は.yellow・.goldなどカラークラスのbackground: linear-gradient(...)を変えるだけで12パターン全体に反映される。Font Awesome 4.7をCDNで読み込んでおり、アイコンの差し替えはfa-boltなどのクラス名を変えるだけ。HTMLはPugテンプレートで書かれているため、実装時はCodePen上の「View Compiled HTML」でコンパイル済みHTMLを取得するとよい。

💡 実装のポイント
リボン本体は.ribbonの縦長矩形で、下向き三角はCSS borderトリックの::after疑似要素（border-right・border-leftを透明にしてborder-topだけ色を付ける）で作られている。色の変更は各カラー修飾クラス（.ribbon--red等）のbackgroundと::afterのborder-top色を合わせて変える必要がある点に注意。-webkit-filter: drop-shadow()で立体感を出しているが、レガシーな書き方のためAutoprefixer不要の環境でも動くようtransform: translate3d(0,0,0)でGPU合成を強制している。SassはCompassを使用しているのでそのままビルドするには環境が要る。素のCSSへの変換は「View Compiled CSS」で取得可能。

💡 実装のポイント
背景の盾はインラインSVGの<path>で描かれており、デザインを変えたい場合はSVGを差し替えるのが現実的。タイトル帯（.title）はposition: absoluteで盾の上端に重ねており、カラーはSCSSの@mixin setColor($color)を呼び出すだけで.titleのbackgroundと.subtitle:afterの星アイコン色を一括変更できる。ホバー時に:afterの星のword-spacingを広げるマイクロアニメーションがtransition: all .3sで実装されている。

💡 実装のポイント
リボンは追加マークアップ不要で、.cardの::before（折り返しの三角形を作るrotate(45deg)の正方形）と::after（ラベル本体）の組み合わせのみで構成されている。ラベルテキストはcontent: attr(data-label)でHTMLのdata-label="In Progress"属性から取得するため、JSなしでテキストを動的に切り替えられる。色は::afterのbackground: #3949abと::beforeのbackground: #283593を差し替えれば全体に反映される。

💡 実装のポイント
配置クラス（.top-left・.top-right・.bottom-left・.bottom-right・.top-full・.middle-full・.bottom-full）を<span>に付与するだけで7パターンの位置に切り替えられる設計。斜め配置はtransform: rotate(±45deg)とtransform-originの組み合わせで表現しており、::beforeと::afterを帯の左右延長として使うことで横幅いっぱいに伸びる帯が疑似要素だけで実現されている。色は.badge.red等のカラー修飾クラスのbackgroundを変えるだけでOK。

💡 実装のポイント
Sassの$badgesリストに('new', $blue, 'New!')のように（識別子・色・表示テキスト）の3要素を並べて登録すると、@eachループが[data-badge="new"]::beforeのスタイルを自動生成する仕組み。HTMLにdata-badge="new"属性を付けるだけで任意の要素に対角リボンが付くため、マークアップを汚さない点が特徴。$position: leftをrightに変えれば全バッジの配置を一括反転できる。$style: flatをskeuomorphにするとグラデーションと影が加わって立体的になる。Compassへの依存があるため、ビルド環境なしで使う場合は「View Compiled CSS」でコンパイル済みCSSを取得する必要がある。

💡 実装のポイント
カラーは:rootのCSS変数（--airbnb-red・--airbnb-green等）で一元管理されており、変数の値を変えれば全バッジの配色が一括変更できる。ライブ状態を示す.pulseクラスは::before疑似要素への@keyframes pulseでscale(1.05)とopacityを繰り返しアニメーションさせている。ホバー時のツールチップは.status-tooltipをopacity: 0; visibility: hiddenで非表示にしておき、:hover時に両方を変化させることでcssのみで実現。Bootstrap 5とBootstrap Iconsを外部CDNで読み込んでいる点に注意。

💡 実装のポイント
SCSSの変数（$success_color: #03b300等）で4種類のステータスカラーを定義し、.badge内の.labelと.statusという2つのdivをfloatで左右に並べた構造。border-radius: 1emとoverflow: hiddenの組み合わせで両端丸のカプセル形を表現している。border-colorで輪郭色も同じ変数から引いており、ステータスごとにborder-color・.statusのbackground-colorの2箇所だけ変えればよいシンプルな設計。

💡 実装のポイント
.build-badge__label（左側の黒ラベル）と.build-badge__status（右側のステータス部）という2つの<span>をdisplay: inline-blockで横並べしたシンプルな構造。高さは固定値20px・line-height: 20pxで揃えており、状態ごとに.build-badge__status-success等のクラスを差し替えれば色が変わる設計。JSなし、外部依存もなく、純CSSだけで動く最軽量なステータスバッジの実装として参考にしやすい。

💡 実装のポイント
data-after-type="red badge top right"のように1つの属性にスペース区切りでモディファイアを列挙する設計で、[data-after-type*="badge"]・[data-after-type*="red"]・[data-after-type*="top"]などの属性サブストリングセレクターが積み重なってスタイルを決定する。バッジのテキストはdata-after-text="5"属性をcontent: attr(data-after-text)で取得するため追加HTMLタグが不要。::beforeと::afterを両方活用することで1つの要素にバッジを2個同時に付ける「dual badges」パターンも可能。バッジ・ドット・ピルと3タイプのUIパターンが単一CSSファイルにまとまっている。

💡 実装のポイント
バッジ（.nav-counter）はposition: absoluteで.nav-linkの右上に配置されており、border-radius: 11pxでカプセル型、min-width: 8pxで数字が少ない場合でもつぶれないよう設計されている。デフォルト（赤）・.nav-counter-green・.nav-counter-blueの3色バリエーションを用意しており、グラデーション＋inset shadowで光沢感を表現しているのが特徴。JSは一切使われておらず、純CSSのみで完結している。

💡 実装のポイント
バッジ数値はHTMLのdata-bubble="117"属性からcontent: attr(data-bubble)で取得するため、追加タグ不要でテキスト変更ができる。通常状態ではz-index: -1でメニューの背後に隠れており、ホバーで@keyframes bubbleover（translateYで下→上→メニュー上部へ飛び越える弧を描く軌跡）が発動してz-index: 1に切り替わる設計。will-change: transformとtranslateZ(0)でテキストちらつきを防止している。JSは不使用でアニメーションはCSS3 keyframesのみ。

💡 実装のポイント
バッジ背景の有機的な動きは、4つの<circle>にSVGの<animateTransform>で異なる速度・中心点の回転を与え、SVGフィルターのfeGaussianBlur＋feColorMatrix（gooエフェクト）でぼかしから輪郭を再合成することで実現している。上部から噴き出す泡はbubblesCount = 70個のSVG circleをJSでランダム生成し、anime.jsでtranslateY: [0, -150]・r: 0（消滅）をループアニメーションさせている。jQuery＋anime.jsの2ライブラリへの依存があり、prefers-reduced-motionへの対応はない。