パーツ番号 02-05-03 ・ CSSのみ

アイコン先頭リスト

各項目の先頭に小さなインラインSVGアイコンを配置したリストです。カテゴリー別の記事一覧などに向いています。

staticcss

プレビュー

ソースコード

HTML

<ul class="d02-05-03-list">
          <li><svg viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="10" fill="#ff9800"/></svg>速度の最適化について</li>
          <li><svg viewBox="0 0 24 24" width="16" height="16"><rect x="3" y="3" width="18" height="18" rx="4" fill="#4caf50"/></svg>セキュリティ対策の要点</li>
          <li><svg viewBox="0 0 24 24" width="16" height="16"><polygon points="12,3 21,20 3,20" fill="#e53935"/></svg>デザインの基本ルール</li>
        </ul>

CSS

.d02-05-03-list{list-style:none;margin:0;padding:0;width:100%;max-width:280px;font-size:14px;color:#333;}
        .d02-05-03-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed #e0e0e0;}
        .d02-05-03-list li:last-child{border-bottom:none;}
        .d02-05-03-list svg{flex:none;}

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