← 静的パーツギャラリーへ戻る

パーツ番号 01-11-06 ・ CSSのみ

資料請求LP構成(訴求→実績ロゴ→フォーム)

要素を絞ったリード獲得特化の短い構成見本。ホワイトペーパー配布やメルマガ登録の獲得ページに適する。

staticcss

プレビュー

ソースコード

HTML

<div class="lp01-11-06">
          <div class="sec app">
            <strong>導入事例まとめ資料を無料配布中</strong>
          </div>
          <div class="sec logos">
            <span class="ttl">導入企業</span>
            <div class="row"><i></i><i></i><i></i><i></i></div>
          </div>
          <div class="sec form">
            <span class="ttl">資料請求フォーム</span>
            <div class="f"><span></span><span></span><b>送信する</b></div>
          </div>
        </div>

CSS

.d01-11-06{padding:0;display:block}
        .lp01-11-06{width:100%;height:100%;display:flex;flex-direction:column;font-size:9px;background:#fff}
        .lp01-11-06 .sec{padding:8px 10px;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:5px}
        .lp01-11-06 .app{background:#f0f4ff;align-items:center;text-align:center;padding-top:14px;padding-bottom:14px}
        .lp01-11-06 .app strong{font-size:9.5px;color:#22317c;line-height:1.4}
        .lp01-11-06 .ttl{font-size:8px;font-weight:bold;color:#22317c}
        .lp01-11-06 .logos .row{display:flex;gap:5px}
        .lp01-11-06 .logos .row i{flex:1;height:12px;background:#e6e6e6;border-radius:2px}
        .lp01-11-06 .form .f{display:flex;flex-direction:column;gap:3px}
        .lp01-11-06 .form .f span{height:9px;background:#f2f2f2;border:1px solid #ddd;border-radius:2px}
        .lp01-11-06 .form .f b{background:#22317c;color:#fff;text-align:center;font-size:8px;padding:5px;border-radius:2px}

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