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

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

比較検討LP構成(自社優位性→比較表→導入事例)

BtoBの検討材料を提示する構成見本。競合比較を軸にした資料請求前の検討支援ページに適する。

staticcss

プレビュー

ソースコード

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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。