SaaS・業務
通知センター
ベルアイコン（未読バッジ付き）をタップすると通知リストのパネルが開く。各通知をタップして既読化すると未読数が減る。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="nc-stage" id="nc-stage">
<div class="nc-topbar">
<span class="nc-app-name">ダッシュボード</span>
<button class="nc-bell-btn" id="nc-bell-btn" aria-label="通知" aria-expanded="false" aria-haspopup="true">
<svg class="nc-bell-icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10 2a6 6 0 0 0-6 6v2.5l-1.5 2.5h15L16 10.5V8a6 6 0 0 0-6-6z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M8 16a2 2 0 0 0 4 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="nc-badge" id="nc-badge">3</span>
</button>
</div>
<div class="nc-panel hidden" id="nc-panel" role="dialog" aria-label="通知">
<div class="nc-panel-header">
<span class="nc-panel-title">通知</span>
<button class="nc-read-all-btn" id="nc-read-all-btn">すべて既読</button>
</div>
<ul class="nc-list" id="nc-list"></ul>
</div>
</div>