← 静的パーツギャラリーへ戻る

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

閉じるボタン付きアラート表示(静止)

右上に×ボタンを配置した状態を静止表示したアラート。クッキー同意など閉じられる通知の見た目の確認に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="alert09-07-07">
          <span>クッキーの使用について同意をお願いします。</span>
          <span class="close09-07-07">×</span>
        </div>

CSS

.d09-07-07 .alert09-07-07{
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:12px;
          width:100%;
          max-width:280px;
          padding:12px 12px 12px 16px;
          background:#f1f5f9;
          border:1px solid #cbd5e1;
          border-radius:8px;
          font-family:sans-serif;
          font-size:12.5px;
          line-height:1.5;
          color:#334155;
        }
        .d09-07-07 .close09-07-07{
          flex-shrink:0;
          width:22px;
          height:22px;
          border-radius:50%;
          background:#e2e8f0;
          display:flex;
          align-items:center;
          justify-content:center;
          font-size:14px;
          color:#475569;
        }

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