コメントスレッド Comment Thread
コメントとその返信をツリー構造で表示するUI。議論の流れを視覚的に追える。
ライブデモ
ソースコード
<div class="demo-thread">
<div class="demo-thread-comment">
<div class="demo-thread-avatar">A</div>
<div class="demo-thread-body">
<div class="demo-thread-meta">
<span class="demo-thread-author">山田太郎</span>
<span class="demo-thread-date">2時間前</span>
</div>
<p class="demo-thread-text">このプロジェクトの進め方はとても効率的だと思います。特にスプリント計画が素晴らしいですね。</p>
<div class="demo-thread-actions">
<button class="demo-thread-action-btn demo-thread-like-btn">♡ 5</button>
<button class="demo-thread-action-btn demo-thread-reply-btn">返信</button>
</div>
<div class="demo-thread-replies">
<div class="demo-thread-comment">
<div class="demo-thread-avatar">B</div>
<div class="demo-thread-body">
<div class="demo-thread-meta">
<span class="demo-thread-author">佐藤花子</span>
<span class="demo-thread-date">1時間前</span>
</div>
<p class="demo-thread-text">ありがとうございます！チーム全員の協力のおかげです。</p>
<div class="demo-thread-actions">
<button class="demo-thread-action-btn demo-thread-like-btn">♡ 3</button>
<button class="demo-thread-action-btn demo-thread-reply-btn">返信</button>
</div>
</div>
</div>
<div class="demo-thread-comment">
<div class="demo-thread-avatar">C</div>
<div class="demo-thread-body">
<div class="demo-thread-meta">
<span class="demo-thread-author">鈴木一郎</span>
<span class="demo-thread-date">30分前</span>
</div>
<p class="demo-thread-text">次のスプリントでも同じ方法で進めましょう！</p>
<div class="demo-thread-actions">
<button class="demo-thread-action-btn demo-thread-like-btn">♡ 1</button>
<button class="demo-thread-action-btn demo-thread-reply-btn">返信</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>.demo-thread { padding: 8px; }
.demo-thread-comment { display: flex; gap: 10px; }
.demo-thread-avatar {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
background: color-mix(in srgb, var(--ui-primary) 15%, #fff);
color: var(--ui-primary); display: flex; align-items: center;
justify-content: center; font-weight: 700; font-size: 14px;
}
.demo-thread-body { flex: 1; min-width: 0; }
.demo-thread-meta { display: flex; align-items: center; gap: 8px; }
.demo-thread-author { font-size: 13px; font-weight: 600; color: #111; }
.demo-thread-date { font-size: 11px; color: #999; }
.demo-thread-text { margin: 4px 0 8px; font-size: 13px; color: #444; line-height: 1.6; }
.demo-thread-actions { display: flex; gap: 12px; margin-bottom: 12px; }
.demo-thread-action-btn {
border: none; background: none; font-size: 12px; color: #888;
cursor: pointer; padding: 2px 6px; border-radius: 4px;
transition: color 0.2s, background 0.2s;
}
.demo-thread-action-btn:hover { color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 8%, transparent); }
.demo-thread-action-btn.liked { color: #ef4444; }
.demo-thread-replies {
border-left: 2px solid color-mix(in srgb, var(--ui-primary) 20%, transparent);
padding-left: 16px; display: flex; flex-direction: column; gap: 12px;
}(function(){
document.querySelectorAll('.demo-thread-like-btn').forEach(function(btn){
btn.addEventListener('click', function(){
this.classList.toggle('liked');
var text = this.textContent.trim();
var num = parseInt(text.replace(/[^0-9]/g,''));
if(this.classList.contains('liked')){
this.textContent = '\u2665 ' + (num+1);
} else {
this.textContent = '\u2661 ' + num;
}
});
});
})();AIプロンプト
Basic
コメントスレッドをHTML/CSSで作ってください。親コメントに対してネストされた返信が表示されるツリー構造です。
Custom
以下の仕様でコメントスレッドを実装してください。 - アバター、ユーザー名、日時の表示 - ネストされた返信（左ボーダーでインデント） - いいねボタン（カウント付き） - 返信ボタン - プライマリカラー: #2563eb - いいねのトグル機能（クリックで切り替え）
Advanced
本格的なコメントスレッドを実装してください。 - 無限ネスト対応（レベルに応じたインデント） - コメント投稿フォーム（インライン返信） - Markdown対応のコメント本文 - いいね/ダウンボートの投票機能 - コメントの折りたたみ/展開 - ソート機能（新着順、人気順、古い順） - リアルタイム更新（WebSocket / SSE） - コメントの編集・削除機能
このプロジェクトの進め方はとても効率的だと思います。特にスプリント計画が素晴らしいですね。
ありがとうございます！チーム全員の協力のおかげです。
次のスプリントでも同じ方法で進めましょう！