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

パーツ番号 01-05-03 ・ CSSのみ

3カラム均等グリッド

アイコン・見出し・説明文を3列に整列させた構図です。WordPressのサービス紹介や特徴一覧のセクションに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-05-03-cols">
          <div class="d01-05-03-col">
            <span class="d01-05-03-ic"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#6366f1" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg></span>
            <h4>迅速な対応</h4>
            <p>お問い合わせに素早く返信</p>
          </div>
          <div class="d01-05-03-col">
            <span class="d01-05-03-ic"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#10b981" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8 12h8"/></svg></span>
            <h4>安心の品質</h4>
            <p>厳選した素材のみ使用</p>
          </div>
          <div class="d01-05-03-col">
            <span class="d01-05-03-ic"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#f59e0b" stroke-width="2"><path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L3 10l6-1z"/></svg></span>
            <h4>選ばれる理由</h4>
            <p>累計利用者数No.1</p>
          </div>
        </div>

CSS

.prev.d01-05-03{padding:16px}
        .d01-05-03-cols{width:100%;max-width:340px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
        .d01-05-03-col{text-align:center;display:flex;flex-direction:column;align-items:center}
        .d01-05-03-ic{width:40px;height:40px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
        .d01-05-03-col h4{font-size:12px;font-weight:700;color:#0f172a;margin:0 0 4px}
        .d01-05-03-col p{font-size:10.5px;color:#64748b;margin:0;line-height:1.5}

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