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

パーツ番号 01-10-12 ・ CSSのみ

設定画面フォーム中心レイアウト

入力欄とトグルスイッチが縦に並ぶ設定画面の構成。会員マイページのアカウント設定や通知設定画面に用いる。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-10-12-wrap">
          <span class="d01-10-12-title"></span>
          <div class="d01-10-12-field"><span></span><i class="d01-10-12-input"></i></div>
          <div class="d01-10-12-field"><span></span><i class="d01-10-12-input"></i></div>
          <div class="d01-10-12-field"><span></span><i class="d01-10-12-switch on"><b></b></i></div>
          <div class="d01-10-12-field"><span></span><i class="d01-10-12-switch"><b></b></i></div>
          <span class="d01-10-12-save">保存する</span>
        </div>

CSS

.prev.d01-10-12{padding:16px;align-items:stretch}
        .d01-10-12-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px;width:100%;font-family:sans-serif}
        .d01-10-12-title{display:block;width:100px;height:11px;border-radius:4px;background:#334155;margin-bottom:2px}
        .d01-10-12-field{display:flex;align-items:center;justify-content:space-between;gap:10px}
        .d01-10-12-field span{width:70px;height:8px;border-radius:4px;background:#94a3b8;display:block}
        .d01-10-12-input{flex:1;height:22px;border-radius:5px;background:#f1f5f9;border:1px solid #e2e8f0;display:block}
        .d01-10-12-switch{width:34px;height:18px;border-radius:9px;background:#e2e8f0;display:block;position:relative}
        .d01-10-12-switch b{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;display:block}
        .d01-10-12-switch.on{background:#38bdf8}
        .d01-10-12-switch.on b{left:18px}
        .d01-10-12-save{align-self:flex-end;background:#0f172a;color:#fff;font-size:11px;font-weight:700;padding:7px 16px;border-radius:6px}

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