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

価値提案グリッド

「高速」「安全」などの価値を大アイコンで4つ並べます。スクロールで画面内に入るとフェードアップして順に登場します。WordPressの価値訴求セクションに便利です。

scrollcss

プレビュー

ソースコード

HTML

<div class="d01-04-02-grid io-reveal">
          <div class="d01-04-02-cell">
            <span class="d01-04-02-ic">
              <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>
            </span>
            <b>高速</b>
          </div>
          <div class="d01-04-02-cell">
            <span class="d01-04-02-ic">
              <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            </span>
            <b>安全</b>
          </div>
          <div class="d01-04-02-cell">
            <span class="d01-04-02-ic">
              <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
            </span>
            <b>時短</b>
          </div>
          <div class="d01-04-02-cell">
            <span class="d01-04-02-ic">
              <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.5 6.5L21 9l-5 4.5L17.5 20 12 16.5 6.5 20 8 13.5 3 9l6.5-.5z"/></svg>
            </span>
            <b>高品質</b>
          </div>
        </div>

CSS

.prev.d01-04-02{background:#fbfaff}
        .d01-04-02-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:420px}
        .d01-04-02-cell{background:#fff;border:1px solid #eae6f7;border-radius:16px;padding:22px 12px;text-align:center;opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease}
        .d01-04-02-grid.is-in .d01-04-02-cell{opacity:1;transform:none}
        .d01-04-02-grid.is-in .d01-04-02-cell:nth-child(1){transition-delay:.05s}
        .d01-04-02-grid.is-in .d01-04-02-cell:nth-child(2){transition-delay:.18s}
        .d01-04-02-grid.is-in .d01-04-02-cell:nth-child(3){transition-delay:.31s}
        .d01-04-02-grid.is-in .d01-04-02-cell:nth-child(4){transition-delay:.44s}
        .d01-04-02-ic{display:inline-flex;color:#7a5bf0;margin-bottom:10px}
        .d01-04-02-cell b{font-size:15px;color:#2a2350}

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