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

タグクラウド+読了時間付き記事リスト

先頭にハッシュタグ風のカテゴリを並べ、各記事に読了目安時間を添えた一覧です。読者が記事を選びやすいブログトップに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="tags06-07-12">
          <span class="tg06-07-12 tg06-07-12-a">#暮らし</span>
          <span class="tg06-07-12 tg06-07-12-b">#グルメ</span>
          <span class="tg06-07-12 tg06-07-12-a">#旅行</span>
        </div>
        <div class="cd06-07-12"><p class="ti06-07-12">古民家カフェを巡る週末旅の記録</p><span class="mt06-07-12">7分で読める</span></div>
        <div class="cd06-07-12"><p class="ti06-07-12">地元食材でつくる季節の常備菜</p><span class="mt06-07-12">5分で読める</span></div>

CSS

.d06-07-12{display:flex;flex-direction:column;gap:12px;width:100%;}
        .d06-07-12 .tags06-07-12{display:flex;gap:6px;flex-wrap:wrap;}
        .d06-07-12 .tg06-07-12{font-size:9.5px;padding:3px 8px;border-radius:10px;color:#fff;}
        .d06-07-12 .tg06-07-12-a{background:#4a8fd8;}
        .d06-07-12 .tg06-07-12-b{background:#e8730f;}
        .d06-07-12 .cd06-07-12{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid #eee;}
        .d06-07-12 .ti06-07-12{margin:0;font-size:11.5px;color:#222;line-height:1.4;}
        .d06-07-12 .mt06-07-12{font-size:9.5px;color:#aaa;flex-shrink:0;}

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