設定画面
左ナビ（プロフィール/通知/課金/セキュリティ）で各セクションへ移動する設定画面。どこかを変更した瞬間に下から保存バーが現れ、保存か破棄を選ぶまで消えない。
プレビュー
入力
操作実際に入力して試せます。
デザインの要点
- 保存ボタンは常設せず、変更が生じたときだけ下から現れる。「未保存」を見落とさせない
- 各項目の脇に「何が起きるか」の一行を添える（例: 請求先の変更は次回請求から反映）
- 危険な操作（退会）は末尾に離して置き、色も赤の文字リンクに格下げして誤操作を防ぐ
- スマホでは左ナビを上の横スクロールタブに畳む。同じ DOM を CSS で並べ替えるだけにする
コード（コピーして使えます）
<div class="st-app">
<nav class="st-nav" aria-label="設定の項目">
<p class="st-nav-title">設定</p>
<a class="st-nav-item is-on" href="#st-profile" data-target="st-profile">プロフィール</a>
<a class="st-nav-item" href="#st-notify" data-target="st-notify">通知</a>
<a class="st-nav-item" href="#st-billing" data-target="st-billing">課金</a>
<a class="st-nav-item" href="#st-security" data-target="st-security">セキュリティ</a>
</nav>
<main class="st-main" id="st-main">
<section class="st-section" id="st-profile">
<h2 class="st-h2">プロフィール</h2>
<p class="st-sub">チームのメンバーに表示される情報です。</p>
<label class="st-field"><span class="st-label">表示名</span><input class="st-input" type="text" value="佐々木 悠" autocomplete="off"></label>
<label class="st-field"><span class="st-label">メールアドレス</span><input class="st-input" type="email" value="y.sasaki@minato-kobo.example" autocomplete="off"><span class="st-help">変更すると確認メールが届きます</span></label>
</section>
<section class="st-section" id="st-notify">
<h2 class="st-h2">通知</h2>
<p class="st-sub">受け取る通知を選びます。いつでも変更できます。</p>
<label class="st-row"><span class="st-row-text"><span class="st-row-title">コメントの通知</span><span class="st-help">自分宛のコメントをメールで受け取る</span></span><input class="st-switch" type="checkbox" checked></label>
<label class="st-row"><span class="st-row-text"><span class="st-row-title">週次レポート</span><span class="st-help">毎週月曜 9:00 に先週のまとめを送る</span></span><input class="st-switch" type="checkbox"></label>
<label class="st-row"><span class="st-row-text"><span class="st-row-title">製品のお知らせ</span><span class="st-help">新機能・メンテナンス情報</span></span><input class="st-switch" type="checkbox" checked></label>
</section>
<section class="st-section" id="st-billing">
<h2 class="st-h2">課金</h2>
<p class="st-sub">プランの変更は次回の請求日から反映されます。</p>
<div class="st-plans" role="radiogroup" aria-label="プラン">
<label class="st-plan"><input type="radio" name="st-plan" value="free"><span class="st-plan-body"><span class="st-plan-name">Free</span><span class="st-plan-price">¥0</span><span class="st-help">3 プロジェクトまで</span></span></label>
<label class="st-plan"><input type="radio" name="st-plan" value="pro" checked><span class="st-plan-body"><span class="st-plan-name">Pro</span><span class="st-plan-price">¥1,980<small>/月</small></span><span class="st-help">無制限・優先サポート</span></span></label>
</div>
</section>
<section class="st-section" id="st-security">
<h2 class="st-h2">セキュリティ</h2>
<p class="st-sub">サインインまわりの設定です。</p>
<label class="st-row"><span class="st-row-text"><span class="st-row-title">2 段階認証</span><span class="st-help">認証アプリのコードを追加で求める</span></span><input class="st-switch" type="checkbox"></label>
<div class="st-danger">
<span class="st-help">アカウントを削除するとデータは 30 日後に完全に消去されます。</span>
<button type="button" class="st-danger-btn">アカウントを削除…</button>
</div>
</section>
</main>
<div class="st-savebar" id="st-savebar" role="region" aria-label="未保存の変更" aria-hidden="true">
<span class="st-savebar-text">未保存の変更があります</span>
<div class="st-savebar-actions">
<button type="button" class="st-btn-ghost" id="st-discard">破棄</button>
<button type="button" class="st-btn-primary" id="st-save">変更を保存</button>
</div>
</div>
<div class="st-toast" id="st-toast" role="status" aria-live="polite"></div>
</div>