CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけでトグルスイッチ（オン／オフボタン）を作成する方法

CSSだけを使ってトグルスイッチ（オン／オフボタン）を作成する方法を紹介します。チェックボックスと <span> 要素を組み合わせることで、JavaScriptに頼らずに滑らかなアニメーション付きのスイッチを実装できます。

完成コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    span {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }
    span:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    input:checked + span {
        background-color: rgb(85, 21, 138);
    }
    input:focus + span {
        box-shadow: 0 0 1px rgb(255, 77, 211);
    }
    input:checked + span:before {
        transform: translateX(26px);
    }
    span.round {
        border-radius: 34px;
    }
    span.round:before {
        border-radius: 50%;
    }
</style>
</head>
<body>
<h1>Toggle Switch Example</h1>
<label class="switch">
<input type="checkbox">
<span class="round"></span>
</label>
<label class="switch">
<input type="checkbox" checked>
<span class="round"></span>
</label>
</body>
</html>

出力結果

上記のコードを実行すると、次のようなトグルスイッチが表示されます。左側がオフ状態、右側がオン（checked）状態のスイッチです。

CSSだけでトグルスイッチ（オン／オフボタン）を作成する方法

コードの仕組みを解説

1. スイッチの土台となるコンテナ

.switch クラスは position: relative と display: inline-block を指定したコンテナで、幅60px・高さ34pxのスイッチ本体のサイズを定義しています。

2. 元のチェックボックスを非表示にする

.switch input では opacity: 0 と width: 0 / height: 0 を指定して、デフォルトのチェックボックスを見えなくしています。要素自体は残っているため、クリックやキーボード操作による切り替えはそのまま機能します。

3. スライダー（見た目）のスタイル

span 要素がスイッチの外観を担当します。グレー（#ccc）の角丸トラックと、:before 疑似要素で作られた白い丸いノブで構成されています。transition: .4s によって、状態が変わるときに0.4秒かけて滑らかにアニメーションします。

4. チェック時の状態変化

input:checked + span セレクタにより、チェックされた瞬間に背景色が紫（rgb(85, 21, 138)）へ変わり、ノブが translateX(26px) で右側へ移動します。また input:focus + span によって、フォーカスを受けたときの視覚的なフィードバックも追加しており、アクセシビリティ面でも有効です。

カスタマイズのポイント

  • 色を変える： background-color の値を変更するだけで、好みの配色に調整できます。
  • サイズを変える： .switch の width / height、:before のノブサイズ、translateX() の移動量を連動して変更してください。
  • 形を変える： border-radius を削除すれば四角いスイッチに、値を小さくすれば角丸のスイッチになります。

このように、チェックボックスのON/OFF状態をCSSのセレクタで捉えてデザインを切り替えるのが、トグルスイッチ実装の基本です。ぜひ自分のサイトやアプリに合わせてカスタマイズしてみてください。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. Tkinterでオン/オフ切り替えボタン（トグルスイッチ）を作成する方法

    Tkinterは、アプリケーション開発に必要なさまざまな種類のウィジェットを追加できる機能を提供しています。代表的なウィジェットには、ボタン（Button）、エントリー（Entry）、テキストボックス（Text）、スライダー（Scale）などがあります。本記事では、クリックするたびに「オン」状態と「オフ」状態が切り替わるトグルボタンの実装方法を解説します。例として、以下の2つの状態を持つスイッチボタンを作成します。スイッチ オン（Switch On）スイッチ オフ（Switch Off）サンプルコード# tkinterをインポート from tkinter import * # ウィンドウの