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

両モード比較のBefore/Afterカード

ライトとダークのミニ画面を左右に並べ、切替の効果を一目で伝える比較見本です。機能紹介ページのビフォーアフター表現に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-15-09-compare">
          <div class="d11-15-09-side">
            <div class="d11-15-09-mini d11-15-09-mini-light">
              <span></span><span></span>
            </div>
            <span class="d11-15-09-tag">Before・ライト</span>
          </div>
          <span class="d11-15-09-arrow">&#8594;</span>
          <div class="d11-15-09-side">
            <div class="d11-15-09-mini d11-15-09-mini-dark">
              <span></span><span></span>
            </div>
            <span class="d11-15-09-tag">After・ダーク</span>
          </div>
        </div>

CSS

.d11-15-09-compare{display:flex;align-items:center;gap:10px}
        .d11-15-09-side{display:flex;flex-direction:column;align-items:center;gap:6px}
        .d11-15-09-mini{width:80px;height:56px;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:5px;box-sizing:border-box}
        .d11-15-09-mini-light{background:#f1f5f9;border:1px solid #e2e8f0}
        .d11-15-09-mini-dark{background:#0f172a}
        .d11-15-09-mini span{display:block;height:5px;border-radius:3px;background:#cbd5e1}
        .d11-15-09-mini-dark span{background:#475569}
        .d11-15-09-tag{font-size:10.5px;color:#6b7280;font-weight:600}
        .d11-15-09-arrow{font-size:16px;color:#9ca3af}

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