CSS スタイルシートの小技等のご紹介

小ネタ:ON/OFFボタンを作る

2016年5月9日
この記事は掲載から325日経過しています。
情報が古い可能性が有りますのでご了承下さい

スマートフォンのアプリ等の設定メニューを見ていると、ON/OFFを切り替えるボタンを見かけます。アニメーションするものも有り、ラジオボタンやチェックボックスよりも格好良いし、視覚的にも良い感じです。

おそらくCSSのみで実装出来るサンプルコードが有るでしょうが、HTML5辺りは怠けて学習していないので、独自に出来ないかちょっと試してみました。

サンプル

jQuery+CSSです。

やる事は割と単純で、枠の中の●を左右にアニメーションさせるだけですね。

CSS

幅60px、高さ30pxの枠を作り、その中に少し小さい●を配置します。

 

jQuery

何のことは無い、押す度にボタンを左右に移動させるだけ。後は背景色を変更したりなど。

 

状態は●にjQuery.dataで記述しておき、押す度に更新します。

OFFの状態で押したので、左から32pxの位置にアニメーションしながら移動し、ステータスをonにする、という感じで。逆も然り。

ただ、ラジオボタンやチェックボックスを加工しているものでは無いので、ON/OFFをinput type=”hidden”で記述したフォームに入れてやる形になるかと思います。

 

その他にもっと良い方法があるでしょうが、いつものごとく自分の材料だけで挑戦してみないと気が済まない人間なので、色々探して一番簡単な方法を見つけて下さい。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

PAGE TOP