トグルスイッチ 最初からONになっているトグルスイッチを作る方法【HTML/CSS・サンプルコード付き】
最初からONになっているトグルスイッチを作る方法 最初からONになっているトグルスイッチを作る方法を紹介します。このサンプルでは、ページを開いた時点でトグルスイッチがONの状態で表示されるUIをHTMLとCSSだけで実装します。ユーザーが最...
ゆきのふ
トグルスイッチ 
トグルスイッチ ダークモードに切り替えるトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
ダークモードに切り替えるトグルスイッチを作る方法 ダークモードに切り替えるトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えるだけでページ全体の配色をライトモードとダークモードへ変更できます。JavaScrip...
テキストエリア テキストエリアを有効・無効に切り替えるトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
テキストエリアを有効・無効に切り替えるトグルスイッチを作る方法 テキストエリアを有効・無効に切り替えるトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えることで、textarea要素へ入力できる状態と入力できな...
テキストフィールド テキストフィールドを有効・無効に切り替えるトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
テキストフィールドを有効・無効に切り替えるトグルスイッチを作る方法 テキストフィールドを有効・無効に切り替えるトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチをONにするとテキストフィールドへ文字を入力できるようになり...
トグルスイッチ 入力フォームを表示・非表示にするトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
入力フォームを表示・非表示にするトグルスイッチを作る方法 入力フォームを表示・非表示にするトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えるだけで入力フォーム全体の表示状態を変更できます。HTML・CSS・J...
トグルスイッチ ボタンを有効・無効に切り替えるトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
ボタンを有効・無効に切り替えるトグルスイッチを作る方法 ボタンを有効・無効に切り替えるトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えるだけでボタンの操作可否が即座に変更されます。HTMLとCSSでトグルスイ...
トグルスイッチ ON・OFF状態をリアルタイム表示するトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
ON・OFF状態をリアルタイム表示するトグルスイッチを作る方法 ON・OFF状態をリアルタイム表示するトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えた瞬間に現在の状態をJavaScriptで取得し、画面上の...
トグルスイッチ ON・OFF状態を取得するトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
ON・OFF状態を取得するトグルスイッチを作る方法 ON・OFF状態を取得するトグルスイッチを作る方法を紹介します。このサンプルでは、HTMLとCSSで作成したトグルスイッチの現在の状態を、JavaScriptで取得する方法を実装しています...
テキストエリア ひらがなをカタカナへ自動変換するテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
ひらがなをカタカナへ自動変換するテキストエリアを作る方法 ひらがなで入力した文字を、カタカナへ自動変換するテキストエリアを作る方法を紹介します。このサンプルでは、テキストエリアへひらがなを入力すると、入力した文字がリアルタイムでカタカナへ変...
テキストエリア 全角数字を半角に・半角数字を全角に自動変換するテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
全角数字を半角に・半角数字を全角に自動変換するテキストエリアを作る方法 全角数字を半角に、半角数字を全角に自動変換するテキストエリアを作る方法を紹介します。このサンプルでは、JavaScriptでテキストエリアへの入力を検知し、上の入力欄で...