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

余白基調ミニマルグリッド

広い余白と少ない要素で構成した静的なレイアウトです。WordPressのブランドページやトップの導入部に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-05-09-mini">
          <span class="d01-05-09-tagline">SIMPLE</span>
          <span class="d01-05-09-rule"></span>
          <span class="d01-05-09-caption">余白を活かした静かな構成</span>
        </div>

CSS

.prev.d01-05-09{padding:16px}
        .d01-05-09-mini{width:100%;max-width:260px;display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px 0}
        .d01-05-09-tagline{font-size:11px;letter-spacing:.3em;color:#94a3b8;font-weight:700}
        .d01-05-09-rule{width:36px;height:2px;background:#0f172a}
        .d01-05-09-caption{font-size:12px;color:#475569;text-align:center}

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