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

折りたたみアイコン付き目次見出し(閉状態)

閉じた状態の三角アイコンと項目数を添えた目次見出し。アコーディオン式に開閉する目次UIの初期表示の見た目に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="head06-10-08">
          <span class="chev06-10-08"></span>
          <p class="ti06-10-08">目次を見る</p>
          <span class="cnt06-10-08">全6項目</span>
        </div>
        <p class="sub06-10-08">タップすると目次が展開されます</p>

CSS

.d06-10-08{width:100%;display:flex;flex-direction:column;}
        .d06-10-08 .head06-10-08{display:flex;align-items:center;gap:10px;background:#eef0f7;border-radius:8px;padding:13px 16px;}
        .d06-10-08 .chev06-10-08{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid #4a6fd8;flex-shrink:0;}
        .d06-10-08 .ti06-10-08{margin:0;font-size:12.5px;font-weight:bold;color:#222;flex:1;}
        .d06-10-08 .cnt06-10-08{font-size:10px;color:#888;flex-shrink:0;}
        .d06-10-08 .sub06-10-08{margin:9px 2px 0;font-size:10.5px;color:#999;}

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