HTMLとCSSでスイッチを作る

こんにちは、ゆんつです。

WEBサイトで良く見かけるものに「スイッチ」があります。

オフの時はスイッチが左側で、マウスをクリックしてオンにするとスイッチが右側に移動する。

ON/OFFの切り替えなのでチェックボックスでもよさそうですが、スイッチの方が見た目がスマートな気がします。

このスイッチですが、HTMLとCSSで割と簡単に作ることができます。

今日はHTMLとCSSを使ったスイッチの作り方について書きたいと思います。

スイッチを作るのに使用するタグ

• inputタグのcheckbox
• label

inputタグのcheckboxはスイッチの切り替えの判定に利用します。

具体的なスイッチのデザインはlabelとlabelの疑似要素で作成します。

スイッチを作る

実際にスイッチを作成します。

まずHTMLを記述します。

<div class="switch-box">
  <input type="checkbox" id="switch" class="switch-input">
  <label for="switch" class="switch-label"></label>
</div>

CSSを設定しない場合、上記のHTMLコードはただチェックボックスが表示されるだけです。

See the Pen switch01 by konpure (@yuntu) on CodePen.

このHTMLを

チェックボックスをオンにしたとき　→　スイッチが左

チェックボックスをオフにしたとき　→　スイッチが右

という見た目になるように、CSSで順を追って装飾していきたいと思います。

スイッチとボールを作る

まずはスイッチとボールをCSSで作ります（まだスイッチは動きません）。

/* スイッチの位置調整（スイッチ作りには関係ないので気にしないでください） */
.switch-box {
  margin: 50px 0 0 50px;
}

/* スイッチの枠のデザイン   */
.switch-label {
  width: 90px;
  height: 40px;
  border-radius: 40px;
  position: relative;
  display: inline-block;
  background: #ddd;
  cursor: pointer;
}

/* スイッチのボールのデザイン */
.switch-label::before {
  content: '';

  /* ボールを作る */
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fbb6f7;
  box-shadow: 0 0 4px rgba(0,0,0,.3);

  /* ボールの位置調整 */
  position: absolute;
  left: 0;
  top: 0;
}

labelタグでスイッチの枠部分を作成しています。

そして疑似要素でボールを作り、labelタグで作ったスイッチの左端に配置するようにしています。

上記CSSのデモは以下の通りです。

See the Pen switch02 by konpure (@yuntu) on CodePen.

スイッチのボールは左端にあって、その隣にチェックボックスがあります。

inputタグとlabelタグをforで紐づけているので、labelタグで作成したスイッチ部分をクリックするとチェックボックスにチェックが入ったり外れたりします。

このチェックボックスのオンオフをきっかけにして、スイッチのボールが右側に移動するようにします。

スイッチがクリックされたときのデザインを作成する

先ほどのCSSを発展させて、スイッチ上でマウスをクリックするとボールが左から右に動き、スイッチがオンになったかのような見た目になるようにします。

/* スイッチの位置調整（スイッチ作りには関係ないので気にしないでください） */
.switch-box {
  margin: 50px 0 0 50px;
}

/* スイッチの枠のデザイン   */
.switch-label {
  width: 90px;
  height: 40px;
  border-radius: 40px;
  position: relative;
  display: inline-block;
  background: #ddd;
  cursor: pointer;
}

/* スイッチのボールのデザイン */
.switch-label::before {
  content: '';

  /* ボールを作る */
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fbb6f7;
  box-shadow: 0 0 4px rgba(0,0,0,.3);

  /* ボールの位置調整 */
  position: absolute;
  left: 0;
  top: 0;
  
  /* ボールの速度調整（追加部分） */
  transition: .5s;
}
    
/* チェックボックスがチェックされたらスイッチの背景色が変わる（追加部分）*/
  .switch-input:checked + .switch-label {
    background: #16f440;
  }
    
/* チェックボックスがチェックされたらボールが右に移動しボールの色も変わる（追加部分）*/
.switch-input:checked + .switch-label::before {
  background: #00ff00;
  left: 100%;
  transform: translateX(-100%);
}

追加部分と書かれているのが先ほどのCSSとは違う部分です。

疑似要素で作ったボールにtransitionをつけて、スイッチのON・OFF時のボールの動きを少しゆっくりになるようにしています。

そしてチェックボックスに対し疑似クラスのcheckedを付与してチェックボックスのオン・オフを監視し、チェックボックスがオンになったら隣接する要素であるlabel（スイッチの本体部分）の背景色や、labelの疑似要素で作成したボールの色、位置を変更しています。

これによりスイッチをマウスでクリックすると、左から右にボールが移動し、スイッチがオンからオフになったように見えます。

See the Pen switch03 by konpure (@yuntu) on CodePen.

チェックボックスを消す

これでスイッチは完成しましたが、不要なものがあります。

そう。

チェックボックスです。

最後にこれを消しましょう。

CSSの適当な場所に以下のコードを追加します。

/* チェックボックスを消す   */
.switch-input {
  display: none;
}

これでチェックボックスが消え、スイッチが完成しました。

See the Pen switch04 by konpure (@yuntu) on CodePen.

仕組みがわかれば簡単です

完成形のCSSだけを見ると、なんとなく複雑なことをしているように見えますが、順を追ってみてみると難しいことは何もしていないことが解ります。

inputタグのチェックボックスとlabelを使えばスイッチが作れる

ということを覚えておけば、急にスイッチを作らなければならなくなったときに焦らないで済みます。

スイッチづくりの参考になれば幸いです。