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

アイコンボックス3列(特徴)

アイコン+見出し+説明を3カラムで並べる特徴紹介。ホバーでカードが持ち上がります。WordPressのサービス紹介ページの「3つの特長」ブロックに最適です。

hovercss

プレビュー

ソースコード

HTML

<div class="d01-04-01-wrap">
          <div class="d01-04-01-box">
            <span class="d01-04-01-ic">
              <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>
            </span>
            <h4>高速表示</h4>
            <p>軽量設計で読み込みが速い。</p>
          </div>
          <div class="d01-04-01-box">
            <span class="d01-04-01-ic">
              <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            </span>
            <h4>安全設計</h4>
            <p>堅牢なセキュリティを標準搭載。</p>
          </div>
          <div class="d01-04-01-box">
            <span class="d01-04-01-ic">
              <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
            </span>
            <h4>簡単操作</h4>
            <p>直感的に使えるUIを提供。</p>
          </div>
        </div>

CSS

.prev.d01-04-01{background:#f7f8fb}
        .d01-04-01-wrap{display:flex;gap:14px;width:100%;max-width:520px}
        .d01-04-01-box{flex:1;background:#fff;border:1px solid #e6e9f0;border-radius:14px;padding:20px 14px;text-align:center;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
        .d01-04-01-box:hover{transform:translateY(-8px);box-shadow:0 14px 30px rgba(40,60,120,.14);border-color:#c9d3ea}
        .d01-04-01-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#5b7cfa,#8a5bfa);color:#fff;margin-bottom:12px;transition:transform .3s ease}
        .d01-04-01-box:hover .d01-04-01-ic{transform:scale(1.1) rotate(-4deg)}
        .d01-04-01-box h4{margin:0 0 6px;font-size:15px;color:#1f2740}
        .d01-04-01-box p{margin:0;font-size:12px;line-height:1.5;color:#6a7288}

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