パーツ番号 06-12-06 ・ CSSのみ

折りたたみ返信テキスト表示

返信をあらかじめ折りたたみ、「返信を表示」というテキストのみを見せる静止デザインです。長くなりがちなコメント欄をコンパクトに見せる例として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-12-06-wrap">
          <div class="d06-12-06-comment">
            <span class="d06-12-06-avatar">新</span>
            <div class="d06-12-06-body">
              <div class="d06-12-06-name">新田 恵一</div>
              <p class="d06-12-06-text">これはとても興味深い視点ですね。</p>
              <div class="d06-12-06-toggle"><span class="d06-12-06-arrow">▾</span>返信を表示（3件）</div>
            </div>
          </div>
          <div class="d06-12-06-comment">
            <span class="d06-12-06-avatar">原</span>
            <div class="d06-12-06-body">
              <div class="d06-12-06-name">原田 誠</div>
              <p class="d06-12-06-text">別の記事も読んでみます。</p>
              <div class="d06-12-06-toggle"><span class="d06-12-06-arrow">▾</span>返信を表示（1件）</div>
            </div>
          </div>
        </div>

CSS

.d06-12-06-wrap{ width:100%; display:flex; flex-direction:column; gap:14px; }
        .d06-12-06-comment{ display:flex; gap:8px; }
        .d06-12-06-avatar{ width:28px; height:28px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,#8f6aff,#6a93ff); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d06-12-06-name{ font-size:11px; font-weight:700; color:#221f33; }
        .d06-12-06-text{ margin:3px 0 6px; font-size:10.5px; line-height:1.5; color:#5c5977; }
        .d06-12-06-toggle{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; color:#5b6bd6; }
        .d06-12-06-arrow{ font-size:9px; }

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