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

パーツ番号 10-03-05 ・ CSSのみ

コメントスレッド(ネスト)

返信がインデントされ、いいね数付きで表示されるコメント欄。WordPressの投稿コメント表示やレビュー欄のデザインに。

chatcss

プレビュー

ソースコード

HTML

<div class="d10-03-05-thread">
          <div class="d10-03-05-c">
            <span class="d10-03-05-av" style="--g1:#84fab0;--g2:#8fd3f4">Y</span>
            <div class="d10-03-05-body">
              <p class="d10-03-05-name">Yuki <span class="d10-03-05-time">3分前</span></p>
              <p class="d10-03-05-txt">この記事すごく参考になりました！</p>
              <span class="d10-03-05-like"><svg viewBox="0 0 24 24" width="11" height="11" fill="#ff6b8b"><path d="M12 21s-7-4.6-9.3-8.4C1 9.3 2.7 6 6 6c2 0 3.2 1.2 4 2.3C10.8 7.2 12 6 14 6c3.3 0 5 3.3 3.3 6.6C19 16.4 12 21 12 21z"/></svg>8</span>
            </div>
          </div>
          <div class="d10-03-05-c d10-03-05-nest">
            <span class="d10-03-05-av" style="--g1:#f6a6ff;--g2:#ff8b8b">M</span>
            <div class="d10-03-05-body">
              <p class="d10-03-05-name">Mika <span class="d10-03-05-time">1分前</span></p>
              <p class="d10-03-05-txt">@Yuki 私も同じこと思ってました！</p>
              <span class="d10-03-05-like"><svg viewBox="0 0 24 24" width="11" height="11" fill="#ff6b8b"><path d="M12 21s-7-4.6-9.3-8.4C1 9.3 2.7 6 6 6c2 0 3.2 1.2 4 2.3C10.8 7.2 12 6 14 6c3.3 0 5 3.3 3.3 6.6C19 16.4 12 21 12 21z"/></svg>2</span>
            </div>
          </div>
        </div>

CSS

.d10-03-05 .d10-03-05-thread{width:240px;display:flex;flex-direction:column;gap:12px;font-size:12px}
        .d10-03-05 .d10-03-05-c{display:flex;gap:8px}
        .d10-03-05 .d10-03-05-nest{margin-left:24px;padding-left:12px;border-left:2px solid #eef1f5}
        .d10-03-05 .d10-03-05-av{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px;background:linear-gradient(135deg,var(--g1),var(--g2))}
        .d10-03-05 .d10-03-05-name{font-weight:700;color:#333}
        .d10-03-05 .d10-03-05-time{font-weight:400;color:#9aa4b2;font-size:10px;margin-left:4px}
        .d10-03-05 .d10-03-05-txt{color:#555;line-height:1.5;margin:3px 0 5px}
        .d10-03-05 .d10-03-05-like{display:inline-flex;align-items:center;gap:3px;color:#9aa4b2;font-size:11px}

クラス名 .d10-03-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。