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

段落スタイルガイド

見出し・本文・リストが一続きになった文章組みの見本です。WordPressのお知らせページや規約ページの基本レイアウトに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-03-10-wrap">
          <h4 class="d02-03-10-h">お知らせ</h4>
          <p class="d02-03-10-p">下記の通り、夏季休業期間を設けさせていただきます。</p>
          <ul class="d02-03-10-list">
            <li>休業期間: 8月13日〜8月16日</li>
            <li>お問い合わせ対応: 8月19日より順次</li>
          </ul>
        </div>

CSS

.d02-03-10{background:#f8fafc;text-align:left;align-items:flex-start}
        .d02-03-10-wrap{max-width:300px;font-family:"游ゴシック","Yu Gothic",-apple-system,"Hiragino Sans",sans-serif;color:#334155}
        .d02-03-10-h{font-size:15px;font-weight:700;color:#0f172a;margin:0 0 8px}
        .d02-03-10-p{font-size:12.5px;line-height:1.8;margin:0 0 10px}
        .d02-03-10-list{margin:0;padding-left:18px;font-size:12px;line-height:1.9;color:#475569}
        .d02-03-10-list li{margin-bottom:2px}

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