← 静的パーツギャラリーへ戻る

パーツ番号 11-11-08 ・ CSSのみ

更新完了トーストメッセージの見た目

リストの上に重ねて表示する黒背景の完了トーストを静止画で示した見本です。WordPressのAjax更新後に一瞬表示する完了通知のデザイン確認に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-11-08-frame">
          <div class="d11-11-08-list">
            <div class="d11-11-08-row"><span class="d11-11-08-av"></span><div class="d11-11-08-lines"><span></span><span class="short"></span></div></div>
            <div class="d11-11-08-row"><span class="d11-11-08-av"></span><div class="d11-11-08-lines"><span></span><span class="short"></span></div></div>
            <div class="d11-11-08-row"><span class="d11-11-08-av"></span><div class="d11-11-08-lines"><span></span><span class="short"></span></div></div>
          </div>
          <div class="d11-11-08-toast"><span class="d11-11-08-ic"><i></i></span><span class="d11-11-08-ttxt">更新が完了しました</span></div>
        </div>

CSS

.d11-11-08-frame{ width:270px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; position:relative; }
        .d11-11-08-list{ padding:14px; display:flex; flex-direction:column; gap:12px; }
        .d11-11-08-row{ display:flex; align-items:center; gap:10px; }
        .d11-11-08-av{ width:28px; height:28px; border-radius:50%; background:#dbe4f5; flex:0 0 auto; }
        .d11-11-08-lines{ flex:1; display:flex; flex-direction:column; gap:5px; }
        .d11-11-08-lines span{ height:8px; border-radius:4px; background:#e6e9ee; display:block; }
        .d11-11-08-lines span.short{ width:55%; }
        .d11-11-08-toast{ position:absolute; top:12px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:7px; background:rgba(26,29,36,.92); color:#fff; font-size:10.5px; font-weight:700; padding:8px 14px; border-radius:99px; white-space:nowrap; box-shadow:0 6px 14px rgba(0,0,0,.2); }
        .d11-11-08-ic{ width:14px; height:14px; border-radius:50%; background:#22c55e; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
        .d11-11-08-ic i{ width:6px; height:3.5px; border-left:1.6px solid #fff; border-bottom:1.6px solid #fff; transform:rotate(-45deg) translate(1px,-0.5px); display:block; }

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