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

フレーム付きセクション

コンテンツブロックの内側を細い枠線で囲んだ構成です。WordPressのお知らせ欄やサービス紹介の一区画として、境界をはっきり示したい場面に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-06-02-frame">
          <span class="d01-06-02-label">FEATURE</span>
          <h4>フレーム付きセクション</h4>
          <p>内側に細い罫線を配した落ち着いた構成です。</p>
        </div>

CSS

.prev.d01-06-02{padding:24px}
        .d01-06-02-frame{width:100%;max-width:230px;border:1px solid #cfcac0;padding:22px 18px;text-align:center;background:#fffdf9}
        .d01-06-02-label{display:inline-block;font-size:10px;letter-spacing:.25em;color:#a08a5a;margin-bottom:10px}
        .d01-06-02-frame h4{margin:0 0 8px;font-size:14px;color:#2f2a22;font-weight:700}
        .d01-06-02-frame p{margin:0;font-size:11.5px;line-height:1.8;color:#71685a}

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