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

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」がボタンのつまみの部分になります。

どういう作りになっているのかを簡単に解説します

最後に

オンオフ切替ボタンについて説明してみました。
例ではチェックボックスを利用していますが、ラジオボタンでももちろん可能ですので、
適宜変更してみてください。

チェックボックスでこういう表現ができるからと言って、
なんでもかんでもチェックボックスを
オンオフ切替ボタンにしちゃうのはよろしくないです。
UXの観点からチェックボックスにチェックさせるほうが適切な場合は、
通常のチェックボックスのままで配置するのが望ましいです。

オンオフ切替のほうがしっくりくるケースでぜひ使ってみてください。

よろしければ「いいね」を押してください！

読み込み中...