パーツ番号 01-06-10 ・ CSSのみ

境界線グリッドセクション

各項目を細い罫線で仕切ったグリッド構成です。WordPressの制作フローや特徴一覧など、項目を等分に整理して見せたい場面に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-06-10-grid">
          <div class="d01-06-10-cell"><span>01</span>企画</div>
          <div class="d01-06-10-cell"><span>02</span>設計</div>
          <div class="d01-06-10-cell"><span>03</span>制作</div>
          <div class="d01-06-10-cell"><span>04</span>公開</div>
        </div>

CSS

.prev.d01-06-10{padding:0}
        .d01-06-10-grid{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%}
        .d01-06-10-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#444;border-right:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3}
        .d01-06-10-cell:nth-child(2n){border-right:none}
        .d01-06-10-cell:nth-child(n+3){border-bottom:none}
        .d01-06-10-cell span{font-size:16px;font-weight:700;color:#bbb}

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