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

情報カラー(青)のトースト通知

青色を基調にした案内アイコン付きの情報系トーストの静止見本。メンテナンス予告や仕様変更のお知らせなど、注意喚起までは不要な情報提供に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="toast09-14-11">
          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><circle cx="12" cy="12" r="9"></circle><line x1="12" y1="10.5" x2="12" y2="16"></line><circle cx="12" cy="7.5" r="1" fill="#fff"></circle></svg>
          <span class="msg09-14-11">
            <strong>お知らせ</strong>
            <em>メンテナンスは明日3時に予定されています</em>
          </span>
        </div>

CSS

.d09-14-11{
          background:#f8fafc;
        }
        .d09-14-11 .toast09-14-11{
          position:absolute;
          left:50%;
          bottom:20px;
          transform:translateX(-50%);
          display:flex;
          align-items:flex-start;
          gap:10px;
          padding:12px 16px;
          width:230px;
          background:#2563eb;
          border-radius:9px;
          font-family:sans-serif;
          color:#fff;
          box-shadow:0 10px 22px rgba(37,99,235,.35);
        }
        .d09-14-11 .toast09-14-11 svg{
          width:18px;
          height:18px;
          flex-shrink:0;
          margin-top:1px;
        }
        .d09-14-11 .msg09-14-11{
          display:flex;
          flex-direction:column;
          gap:2px;
        }
        .d09-14-11 .msg09-14-11 strong{
          font-size:12.5px;
        }
        .d09-14-11 .msg09-14-11 em{
          font-style:normal;
          font-size:11px;
          color:#dbeafe;
          line-height:1.5;
        }

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