パーツ番号 01-14-12 ・ CSSのみ

点線アウトラインのワイヤーフレーム風タイル配置

塗りつぶさず点線の輪郭だけで区画を示すワイヤーフレーム風のタイルです。WordPressの制作中ページのプレースホルダーや、控えめな装飾を求めるミニマルサイトの区画分けに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-12-grid">
          <div class="d01-14-12-tile"><span>01</span></div>
          <div class="d01-14-12-tile"><span>02</span></div>
          <div class="d01-14-12-tile"><span>03</span></div>
          <div class="d01-14-12-tile"><span>04</span></div>
          <div class="d01-14-12-tile"><span>05</span></div>
          <div class="d01-14-12-tile"><span>06</span></div>
        </div>

CSS

.prev.d01-14-12{padding:14px}
        .d01-14-12-grid{width:100%;max-width:300px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
        .d01-14-12-tile{aspect-ratio:1/1;border:1.5px dashed #94a3b8;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#fff}
        .d01-14-12-tile span{font-size:12px;font-weight:700;color:#94a3b8}

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