パーツ番号 01-11-09 ・ CSSのみ
比較検討LP構成(自社優位性→比較表→導入事例)
BtoBの検討材料を提示する構成見本。競合比較を軸にした資料請求前の検討支援ページに適する。
プレビュー
ソースコード
HTML
<div class="lp01-11-09">
<div class="sec adv">
<span class="ttl">選ばれる理由</span>
<div class="row"><i></i><i></i><i></i></div>
</div>
<div class="sec cmp">
<span class="ttl">他社比較</span>
<div class="tbl">
<div class="tr hd2"><span>項目</span><span>自社</span><span>他社</span></div>
<div class="tr"><span>価格</span><span>◎</span><span>△</span></div>
<div class="tr"><span>サポート</span><span>◎</span><span>○</span></div>
</div>
</div>
<div class="sec case">
<span class="ttl">導入事例</span>
<div class="row"><i></i><i></i></div>
</div>
</div>CSS
.d01-11-09{padding:0;display:block}
.lp01-11-09{width:100%;height:100%;display:flex;flex-direction:column;font-size:9px;background:#fff}
.lp01-11-09 .sec{padding:7px 9px;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:4px}
.lp01-11-09 .ttl{font-size:8px;font-weight:bold;color:#0b4a6f}
.lp01-11-09 .adv .row{display:flex;gap:4px}
.lp01-11-09 .adv .row i{flex:1;height:12px;background:#dceeff;border-radius:3px}
.lp01-11-09 .tbl{display:flex;flex-direction:column;gap:1px;font-size:7px}
.lp01-11-09 .tr{display:flex;gap:2px}
.lp01-11-09 .tr span{flex:1;background:#f4f9fc;text-align:center;padding:2px 0}
.lp01-11-09 .tr.hd2 span{background:#0b4a6f;color:#fff;font-weight:bold}
.lp01-11-09 .case .row{display:flex;gap:5px}
.lp01-11-09 .case .row i{flex:1;height:14px;background:#eaf3f9;border-radius:3px}クラス名 .d01-11-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。