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

通知センター風スマホ画面

大きな時刻表示の下に通知カードを並べた静止画面です。ロック画面や通知一覧の完成イメージ確認に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-06-04-frame">
          <div class="d11-06-04-clock">9:41</div>
          <div class="d11-06-04-card">
            <span class="d11-06-04-app"></span>
            <div class="d11-06-04-txt"><p class="d11-06-04-t">お知らせ</p><p class="d11-06-04-s">新着メッセージがあります</p></div>
          </div>
          <div class="d11-06-04-card">
            <span class="d11-06-04-app b"></span>
            <div class="d11-06-04-txt"><p class="d11-06-04-t">リマインダー</p><p class="d11-06-04-s">本日の予定を確認</p></div>
          </div>
        </div>

CSS

.d11-06-04-frame{ width:180px; height:240px; border:2px solid #26292f; border-radius:20px; overflow:hidden; background:#1c2331; padding:18px 12px; display:flex; flex-direction:column; align-items:center; gap:10px; }
        .d11-06-04-clock{ color:#fff; font-size:26px; font-weight:700; margin-bottom:4px; }
        .d11-06-04-card{ width:100%; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border-radius:10px; padding:8px 10px; }
        .d11-06-04-app{ width:20px; height:20px; border-radius:6px; background:#5b8def; flex:0 0 auto; }
        .d11-06-04-app.b{ background:#f0a63b; }
        .d11-06-04-txt{ min-width:0; }
        .d11-06-04-t{ margin:0; font-size:10px; font-weight:700; color:#fff; }
        .d11-06-04-s{ margin:1px 0 0; font-size:9px; color:#c3c9d6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

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