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

余白を活かしたミニマルボックス配置

要素数を絞り広い余白で静けさを演出した配置見本です。WordPressのブランドページやラグジュアリー系サイトの導入部に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-09-wrap">
          <span class="d01-14-09-box1"></span>
          <span class="d01-14-09-line"></span>
          <span class="d01-14-09-box2"></span>
          <span class="d01-14-09-caption">Less is more</span>
        </div>

CSS

.prev.d01-14-09{padding:14px}
        .d01-14-09-wrap{position:relative;width:100%;max-width:300px;height:210px}
        .d01-14-09-box1{position:absolute;top:16px;left:16px;width:64px;height:64px;border-radius:8px;background:#0f172a}
        .d01-14-09-box2{position:absolute;bottom:24px;right:24px;width:44px;height:44px;border-radius:8px;border:2px solid #cbd5e1}
        .d01-14-09-line{position:absolute;top:48px;left:104px;width:130px;height:2px;background:#e2e8f0}
        .d01-14-09-caption{position:absolute;bottom:26px;left:16px;font-size:11px;letter-spacing:.15em;color:#94a3b8;font-weight:700}

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