パーツ番号 01-04-05 ・ CSSのみ
チェック付きメリット一覧
✓アイコン付きの箇条書きで導入メリットを訴求。スクロールで画面内に入ると✓が順番に付いていきます。WordPressの選ばれる理由セクションに便利です。
プレビュー
ソースコード
HTML
<ul class="d01-04-05-list io-reveal">
<li><span class="d01-04-05-ck"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>初期費用0円で今すぐ始められる</li>
<li><span class="d01-04-05-ck"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>専門知識がなくても運用できる</li>
<li><span class="d01-04-05-ck"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>いつでもプラン変更・解約が可能</li>
<li><span class="d01-04-05-ck"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>手厚いサポート体制で安心</li>
</ul>CSS
.prev.d01-04-05{background:#fff}
.d01-04-05-list{list-style:none;margin:0;padding:0;width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px}
.d01-04-05-list li{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#2a3048}
.d01-04-05-ck{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#22c07a;color:#fff;flex:none;transform:scale(0);transition:transform .4s cubic-bezier(.2,1.4,.5,1)}
.d01-04-05-list.is-in .d01-04-05-ck{transform:scale(1)}
.d01-04-05-list.is-in li:nth-child(1) .d01-04-05-ck{transition-delay:.05s}
.d01-04-05-list.is-in li:nth-child(2) .d01-04-05-ck{transition-delay:.2s}
.d01-04-05-list.is-in li:nth-child(3) .d01-04-05-ck{transition-delay:.35s}
.d01-04-05-list.is-in li:nth-child(4) .d01-04-05-ck{transition-delay:.5s}クラス名 .d01-04-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。