パーツ番号 11-11-09 ・ CSSのみ

無限フィードの区切りセパレーター

日付ラベルを左右の罫線で挟んだフィードの区切り線の静止見本です。タイムライン型のWordPressテーマで日別に投稿をまとめて表示する際の仕切りに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-11-09-frame">
          <div class="d11-11-09-row"><span class="d11-11-09-av"></span><div class="d11-11-09-lines"><span></span><span class="short"></span></div></div>
          <div class="d11-11-09-sep"><span class="d11-11-09-sline"></span><span class="d11-11-09-sdate">2026年7月10日</span><span class="d11-11-09-sline"></span></div>
          <div class="d11-11-09-row"><span class="d11-11-09-av"></span><div class="d11-11-09-lines"><span></span><span class="short"></span></div></div>
          <div class="d11-11-09-row"><span class="d11-11-09-av"></span><div class="d11-11-09-lines"><span></span><span class="short"></span></div></div>
        </div>

CSS

.d11-11-09-frame{ width:270px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; padding:14px; display:flex; flex-direction:column; gap:12px; }
        .d11-11-09-row{ display:flex; align-items:center; gap:10px; }
        .d11-11-09-av{ width:28px; height:28px; border-radius:50%; background:#dbe4f5; flex:0 0 auto; }
        .d11-11-09-lines{ flex:1; display:flex; flex-direction:column; gap:5px; }
        .d11-11-09-lines span{ height:8px; border-radius:4px; background:#e6e9ee; display:block; }
        .d11-11-09-lines span.short{ width:55%; }
        .d11-11-09-sep{ display:flex; align-items:center; gap:8px; padding:2px 0; }
        .d11-11-09-sline{ flex:1; height:1px; background:#e5e7eb; display:block; }
        .d11-11-09-sdate{ font-size:10px; color:#9aa1ab; font-weight:700; white-space:nowrap; }

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