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

囲み枠コンテンツ(パネル型)

影を付けずフラットな線だけで囲んだパネル構成です。WordPressの料金プランや注意事項など、控えめに情報をまとめたい箇所に適しています。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-06-04-panel">
          <h4>囲み枠パネル</h4>
          <p>影を用いないフラットな枠線だけのパネル構成です。</p>
        </div>

CSS

.prev.d01-06-04{padding:24px}
        .d01-06-04-panel{width:100%;max-width:220px;border:2px solid #dedad2;border-radius:10px;padding:22px 18px;background:#fafaf8}
        .d01-06-04-panel h4{margin:0 0 10px;font-size:14px;color:#333;font-weight:700}
        .d01-06-04-panel p{margin:0;font-size:11.5px;line-height:1.85;color:#777}

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