パーツ番号 09-14-05 ・ CSSのみ

アイコン+メッセージのミニマルトースト

丸アイコンと一行メッセージだけで構成した装飾を抑えたトーストの静止見本。通知の要点だけを簡潔に伝えたい場面に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="toast09-14-05">
          <span class="ic09-14-05">
            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><path d="M12 4v16M4 12h16"></path></svg>
          </span>
          <span>新しいメッセージがあります</span>
        </div>

CSS

.d09-14-05{
          background:#f8fafc;
        }
        .d09-14-05 .toast09-14-05{
          position:absolute;
          left:50%;
          bottom:20px;
          transform:translateX(-50%);
          display:flex;
          align-items:center;
          gap:10px;
          padding:10px 16px 10px 10px;
          background:#fff;
          border:1px solid #e2e8f0;
          border-radius:999px;
          font-family:sans-serif;
          font-size:12.5px;
          color:#1e293b;
          white-space:nowrap;
          box-shadow:0 8px 18px rgba(15,23,42,.14);
        }
        .d09-14-05 .ic09-14-05{
          flex-shrink:0;
          width:24px;
          height:24px;
          border-radius:50%;
          background:#6366f1;
          display:flex;
          align-items:center;
          justify-content:center;
        }
        .d09-14-05 .ic09-14-05 svg{
          width:13px;
          height:13px;
        }

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