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

大型背景文字ヒーロー

背景に薄い色の巨大な数字をあしらい、その手前に見出しを配置する構図です。WordPressのストーリー訴求やブランドサイトの導入部に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-07-12-hero">
          <span class="d01-07-12-big">01</span>
          <div class="d01-07-12-text">
            <h1>物語は、ここから。</h1>
            <p>ブランドの原点を伝えるヒーローセクション。</p>
          </div>
        </div>

CSS

.prev.d01-07-12{padding:0;display:block;min-height:300px}
        .d01-07-12-hero{position:relative;height:300px;display:flex;align-items:center;background:#fff;overflow:hidden;padding:0 30px}
        .d01-07-12-big{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:170px;font-weight:800;color:#f1ede4;line-height:1;z-index:0;user-select:none}
        .d01-07-12-text{position:relative;z-index:1}
        .d01-07-12-text h1{margin:0 0 10px;font-size:22px;font-weight:700;color:#20242a}
        .d01-07-12-text p{margin:0;font-size:12px;color:#70808c}

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