ソーシャル・コミュニケーション
コメントスレッド
アバター付きのコメント一覧。返信は1段ネストして表示。ハートの「いいね」はタップで数が増減し、返信ボタンで簡易入力欄が開いて返信を追加できる。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="thread" id="thread">
<div class="comment">
<span class="avatar" style="background:linear-gradient(135deg,#2b50c7,#7fa4ff)">あ</span>
<div class="c-body">
<div class="c-head"><span class="c-name">あかり</span><span class="c-time">2時間前</span></div>
<p class="c-text">この記事すごく参考になりました！続きも楽しみにしています。</p>
<div class="c-actions">
<button class="like-btn" type="button" aria-pressed="false" data-base="12">
<svg class="heart" width="14" height="14" viewBox="0 0 14 14"><path d="M7 12S1.5 8.5 1.5 4.8A2.8 2.8 0 017 3.2a2.8 2.8 0 015.5 1.6C12.5 8.5 7 12 7 12z" stroke-width="1.3"/></svg>
<span class="like-count">12</span>
</button>
<button class="reply-btn" type="button" data-reply>返信</button>
</div>
<div class="replies">
<div class="comment reply">
<span class="avatar" style="background:linear-gradient(135deg,#2a7a45,#2b50c7)">け</span>
<div class="c-body">
<div class="c-head"><span class="c-name">けんと</span><span class="c-time">1時間前</span></div>
<p class="c-text">同じく！次回も期待してます。</p>
<div class="c-actions">
<button class="like-btn" type="button" aria-pressed="false" data-base="3">
<svg class="heart" width="14" height="14" viewBox="0 0 14 14"><path d="M7 12S1.5 8.5 1.5 4.8A2.8 2.8 0 017 3.2a2.8 2.8 0 015.5 1.6C12.5 8.5 7 12 7 12z" stroke-width="1.3"/></svg>
<span class="like-count">3</span>
</button>
</div>
</div>
</div>
</div>
<form class="reply-box" hidden>
<input type="text" placeholder="返信を書く" aria-label="返信" autocomplete="off"/>
<button type="submit">送信</button>
</form>
</div>
</div>
<div class="comment">
<span class="avatar" style="background:linear-gradient(135deg,#b8860b,#e6dcc7)">ゆ</span>
<div class="c-body">
<div class="c-head"><span class="c-name">ゆうな</span><span class="c-time">45分前</span></div>
<p class="c-text">はじめて知りました。さっそく試してみます🙌</p>
<div class="c-actions">
<button class="like-btn" type="button" aria-pressed="false" data-base="5">
<svg class="heart" width="14" height="14" viewBox="0 0 14 14"><path d="M7 12S1.5 8.5 1.5 4.8A2.8 2.8 0 017 3.2a2.8 2.8 0 015.5 1.6C12.5 8.5 7 12 7 12z" stroke-width="1.3"/></svg>
<span class="like-count">5</span>
</button>
<button class="reply-btn" type="button" data-reply>返信</button>
</div>
<div class="replies"></div>
<form class="reply-box" hidden>
<input type="text" placeholder="返信を書く" aria-label="返信" autocomplete="off"/>
<button type="submit">送信</button>
</form>
</div>
</div>
</div>