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

スポットライト風強調表示(静止・1箇所)

周囲を暗くして1つの要素だけを浮かび上がらせる強調表示。重要な操作箇所を案内する固定レイアウトです。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-07-09-stage">
          <div class="d11-07-09-dim"></div>
          <div class="d11-07-09-target">
            <svg viewBox="0 0 20 20" width="16" height="16"><circle cx="10" cy="10" r="9" fill="#fff"/></svg>
            設定を保存
          </div>
          <div class="d11-07-09-note">変更後は必ずここを押してください</div>
        </div>

CSS

.d11-07-09-stage{ position:relative; width:100%; max-width:220px; height:140px; background:rgba(15,23,42,.82); border-radius:10px; }
        .d11-07-09-target{ position:absolute; top:56px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; background:#fff; color:#0f172a; font-size:12px; font-weight:700; padding:8px 14px; border-radius:8px; box-shadow:0 0 0 6px rgba(255,255,255,.18); }
        .d11-07-09-note{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); font-size:10.5px; color:#e2e8f0; width:88%; text-align:center; }

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