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

カード型リスト項目

各項目を薄い罫線カードで区切って表示するリストです。工程紹介やサービス内容の一覧表示に適しています。

staticcss

プレビュー

ソースコード

HTML

<ul class="d02-05-06-list">
          <li><strong>資料準備</strong><span>必要な素材と情報を集める</span></li>
          <li><strong>制作作業</strong><span>デザインと文章を仕上げる</span></li>
          <li><strong>公開対応</strong><span>サイトへの反映と告知を行う</span></li>
        </ul>

CSS

.d02-05-06-list{list-style:none;margin:0;padding:0;width:100%;max-width:280px;font-size:13px;color:#333;}
        .d02-05-06-list li{border:1px solid #ddd;border-radius:6px;padding:8px 12px;margin-bottom:8px;background:#fafafa;}
        .d02-05-06-list li:last-child{margin-bottom:0;}
        .d02-05-06-list strong{display:block;font-size:13px;color:#222;margin-bottom:2px;}
        .d02-05-06-list span{display:block;color:#777;font-size:12px;}

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