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

アイコン付き目次リスト

各項目の頭に丸型アイコンを添えた目次。図解が多い記事や手順解説記事で、内容の種類を視覚的に伝えられる。

staticcss

プレビュー

ソースコード

HTML

<p class="ttl06-10-03">目次</p>
        <div class="row06-10-03"><span class="ic06-10-03 ic06-10-03-doc"></span><p>記事の概要</p></div>
        <div class="row06-10-03"><span class="ic06-10-03 ic06-10-03-list"></span><p>準備するもの</p></div>
        <div class="row06-10-03"><span class="ic06-10-03 ic06-10-03-check"></span><p>手順の解説</p></div>
        <div class="row06-10-03"><span class="ic06-10-03 ic06-10-03-star"></span><p>ポイントまとめ</p></div>

CSS

.d06-10-03{width:100%;display:flex;flex-direction:column;}
        .d06-10-03 .ttl06-10-03{margin:0 0 11px;font-size:13px;font-weight:bold;color:#222;}
        .d06-10-03 .row06-10-03{display:flex;align-items:center;gap:10px;padding:6px 0;}
        .d06-10-03 .ic06-10-03{width:20px;height:20px;border-radius:50%;flex-shrink:0;}
        .d06-10-03 .ic06-10-03-doc{background:linear-gradient(135deg,#a8c0ff,#3f6fd8);}
        .d06-10-03 .ic06-10-03-list{background:linear-gradient(135deg,#ffd6a5,#e8730f);}
        .d06-10-03 .ic06-10-03-check{background:linear-gradient(135deg,#b5f2c0,#2fa86a);}
        .d06-10-03 .ic06-10-03-star{background:linear-gradient(135deg,#ffe08a,#e8a800);}
        .d06-10-03 .row06-10-03 p{margin:0;font-size:11.5px;color:#333;}

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