パーツ番号 04-07-10 ・ CSSのみ

スイッチ+ラベル横並びセット

複数のトグルスイッチとラベルが並ぶリスト形式の見本。設定画面の項目一覧デザインに応用できる。

staticcss

プレビュー

ソースコード

HTML

<ul class="d04-07-10-list">
          <li class="d04-07-10-row">
            <span class="d04-07-10-label">通知</span>
            <span class="d04-07-10-switch on"><span class="d04-07-10-knob"></span></span>
          </li>
          <li class="d04-07-10-row">
            <span class="d04-07-10-label">自動更新</span>
            <span class="d04-07-10-switch"><span class="d04-07-10-knob"></span></span>
          </li>
          <li class="d04-07-10-row">
            <span class="d04-07-10-label">公開設定</span>
            <span class="d04-07-10-switch on"><span class="d04-07-10-knob"></span></span>
          </li>
        </ul>

CSS

.d04-07-10-list{list-style:none;margin:0;padding:0;width:100%;max-width:210px}
        .d04-07-10-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9}
        .d04-07-10-row:last-child{border-bottom:none}
        .d04-07-10-label{font-size:13px;color:#334155}
        .d04-07-10-switch{width:44px;height:24px;border-radius:12px;background:#cbd5e1;position:relative;display:inline-block;flex:none}
        .d04-07-10-switch.on{background:#22c55e}
        .d04-07-10-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff}
        .d04-07-10-switch.on .d04-07-10-knob{left:22px}

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