パーツ番号 06-07-04 ・ CSSのみ

縦積みシンプル記事リスト(サムネなし)

タイトルと日付だけを罫線で区切って並べる装飾を抑えたリスト。お知らせ一覧やテキスト中心の記事一覧に向く。

staticcss

プレビュー

ソースコード

HTML

<div class="ln06-07-04"><p class="ti06-07-04">オフィスチェア選びの基準</p><span class="dt06-07-04">2026.06.20</span></div>
        <div class="ln06-07-04"><p class="ti06-07-04">在宅と出社のバランス論</p><span class="dt06-07-04">2026.06.15</span></div>
        <div class="ln06-07-04"><p class="ti06-07-04">議事録テンプレート公開</p><span class="dt06-07-04">2026.06.10</span></div>
        <div class="ln06-07-04"><p class="ti06-07-04">名刺デザインの基本</p><span class="dt06-07-04">2026.06.02</span></div>

CSS

.d06-07-04{display:flex;flex-direction:column;width:100%;}
        .d06-07-04 .ln06-07-04{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px dashed #ddd;}
        .d06-07-04 .ti06-07-04{margin:0;font-size:12px;color:#222;}
        .d06-07-04 .dt06-07-04{font-size:10px;color:#999;flex-shrink:0;margin-left:12px;}

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