Bestはてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。色・サイズを変えるCSSでiosのスイッチ(switch)を再現するタイトルの通り、HTMLでiPhone(iOS)のスイッチ(switch)のようなデザインのトグルボタンを設置する記事になります。CSSでiosのスイッチのスタイルを再現し、切り替えはJavaScriptで処理します。webページではなかなか見ることができませんが、意外と再現率高めのスイッチになったと思います。#e4e4e4;}$("switch").click((e)=>{$(e.target).toggleClass("on");})コード独自タグを使用した設置例switchというタグ名で、iOSのスイッチのようなトグルボタンを設置します。})})Copy既存タグでの設置例div要素でも上記のスタイルを適用すれば、同様のスイッチボタンを作成できます。class="switch"></div>cssのセレクタ―をswitchタグからswitchクラスに変更します。#ff5340;}サイズは、1:0.6(横幅:縦幅)の比で指定するといい感じのデザインになります。約100万サイト登録されているにほんブログ村にて、このブログの人気ランキングを見ることができます。プライバシーポリシースターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。