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

シンメトリー2カラム比較構成

中央の区切りを軸に左右対称で対比させる静止レイアウトです。WordPressの導入前後比較や2つのプラン対比セクションの骨組みに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-06-12-sym">
          <div class="d01-06-12-side">
            <span class="d01-06-12-tag">従来</span>
            <p>紙の書類で申請、承認まで数日</p>
          </div>
          <div class="d01-06-12-mid">VS</div>
          <div class="d01-06-12-side">
            <span class="d01-06-12-tag">導入後</span>
            <p>オンライン申請、即日承認</p>
          </div>
        </div>

CSS

.prev.d01-06-12{padding:20px}
        .d01-06-12-sym{width:100%;max-width:320px;display:flex;align-items:center;gap:14px}
        .d01-06-12-side{flex:1;text-align:center;border:1px solid #e3e3e3;border-radius:8px;padding:16px 12px}
        .d01-06-12-tag{display:inline-block;font-size:10px;letter-spacing:.1em;color:#999;margin-bottom:8px}
        .d01-06-12-side p{margin:0;font-size:11px;line-height:1.7;color:#555}
        .d01-06-12-mid{flex:none;font-size:12px;font-weight:800;color:#bbb}

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