ゆきのふ

トグルスイッチ

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を使用して入力した数字をリアルタイムで変換します。全角数字を半角数字へ変換する...
テキストエリア

アルファベットの大文字・小文字を自動変換するテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

アルファベットの大文字・小文字を自動変換するテキストエリアを作る方法 アルファベットの大文字・小文字を自動変換するテキストエリアを作る方法を紹介します。このサンプルでは、上側のテキストエリアへ入力したアルファベットを大文字へ、下側のテキスト...
テキストエリア

自動で高さが広がるテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

自動で高さが広がるテキストエリアを作る方法 自動で高さが広がるテキストエリアを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、入力した文章量に応じてテキストエリアの高さが自動で広がるフォームを作成しま...
テキストエリア

複数行入力できるテキストエリアを作る方法【HTML/CSS・サンプルコード付き】

複数行入力できるテキストエリアを作る方法 複数行入力できるテキストエリアを作る方法を紹介します。このサンプルでは、HTMLのtextarea要素を使用し、改行を含む文章を入力できるフォームを作成します。一行しか入力できないテキストボックスと...
テキストエリア

入力文字数を制限するテキストエリアを作る方法【HTML/CSS・サンプルコード付き】

入力文字数を制限するテキストエリアを作る方法 入力文字数を制限するテキストエリアを作る方法を紹介します。このサンプルでは、HTMLのtextarea要素へmaxlength属性を指定し、改行を含む文章を最大300文字まで入力できるフォームを...
テキストエリア

入力内容に応じて高さが自動で広がるテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

入力内容に応じて高さが自動で広がるテキストエリアを作る方法 入力内容に応じて高さが自動で広がるテキストエリアを作る方法を紹介します。通常のテキストエリアは文章が長くなるとスクロールバーが表示されますが、このサンプルでは入力内容に合わせて高さ...
テキストエリア

入力文字数を制限するテキストエリアを作る方法【HTML/CSS・サンプルコード付き】

入力文字数を制限するテキストエリアを作る方法 入力文字数を制限するテキストエリアを作る方法を紹介します。このサンプルではHTMLのmaxlength属性を利用して、指定した文字数までしか入力できないテキストエリアを実装しています。JavaS...