パーツ番号 06-10-05 ・ CSSのみ

横並びの読了時間+文字数バッジ

読了目安時間や文字数、章数をピル型バッジで並べる表示。記事タイトル直下に置くと読み始めの目安を伝えられる。

staticcss

プレビュー

ソースコード

HTML

<div class="badges06-10-05">
          <span class="bdg06-10-05 bdg06-10-05-a"><strong>5</strong>分で読了</span>
          <span class="bdg06-10-05 bdg06-10-05-b"><strong>2,400</strong>文字</span>
          <span class="bdg06-10-05 bdg06-10-05-c"><strong>4</strong>章構成</span>
        </div>
        <p class="note06-10-05">この記事を読むための目安情報です</p>

CSS

.d06-10-05{width:100%;display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
        .d06-10-05 .badges06-10-05{display:flex;gap:9px;flex-wrap:wrap;}
        .d06-10-05 .bdg06-10-05{font-size:11px;color:#333;background:#eef0f7;padding:6px 12px;border-radius:99px;}
        .d06-10-05 .bdg06-10-05 strong{color:#4a6fd8;font-size:13px;margin-right:2px;}
        .d06-10-05 .bdg06-10-05-b strong{color:#e8730f;}
        .d06-10-05 .bdg06-10-05-c strong{color:#2f9e5c;}
        .d06-10-05 .note06-10-05{margin:0;font-size:10.5px;color:#999;}

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