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

タイムスタンプ付きチャットリスト

各発言に時刻が併記されたシンプルな一覧表示です。履歴確認画面やログ表示のサンプルとして活用できます。

staticcss

プレビュー

ソースコード

HTML

<ul class="chat">
          <li><span class="txt">今日の会議は14時からです。</span><span class="time">10:02</span></li>
          <li><span class="txt">承知しました、参加します。</span><span class="time">10:05</span></li>
          <li><span class="txt">資料は共有フォルダにあります。</span><span class="time">10:11</span></li>
        </ul>

CSS

.d10-10-03 .chat{ width:100%; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
        .d10-10-03 .chat li{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:9px 12px; background:#f8f9fb; border-left:3px solid #6366f1; border-radius:6px; }
        .d10-10-03 .txt{ font-size:12.5px; color:#333; }
        .d10-10-03 .time{ font-size:10.5px; color:#9ca3af; flex:none; }

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