パーツ番号 01-10-06 ・ CSSのみ

通知パネル付きダッシュボード

右端に固定の通知エリアを持つ管理画面構成。メイン領域とは独立して重要なお知らせを常に表示させたい画面に向く。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-10-06-wrap">
          <div class="d01-10-06-main">
            <span class="d01-10-06-title"></span>
            <div class="d01-10-06-cards"><i></i><i></i><i></i></div>
          </div>
          <div class="d01-10-06-notif">
            <span class="d01-10-06-ntitle"></span>
            <div class="d01-10-06-note"><b></b><p></p></div>
            <div class="d01-10-06-note"><b></b><p></p></div>
            <div class="d01-10-06-note"><b></b><p></p></div>
          </div>
        </div>

CSS

.prev.d01-10-06{padding:16px;align-items:stretch}
        .d01-10-06-wrap{display:flex;gap:12px;width:100%;font-family:sans-serif}
        .d01-10-06-main{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}
        .d01-10-06-title{display:block;width:110px;height:10px;border-radius:4px;background:#334155}
        .d01-10-06-cards{display:flex;gap:8px}
        .d01-10-06-cards i{flex:1;height:44px;border-radius:6px;background:#f1f5f9;display:block}
        .d01-10-06-notif{width:110px;background:#0f172a;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px}
        .d01-10-06-ntitle{display:block;width:50px;height:8px;border-radius:4px;background:#64748b}
        .d01-10-06-note{background:#1e293b;border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:5px}
        .d01-10-06-note b{display:block;width:60%;height:7px;border-radius:3px;background:#38bdf8}
        .d01-10-06-note p{display:block;width:90%;height:6px;border-radius:3px;background:#334155;margin:0}

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