トグルスイッチ 確認メッセージを表示するトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
確認メッセージを表示するトグルスイッチを作る方法 確認メッセージを表示するトグルスイッチを作る方法を紹介します。トグルスイッチを切り替える前に確認ダイアログを表示し、ユーザーが「OK」を選択した場合のみ状態を変更するシンプルなサンプルです。...
ゆきのふ
トグルスイッチ 
トグルスイッチ 操作できないトグルスイッチを作る方法【HTML/CSS・サンプルコード付き】
操作できないトグルスイッチを作る方法 操作できないトグルスイッチを作る方法を紹介します。このサンプルでは、HTMLのdisabled属性を使用して、見た目は通常のトグルスイッチのまま、ユーザーがクリックやタップで状態を変更できないトグルスイ...
トグルスイッチ 最初からONになっているトグルスイッチを作る方法【HTML/CSS・サンプルコード付き】
最初からONになっているトグルスイッチを作る方法 最初からONになっているトグルスイッチを作る方法を紹介します。このサンプルでは、ページを開いた時点でトグルスイッチがONの状態で表示されるUIをHTMLとCSSだけで実装します。ユーザーが最...
トグルスイッチ トグルスイッチの状態を保存する方法【HTML/CSS/JavaScript・サンプルコード付き】
トグルスイッチの状態を保存する方法 トグルスイッチの状態を保存する方法を紹介します。このサンプルでは、スイッチをONまたはOFFへ切り替えたときに、その状態をブラウザのlocalStorageへ保存します。ページを再読み込みしても保存した状...
トグルスイッチ ダークモードに切り替えるトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
ダークモードに切り替えるトグルスイッチを作る方法 ダークモードに切り替えるトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えるだけでページ全体の配色をライトモードとダークモードへ変更できます。JavaScrip...
テキストエリア テキストエリアを有効・無効に切り替えるトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
テキストエリアを有効・無効に切り替えるトグルスイッチを作る方法 テキストエリアを有効・無効に切り替えるトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えることで、textarea要素へ入力できる状態と入力できな...
テキストボックス テキストボックスを有効・無効に切り替えるトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
テキストボックスを有効・無効に切り替えるトグルスイッチを作る方法 テキストボックスを有効・無効に切り替えるトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチをONにするとテキストボックスへ文字を入力できるようになり、OF...
トグルスイッチ 入力フォームを表示・非表示にするトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
入力フォームを表示・非表示にするトグルスイッチを作る方法 入力フォームを表示・非表示にするトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えるだけで入力フォーム全体の表示状態を変更できます。HTML・CSS・J...
トグルスイッチ ボタンを有効・無効に切り替えるトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
ボタンを有効・無効に切り替えるトグルスイッチを作る方法 ボタンを有効・無効に切り替えるトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えるだけでボタンの操作可否が即座に変更されます。HTMLとCSSでトグルスイ...
トグルスイッチ ON・OFF状態をリアルタイム表示するトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
ON・OFF状態をリアルタイム表示するトグルスイッチを作る方法 ON・OFF状態をリアルタイム表示するトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えた瞬間に現在の状態をJavaScriptで取得し、画面上の...