パーツ番号 06-11-11 ・ JavaScript使用
解決済みマーク付きコメント
ボタンを押すとコメントに緑のチェックが付き「解決済み」ラベルへ切り替わる。Q&A形式の記事やサポートページの質問コメントに使うと未解決/解決の区別がひと目でわかる。
プレビュー
ソースコード
HTML
<div class="d06-11-11-wrap">
<div class="d06-11-11-comment">
<span class="d06-11-11-avatar" style="background:linear-gradient(135deg,#0ea5e9,#22d3ee)">R</span>
<div class="d06-11-11-body">
<span class="d06-11-11-name">りょう</span>
<p>この部分、もう少し詳しく知りたいです。</p>
<button class="d06-11-11-mark" type="button">解決済みにする</button>
</div>
</div>
</div>CSS
.d06-11-11-wrap{width:100%;max-width:260px}
.d06-11-11-comment{display:flex;gap:8px}
.d06-11-11-avatar{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
.d06-11-11-body{flex:1}
.d06-11-11-name{display:block;font-size:11px;font-weight:700;color:#374151}
.d06-11-11-body>p{margin:2px 0 6px;font-size:12px;color:#4b5563}
.d06-11-11-mark{border:1px solid #d1d5db;background:#fff;color:#6b7280;font-size:11px;font-weight:700;border-radius:999px;padding:5px 12px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.d06-11-11-mark.d06-11-11-done{border-color:#22c55e;background:#f0fdf4;color:#16a34a}
.d06-11-11-mark.d06-11-11-done::before{content:'✓ ';font-weight:700}JavaScript
(function(){
var root = document.querySelector('.d06-11-11');
var btn = root.querySelector('.d06-11-11-mark');
btn.addEventListener('click', function(){
var done = btn.classList.toggle('d06-11-11-done');
btn.textContent = done ? '解決済み' : '解決済みにする';
});
})();クラス名 .d06-11-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。