パーツ番号 01-11-06 ・ CSSのみ
資料請求LP構成(訴求→実績ロゴ→フォーム)
要素を絞ったリード獲得特化の短い構成見本。ホワイトペーパー配布やメルマガ登録の獲得ページに適する。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。