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

フレーム付きヒーロー

内側にゆとりを持たせ細い枠線で囲むことで上品な印象を与える構図です。WordPressのギャラリーサイトやアトリエ系サイトに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-07-05-hero">
          <div class="d01-07-05-frame">
            <h1>整える、という美学。</h1>
            <p>細部までこだわり抜いた、静かなデザイン。</p>
            <a href="#" class="d01-07-05-btn" onclick="return false;">Learn more</a>
          </div>
        </div>

CSS

.prev.d01-07-05{padding:20px;display:flex;align-items:center;justify-content:center;min-height:300px;background:#f4f2ee}
        .d01-07-05-hero{width:100%;height:100%}
        .d01-07-05-frame{height:260px;border:1px solid #b9ab97;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
        .d01-07-05-frame h1{margin:0 0 10px;font-size:20px;font-weight:700;color:#2c2620;letter-spacing:.05em}
        .d01-07-05-frame p{margin:0 0 16px;font-size:12px;line-height:1.8;color:#7c7263}
        .d01-07-05-btn{font-size:11.5px;letter-spacing:.1em;color:#2c2620;text-decoration:none;border-bottom:1px solid #2c2620;padding-bottom:2px}

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