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

上部バナー型通知トースト

画面上部に横幅いっぱいで現れる帯状トーストの静止見本。アプリ全体に関わる重要な注意喚起をポップアップで見せたい場面に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="banner09-14-09">
          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 4l9 16H3z"></path><line x1="12" y1="10" x2="12" y2="14"></line><circle cx="12" cy="17" r="1"></circle></svg>
          <span>アカウント情報の確認が必要です</span>
        </div>

CSS

.d09-14-09{
          background:#f8fafc;
        }
        .d09-14-09 .banner09-14-09{
          position:absolute;
          left:0;
          right:0;
          top:0;
          display:flex;
          align-items:center;
          justify-content:center;
          gap:10px;
          padding:12px 16px;
          background:#d97706;
          font-family:sans-serif;
          font-size:12.5px;
          color:#fff;
          text-align:center;
        }
        .d09-14-09 .banner09-14-09 svg{
          width:17px;
          height:17px;
          flex-shrink:0;
        }

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