Webサイト製作のヒント～JavaScriptを使わないでON/OFF切替ボタンを作る

2022.01.17

広告宣伝業務

HOME
BAオンライン
広告宣伝 , 業務
Webサイト製作のヒント～JavaScriptを使わないでON/OFF切替ボタンを作る

1. webサイト製作に役立つ情報をご紹介します

webサイト製作に役立つ情報をご紹介します

これまで製作してきたwebサイトやアプリで採用したり、
これは使えるかも？便利かも？というような使える情報をこちらでお伝えしてみようと思います。
BAOnlineをご覧頂いている皆様の中にも仕事や趣味でwebサイトを作っていたり、
これから作ってみようかな？とお考えの方もいらっしゃると思いますので、
製作作業のお役に立てたら幸いです。

実践！オンとオフを切り替えるボタンの作り方

今回はwebサイトやスマホなどの設定画面で見る機会も多くなったオンとオフを切り替えるボタンの作り方をご紹介します。こんなの感じのです。

ボタンを押すと、つまみの部分がアニメーションして右左移動したり、
オンで色が付きます。
このような表現が今ではhtmlの記述とcss(スタイルシート)の設定のみでできてしまいます。
大昔ならボタンが押されたタイミングでjavascriptであれこれ処理させたりなんかしないとダメだったのかもしれないけど、便利な世の中になったものです。

ボタンを作る記述はこんな感じです

まずは、HTMLの記述です。

HTML
<label class="toggle-switch">
<input type="checkbox">
<span></span>
</label>

全体をlabel要素で囲んで、その中の先頭にinput要素のcheckboxを置いているのがポイントです。
続いてcss(スタイルシート)の設定です。

CSS
.toggle-switch input{
    display: none;
}

.toggle-switch > span {
    display: block;
    position: relative;
    width: 1.8em;
    height: 1em;
    border-radius: 1em;
    background: #e8e8ea;
    cursor: pointer;
    font-size: 1.8rem;
}

.toggle-switch > span::before {
    position: absolute;
    top: 0.05em;
    left: 0.05em;
    width: calc(1em - 0.1em);
    height: calc(1em - 0.1em);
    border-radius: calc(1em - 0.1em);
    background: #fff;
    transition: 0.2s all ease-out;
    content: "";
    z-index: 2;
}

.toggle-switch input:checked + span {
    background: #34c758;
}

.toggle-switch input:checked + span::before {
    left: calc(100% - 1em + 0.05em);
}

「.toggle-switch > span」部分にあるfont-sizeの値を増減する事で、
ボタンの大きさを調整できます。
「span」がボタン全体のベースになる部分、「span::before」がボタンのつまみの部分になります。