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

日付区切り記事一覧(月別グルーピング)

「2026年7月」のような月見出しで記事を区切って並べる構成。更新頻度の高いブログのアーカイブ表示に向く。

staticcss

プレビュー

ソースコード

HTML

<p class="mh06-07-06">2026年7月</p>
        <div class="it06-07-06"><p>夏休みの自由研究アイデア</p></div>
        <div class="it06-07-06"><p>冷房と扇風機の併用術</p></div>
        <p class="mh06-07-06">2026年6月</p>
        <div class="it06-07-06"><p>梅雨時期の洗濯物対策</p></div>
        <div class="it06-07-06"><p>紫陽花が見られる庭園特集</p></div>

CSS

.d06-07-06{display:flex;flex-direction:column;width:100%;}
        .d06-07-06 .mh06-07-06{margin:10px 0 6px;font-size:10px;font-weight:bold;color:#fff;background:#555;display:inline-block;padding:3px 10px;border-radius:3px;width:fit-content;}
        .d06-07-06 .mh06-07-06:first-child{margin-top:0;}
        .d06-07-06 .it06-07-06{padding:6px 0 6px 14px;border-left:2px solid #ddd;}
        .d06-07-06 .it06-07-06 p{margin:0;font-size:11px;color:#333;}

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