パーツ番号 09-07-04 ・ CSSのみ

背景ベタ塗り型アラートボックス

濃色背景に白文字を乗せた視認性の高い静止アラート。強めに注意喚起したいエラー表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="alert09-07-04">
          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></svg>
          <span>保存に失敗しました。時間をおいて再度お試しください。</span>
        </div>

CSS

.d09-07-04 .alert09-07-04{
          display:flex;
          align-items:center;
          gap:10px;
          width:100%;
          max-width:280px;
          padding:14px 16px;
          background:#dc2626;
          border-radius:8px;
          font-family:sans-serif;
          font-size:13px;
          line-height:1.5;
          color:#fff;
        }
        .d09-07-04 .alert09-07-04 svg{
          width:20px;
          height:20px;
          flex-shrink:0;
        }

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