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

モザイクタイル配色パターン

同一サイズの正方形を色違いで敷き詰めたモザイク見本です。WordPressのギャラリーページの背景装飾やブランドカラー一覧の提示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-02-mosaic">
          <span class="d01-14-02-t"></span><span class="d01-14-02-t"></span><span class="d01-14-02-t"></span><span class="d01-14-02-t"></span><span class="d01-14-02-t"></span>
          <span class="d01-14-02-t"></span><span class="d01-14-02-t"></span><span class="d01-14-02-t"></span><span class="d01-14-02-t"></span><span class="d01-14-02-t"></span>
          <span class="d01-14-02-t"></span><span class="d01-14-02-t"></span><span class="d01-14-02-t"></span><span class="d01-14-02-t"></span><span class="d01-14-02-t"></span>
        </div>

CSS

.prev.d01-14-02{padding:14px}
        .d01-14-02-mosaic{width:100%;max-width:280px;height:190px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:5px}
        .d01-14-02-t{border-radius:6px}
        .d01-14-02-t:nth-child(6n+1){background:#6366f1}
        .d01-14-02-t:nth-child(6n+2){background:#f59e0b}
        .d01-14-02-t:nth-child(6n+3){background:#10b981}
        .d01-14-02-t:nth-child(6n+4){background:#ec4899}
        .d01-14-02-t:nth-child(6n+5){background:#0ea5e9}
        .d01-14-02-t:nth-child(6n){background:#f97316}

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