← 動的パーツギャラリーへ戻る

パーツ番号 06-11-11 ・ JavaScript使用

解決済みマーク付きコメント

ボタンを押すとコメントに緑のチェックが付き「解決済み」ラベルへ切り替わる。Q&A形式の記事やサポートページの質問コメントに使うと未解決/解決の区別がひと目でわかる。

clickjs

プレビュー

ソースコード

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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。