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

パーツ番号 01-04-07 ・ CSSのみ

Before→After訴求

課題と解決を矢印でつなぐ2カラム構成。中央の矢印が脈打つように動き続けます。WordPressの導入効果や改善事例の訴求に便利です。

autocss

プレビュー

ソースコード

HTML

<div class="d01-04-07-wrap">
          <div class="d01-04-07-col d01-04-07-before">
            <span class="d01-04-07-lb">Before</span>
            <p>更新が大変で放置しがち…</p>
          </div>
          <span class="d01-04-07-arrow">
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </span>
          <div class="d01-04-07-col d01-04-07-after">
            <span class="d01-04-07-lb">After</span>
            <p>誰でも簡単に更新できる!</p>
          </div>
        </div>

CSS

.prev.d01-04-07{background:#fff}
        .d01-04-07-wrap{display:flex;align-items:center;gap:14px;width:100%;max-width:460px}
        .d01-04-07-col{flex:1;border-radius:14px;padding:20px 16px;text-align:center}
        .d01-04-07-before{background:#f2f3f6;border:1px solid #e4e6ec}
        .d01-04-07-after{background:linear-gradient(135deg,#eef4ff,#f0ecff);border:1px solid #d7e0ff}
        .d01-04-07-lb{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;padding:3px 10px;border-radius:20px;margin-bottom:10px}
        .d01-04-07-before .d01-04-07-lb{background:#d9dce4;color:#5c6478}
        .d01-04-07-after .d01-04-07-lb{background:#5b7cfa;color:#fff}
        .d01-04-07-col p{margin:0;font-size:13px;color:#2a3048;line-height:1.5}
        .d01-04-07-arrow{display:inline-flex;color:#5b7cfa;flex:none;animation:d01-04-07-pulse 1.4s ease-in-out infinite}
        @keyframes d01-04-07-pulse{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(5px);opacity:1}}

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