【HTMLとCSSだけでOK！】ON／OFFの切り替えができるトグルボタンを作ってみよう！

お問合せフォームや、プロジェクト管理などの便利なツールなどでよくみかける「トグルボタン」。

1つの選択肢において、ONとOFFなどスイッチの切り替えを実装したい時に便利なボタンです。

しかし、jQueryやJavaScriptを使用して制作することが多いので、初心者には少しハードルが高く感じるでしょう。

そこで今回は、HTMLとCSSだけで実装できるトグルボタンの作り方を解説します！

この記事でわかる内容は以下の通りです。

「トグルボタンってなに？」

「HTMLとCSSしか勉強していない…」

という初心者の方でも簡単な方法を解説しますので、ぜひトグルボタンの実装にチャレンジしてみてくださいね。

トグルボタンとは？

まずは、トグルボタンの名称について理解しておきましょう。

トグルボタンとは、IT分野において、ON／OFFの切り替え機能を持つボタンのことを意味しています。

トグルボタンは、切り替えできるスイッチのようなボタンなので「トグルスイッチ」とも呼ばれています。

英語で留め釘やダッフルコートなどのボタンという意味がある「toggle（トグル）」が、名称の由来になっているそうです。

ラジオボタンとチェックボックスとの違い

トグルボタンと似ているボタンとして、「ラジオボタン」と「チェックボックス」が挙げられます。

それぞれの特徴は以下の通りです。

【ラジオボタン】

【チェックボックス】

【トグルボタン】

それぞれ、項目の選択可能数や形状が異なります。

しかし、実はトグルボタンはラジオボタンやチェックボックスを基に作られているボタン。

つまり、トグルボタンは、ラジオボタンやチェックボックスの応用編という訳です。

実際にトグルボタンを作ってみよう！

ここからは、実際にトグルボタンの作り方を解説していきます。

トグルボタンは、アレンジ次第で様々なデザインにカスタマイズすることが可能ですが、今回は、横長円形の形状でON／OFFに切り替えできるシンプルなトグルボタンを作っていきましょう。

トグルボタンを作る方法は、主に以下の3つ。

今回は、1のHTMLとCSSだけでトグルボタンを作る方法を解説します。

1.HTMLとCSSだけで作る方法

<!-- HTMLコード -->
<div class="toggle_button">
  <input id="toggle" class="toggle_input" type='checkbox' />
  <label for="toggle" class="toggle_label"/>
</div>

/* CSSコード */
.toggle_input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.toggle_label {
  width: 75px;
  height: 35px;
  background: #ccc;
  position: relative;
  display: inline-block;
  border-radius: 40px;
  transition: 0.4s;
  box-sizing: border-box;
}

.toggle_label:after {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}

.toggle_input:checked + .toggle_label {
  background-color: #4BD865;
}

.toggle_input:checked + .toggle_label:after {
  left: 40px;
}

.toggle_button {
  position: relative;
  width: 75px;
  height: 35px;
  margin: auto;
}

▼デフォルトのブラウザ表示▼

▼ボタンクリック後のブラウザ表示▼

トグルボタンのデザインは様々

https://www.seleqt.net/programming/css-toggle-switches/

色だけでなく、形状やアイコンを使ってみたりと、トグルボタンのデザインは様々。

アレンジ次第で、個性的なトグルボタンを作ることも可能です。

今回は、そんな中でも主に利用されているデザインのトグルボタンを紹介します。

1.シンプルな丸

こちらは、「実際にトグルボタンを作ってみよう！」で紹介したデザインと同様なので、画像のみの紹介となります。

最も多く利用されているトグルボタンで、iPhoneの設定画面の切り替えスイッチとしても利用されています。

2.縁ありバージョンの丸

上記の「シンプルな丸」とほぼ同じ見た目ですが、ボタンに縁が付いているという違いがあり、様々なWebサイトで利用されています。

少し柔らかい印象になるので、女性向けのWebサイトや、デザインを重視したい方におすすめのトグルボタンです。

（HTMLコードは1と同様）

/* CSSコード */
.toggle_input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.toggle_label {
  width: 85px;
  height: 42px;
  background: #fff;
  border: 3px solid #eee;
  position: relative;
  display: inline-block;
  border-radius: 40px;
  transition: 0.4s;
  box-sizing: border-box;
}

.toggle_label:after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: #eee;
  transition: 0.4s;
}

.toggle_input:checked + .toggle_label {

  border: 3px solid #4BD865;
}

.toggle_input:checked + .toggle_label:after {
  left: 42px;
  background: #4BD865;
}

.toggle_button {
  position: relative;
  width: 85px;
  height: 42px;
  margin: auto;
}

3.YES／NOの2択スタイル

初めて見た人でも、YES／NOの選択をすることがわかるトグルボタンです。

あまり見かけないタイプですが、視認性を重視したいツールや、トグルボタンをスマホで見かけることが少ないご年配の方向けのWebサイトで利用しやすいでしょう。

（HTMLコードは1と同様）

/* CSSコード */
.toggle_input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.toggle_label {
  width: 100px;
  height: 85px;
  background: #ccc;
  position: relative;
  display: inline-block;
  transition: 0.4s;
  box-sizing: border-box;
}

.toggle_label:after {
  content: "NO";
  position: absolute;
  font-size: 20px;
  left: 35px;
  top: 25px;
  z-index: 2;
  color: #fff;
  transition: 0.4s;
}

.toggle_input:checked + .toggle_label {
  background-color: #4BD865;
}

.toggle_input:checked + .toggle_label:after {
  content: "YES";
}

.toggle_button {
  position: relative;
  width: 85px;
  height: 42px;
  margin: auto;
}

HTML、CSS初心者でも作れるトグルボタンを自分なりにアレンジしてみよう！

今回は、トグルボタンの基礎と初心者でも簡単に作る方法を解説しました。

以下は、この記事のまとめです。

ON／OFFやYES／NOなど、選択肢を切り替えできるトグルボタンは、様々な場面で活躍します。

トグルボタンの基本的な作り方をマスターして、自分のWebサイトに合うよにアレンジしてみてくださいね。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！