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

余白多めエディトリアル型

雑誌の誌面を思わせる広い余白と細い罫線だけで構成した静かなレイアウトです。WordPressのコラムやインタビュー記事の導入部に適しています。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-06-09-editorial">
          <h4>editorial</h4>
          <hr class="d01-06-09-rule">
          <p>雑誌のような広い余白と控えめな罫線を用いた組み方です。</p>
        </div>

CSS

.prev.d01-06-09{padding:32px 28px}
        .d01-06-09-editorial{max-width:230px;margin:0 auto}
        .d01-06-09-editorial h4{margin:0 0 14px;font-size:11px;letter-spacing:.3em;color:#999;text-transform:uppercase}
        .d01-06-09-rule{border:none;border-top:1px solid #ddd;margin:0 0 16px}
        .d01-06-09-editorial p{margin:0;font-size:12px;line-height:2.1;color:#555}

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