パーツ番号 11-06-05 ・ CSSのみ

ホーム画面アイコングリッド風モック

角丸アイコンをグリッド状に並べたホーム画面風の静止表示です。アプリ紹介ページのイメージ画像代わりに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-06-05-frame">
          <div class="d11-06-05-grid">
            <div class="d11-06-05-icon a"></div>
            <div class="d11-06-05-icon b"></div>
            <div class="d11-06-05-icon c"></div>
            <div class="d11-06-05-icon d"></div>
            <div class="d11-06-05-icon e"></div>
            <div class="d11-06-05-icon f"></div>
            <div class="d11-06-05-icon g"></div>
            <div class="d11-06-05-icon h"></div>
          </div>
          <div class="d11-06-05-dock">
            <div class="d11-06-05-icon a"></div>
            <div class="d11-06-05-icon b"></div>
            <div class="d11-06-05-icon c"></div>
          </div>
        </div>

CSS

.d11-06-05-frame{ width:180px; height:240px; border:2px solid #26292f; border-radius:20px; overflow:hidden; background:#eef1f6; padding:16px 14px; display:flex; flex-direction:column; justify-content:space-between; }
        .d11-06-05-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
        .d11-06-05-icon{ width:100%; aspect-ratio:1/1; border-radius:11px; background:#b9c2d0; }
        .d11-06-05-icon.a{ background:#5b8def; } .d11-06-05-icon.b{ background:#f0a63b; } .d11-06-05-icon.c{ background:#5cc999; }
        .d11-06-05-icon.d{ background:#e06a6a; } .d11-06-05-icon.e{ background:#9b7ee8; } .d11-06-05-icon.f{ background:#4fb8c9; }
        .d11-06-05-icon.g{ background:#e08fbd; } .d11-06-05-icon.h{ background:#c9a15b; }
        .d11-06-05-dock{ display:flex; gap:12px; justify-content:center; background:rgba(255,255,255,.7); border-radius:16px; padding:8px 12px; }
        .d11-06-05-dock .d11-06-05-icon{ width:26px; }

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