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

セッション切れ・再ログイン案内ページ

アイコンと案内文にログインボタンを添えた静止デザインで、一定時間操作がなかった際のセッション切れ画面に利用できる。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-09-12-wrap">
          <svg class="d11-09-12-icon" width="48" height="48" viewBox="0 0 48 48" fill="none">
            <circle cx="24" cy="16" r="8" fill="#fde68a" stroke="#d97706" stroke-width="2"/>
            <path d="M8 42c0-9 7-15 16-15s16 6 16 15" fill="none" stroke="#d97706" stroke-width="2"/>
          </svg>
          <div class="d11-09-12-title">セッションが切れました</div>
          <p class="d11-09-12-text">再度ログインしてください</p>
          <span class="d11-09-12-btn">ログイン画面へ</span>
        </div>

CSS

.d11-09-12-wrap{ text-align:center; }
        .d11-09-12-icon{ display:block; margin:0 auto 12px; }
        .d11-09-12-title{ font-size:15px; font-weight:700; color:#374151; }
        .d11-09-12-text{ margin:8px 0 16px; font-size:12px; color:#9ca3af; }
        .d11-09-12-btn{ display:inline-block; padding:9px 22px; border-radius:999px; background:#1f2937; color:#fff; font-size:12px; font-weight:600; }

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