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

コンパクト1行アラート

アイコンと短い一文だけで構成した最小限の静止アラート。自動保存の状態表示など省スペース用途に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="alert09-07-09">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="9"></circle><path d="M8 12.5l2.6 2.6L16 9.5"></path></svg>
          <span>保存済み</span>
        </div>

CSS

.d09-07-09 .alert09-07-09{
          display:inline-flex;
          align-items:center;
          gap:6px;
          padding:6px 12px;
          background:#dcfce7;
          border-radius:999px;
          font-family:sans-serif;
          font-size:12px;
          color:#166534;
        }
        .d09-07-09 .alert09-07-09 svg{
          width:14px;
          height:14px;
          flex-shrink:0;
        }

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