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

表紙(カバー)風レイアウト

大きなタイトル・号数・特集見出しで構成した表紙デザイン。冊子形式のコンテンツやランディングページの扉として使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-07-cover">
          <span class="d01-09-07-issue">No.128</span>
          <h4 class="d01-09-07-title">SPECIAL<br>ISSUE</h4>
          <span class="d01-09-07-feature">特集：静けさのある暮らし</span>
        </div>

CSS

.d01-09-07{padding:0;}
        .d01-09-07-cover{width:100%;height:100%;background:linear-gradient(160deg,#1f2a3a,#3d5166);color:#fff;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;}
        .d01-09-07-issue{font-size:10px;letter-spacing:.1em;opacity:.8;}
        .d01-09-07-title{margin:0;font-size:28px;line-height:1.1;font-weight:800;letter-spacing:.03em;}
        .d01-09-07-feature{font-size:11px;border-top:1px solid rgba(255,255,255,.4);padding-top:8px;}

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