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

公開日: 2021.11.10
更新日: 2024.01.06
on/offの切り替えができるトグルボタンを作ってみよう

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

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

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

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

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

  • トグルボタン基礎
  • HTMLとCSSでトグルボタンを作る方法
  • jQueryでトグルボタンを作る方法
  • JavaScriptでトグルボタンを作る方法

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

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

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

トグルボタンとは?

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

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

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

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

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

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

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

【ラジオボタン】

  • 複数の選択肢から一つを選択する
  • 選択肢は主に小さな丸いボタン
  • タップやクリックなどの操作でボタン内部に丸い色がつく

【チェックボックス】

  • 複数の選択肢から複数の項目を選択できる
  • 選択肢は主に空白の小さな正方形
  • タップやクリックなどの操作でボタン内部にチェックマークや印が出現する

【トグルボタン】

  • 一つの選択肢に対して切り替えができるボタン(主にONとOFF)
  • 選択肢は横長の円形で、内部に別の丸がある
  • タップやクリックなどの操作でボタン内部の丸がスライドし、ONやOFFに切り替わる

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

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

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

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

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

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

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

  1. HTMLとCSSだけで作る方法
  2. jQueryで作る方法
  3. JavaScriptで作る方法

今回は、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. シンプルな丸
  2. 縁ありバージョンの丸
  3. YES/NOの2択スタイル

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の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初心者でも作れるトグルボタンを自分なりにアレンジしてみよう!

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

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

  • トグルボタンは、ラジオボタンとチェックボックスの応用
  • HTMLとCSSだけでも簡単にトグルボタンが作れる!
  • アレンジ次第で個性的なトグルボタンを作ることも可能

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

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


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

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

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

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

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

\プログラミングを学んで/
人生を変えた3名

インタビュー記事一覧 >

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5