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

カード型の目次ボックス

角丸と枠線で囲んだカード内に目次をまとめる見た目。記事本文と視覚的に区切りたいブログ冒頭のボックスに向く。

staticcss

プレビュー

ソースコード

HTML

<div class="box06-10-04">
          <p class="hd06-10-04">CONTENTS</p>
          <p class="c06-10-04">01. 記事を書く前の準備</p>
          <p class="c06-10-04">02. 構成案の作り方</p>
          <p class="c06-10-04">03. 見出しの付け方</p>
          <p class="c06-10-04">04. 公開前のチェック</p>
        </div>

CSS

.d06-10-04{width:100%;}
        .d06-10-04 .box06-10-04{background:#f7f8fc;border:1px solid #e3e6f0;border-radius:10px;padding:16px 18px;}
        .d06-10-04 .hd06-10-04{margin:0 0 11px;font-size:11px;font-weight:bold;letter-spacing:.08em;color:#4a6fd8;}
        .d06-10-04 .c06-10-04{margin:0;padding:7px 0;font-size:11.5px;color:#333;border-top:1px dashed #dfe3ee;}
        .d06-10-04 .c06-10-04:first-of-type{border-top:none;}

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