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

額縁風の枠付きタイル配置

太い縁取りで写真立てのように見せたタイルの並びです。WordPressのフォトギャラリーや受賞歴の紹介コーナーに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-07-grid">
          <div class="d01-14-07-frame"><div class="d01-14-07-inner d01-14-07-i1"></div></div>
          <div class="d01-14-07-frame"><div class="d01-14-07-inner d01-14-07-i2"></div></div>
          <div class="d01-14-07-frame"><div class="d01-14-07-inner d01-14-07-i3"></div></div>
        </div>

CSS

.prev.d01-14-07{padding:14px}
        .d01-14-07-grid{width:100%;max-width:320px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
        .d01-14-07-frame{background:#fff;border:6px solid #1e293b;border-radius:2px;padding:6px;box-shadow:0 4px 10px rgba(15,23,42,.15)}
        .d01-14-07-inner{aspect-ratio:1/1;border-radius:2px}
        .d01-14-07-i1{background:linear-gradient(135deg,#6366f1,#818cf8)}
        .d01-14-07-i2{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
        .d01-14-07-i3{background:linear-gradient(135deg,#10b981,#34d399)}

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