【初心者向け】CSSだけでトグルボタンを作る方法　JavaScript不要でコピペOK!

JavaScriptを使わず、HTMLとCSSだけで「トグルボタン」（トグルスイッチ）を作る方法をわかりやすく解説します。

「プログラミングは難しそう…」という人も、この記事を読めば、コピペで簡単に動きるスイッチUIが作れるようになります！

---

☑ トグルボタンって何？

トグルボタンとは、ON/OFFを切り替えるスイッチのようなボタンのことです。 スマホの設定画面などでもよく見かけますよね？

「通知をONにする/オフにする」などの設定切り替えに使われます。

---

🛠 作り方の標準手順

項目	内容
HTML	チェックボックスとラベルを用意
CSS	デザインをあてて、スイッチに見せる
JavaScript	使いません！

---

□ HTML部分

<div class="toggle-area">
  <div class="item">
    <input type="checkbox" id="sample-1" name="toggle1" value="1">
    <label for="sample-1">トグルボタン1</label>
  </div>
  <div class="item">
    <input type="checkbox" id="sample-2" name="toggle2" value="2">
    <label for="sample-2">トグルボタン2</label>
  </div>
  <div class="item">
    <input type="checkbox" id="sample-3" name="toggle3" value="3">
    <label for="sample-3">トグルボタン3</label>
  </div>
</div>

▶ ポイント

• <input>でチェック状態を持たせる
• <label>でスイッチをクリック可能に
• id と for を同じにして連動

---

🎨 CSS部分

div.item {
  margin: 15px;
}

div.toggle-area input[type="checkbox"] {
  display: none;
}

label {
  position: relative;
  padding-left: 60px;
  cursor: pointer;
}

label::before,
label::after {
  content: "";
  display: block;
  position: absolute;
  /* 位置調整 */
  top: 50%;
  left: 0px;
  /* 中央に揃える */
  transform: translateY(-50%);
  /* 枠線 */
  border: 1.4px solid rgba(0,0,0,.3);
  border-radius: 50%;
  /* アニメーションの変化時間 */
  transition: .2s;
}

label::before {
  /* 背景色 */
  background-color: rgba(0, 106, 182, .2);
  /* 枠線 */
  border: 1.4px solid rgba(0,0,0,.3);
  border-radius: 12px;
  /* サイズ調整 */
  height: 20px;
  width: 40px;
  /* 位置調整 */
  top: 50%;
  left: 5px;
}

label::after {
  /* 背景色 */
  background-color: #fff;
  /* 枠線 */
  border-radius: 50%;
  /* サイズ調整 */
  height: 23px;
  width: 23px;
  /* 位置調整 */
  top: 50%;
  left: 0px;
}

/* チェックありの場合 */
input:checked + label::before {
  /* 背景色 */
  background-color: rgb(0, 106, 182);
}

input:checked + label::after {
  /* トグルを右に移動させる */
  left: 26px;
}

---

📌 実際に動かしてみたい方はこちら

See the Pen toggle-css by take it easy (@take-it-easy) on CodePen.

---

🔍 動作の仕組みを解説

CSS要素	やっていること
display: none	チェックボックスは非表示。デザインはラベル側に任せる
::before	バーの部分を表示
::after	まるいボタンを表示
input:checked + label	ONの時だけ色や位置を切り替え
transition	スムーズな動きを表現

🔸「+」セレクタって何？

CSSで input:checked + label のように「+」を使うのは、「隣接セレクタ」と呼ばれる書き方です。

これは、チェックボックス（input）のすぐ後にあるラベル（label）にだけスタイルを適用するという意味です。

つまり、次のような構造になっているから効くわけです：

<input type="checkbox" id="sample-1" name="toggle1" value="1">
<label for="sample-1">トグルボタン1</label>

この順番が逆になっていたり、間に別の要素が入っていたりすると効かないので注意しましょう！

✨ まとめ

HTMLのチェックボックスとCSSだけで、JavaScriptを一切使わずにトグルボタンを実装する方法を紹介しました。
CSSの擬似要素や隣接セレクタを使うことで、ON/OFFを切り替える動きや見た目の変化を実現できます。

難しいと思われがちなインタラクティブなUIも、構造を理解すれば意外とシンプルに作れることが分かったのではないでしょうか。
CSSの力だけでも、ここまで表現できるということを体験していただけたなら嬉しいです。

今回の内容は、Webページの設定スイッチやフォームの切り替えデザインなど、さまざまな場面で応用できます。
まずはコピペで試してみて、慣れてきたら色やサイズ、動きのカスタマイズにも挑戦してみてください。