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

左右対称の比較2カラムレイアウト

同じ構造の2つのプランを左右対称に並べて比較しやすくした静止レイアウトです。WordPressの料金プラン比較やビフォーアフター紹介のセクションに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-15-09-wrap">
          <div class="d01-15-09-col a">
            <div class="d01-15-09-head">PLAN A</div>
            <div class="d01-15-09-price"></div>
            <div class="d01-15-09-feat"></div>
            <div class="d01-15-09-feat"></div>
            <div class="d01-15-09-feat"></div>
          </div>
          <span class="d01-15-09-vs">VS</span>
          <div class="d01-15-09-col b">
            <div class="d01-15-09-head">PLAN B</div>
            <div class="d01-15-09-price"></div>
            <div class="d01-15-09-feat"></div>
            <div class="d01-15-09-feat"></div>
            <div class="d01-15-09-feat"></div>
          </div>
        </div>

CSS

.prev.d01-15-09{padding:20px;align-items:stretch}
        .d01-15-09-wrap{position:relative;display:flex;width:100%;gap:0}
        .d01-15-09-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;border-radius:10px}
        .d01-15-09-col.a{background:#ecfdf5;margin-right:8px}
        .d01-15-09-col.b{background:#eef2ff;margin-left:8px}
        .d01-15-09-head{font-size:11px;font-weight:800;letter-spacing:.1em;color:#334155}
        .d01-15-09-price{width:54px;height:54px;border-radius:50%;background:#fff;border:3px solid #10b981}
        .d01-15-09-col.b .d01-15-09-price{border-color:#6366f1}
        .d01-15-09-feat{width:80%;height:7px;border-radius:4px;background:#cbd5e1}
        .d01-15-09-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:#1e2433;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.2)}

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