テキストフィールド クリアボタン付きテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
クリアボタン付きテキストボックスを作る方法 入力した文字をまとめて削除できる、クリアボタン付きテキストボックスを作る方法を紹介します。このサンプルでは、テキストボックスの右端にSVGの×アイコンを配置し、クリックするとJavaScriptで...
ゆきのふ
テキストフィールド 
テキストフィールド 入力文字数をカウントするテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
入力文字数をカウントするテキストフィールドを作る方法 お問い合わせ内容を入力する複数行のテキストフィールドへ、現在の入力文字数をリアルタイムで表示する方法を紹介します。文字を入力するたびにJavaScriptが入力内容の長さを取得し、入力欄...
テキストフィールド 入力内容を確認ボタンでチェックしてエラーを表示するテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
入力内容を確認ボタンでチェックしてエラーを表示するテキストフィールドを作る方法 入力内容を確認ボタンでチェックしてエラーを表示するテキストフィールドを作る方法を紹介します。このサンプルでは、お名前とメールアドレスの2つのテキストフィールドを...
テキストフィールド 下線だけのテキストフィールドを作る方法【HTML/CSS・サンプルコード付き】
下線だけのテキストフィールドを作る方法 下線だけのテキストフィールドを作る方法を紹介します。このサンプルでは、HTMLのinput要素で1行入力用のテキストフィールドを作成し、上下左右を囲む枠線を表示せず、入力欄の下側だけに線を表示します。...
セレクトボックス 「選択してください」を初期表示するセレクトボックスの作り方【HTML/CSS・サンプルコード付き】
「選択してください」を初期表示するセレクトボックスの作り方 「選択してください」を初期表示するセレクトボックスの作り方を紹介します。このサンプルでは、セレクトボックスを開く前の初期状態に案内文を表示し、ユーザーが項目を選択すると、選択した内...
セレクトボックス ラベル付きセレクトボックスを横並びに配置する方法【HTML/CSS・サンプルコード付き】
ラベル付きセレクトボックスを横並びに配置する方法 ラベル付きのセレクトボックスを横並びで配置する方法を紹介します。都道府県や配送方法、支払い方法など、関連する入力項目を1行にまとめて表示したい場面で便利なレイアウトです。 HTMLとCSSだ...
セレクトボックス アイコン付きセレクトボックスを作る方法【HTML/CSS・サンプルコード付き】
アイコン付きセレクトボックスを作る方法 アイコン付きセレクトボックスを作る方法を紹介します。このサンプルでは、セレクトボックスの左側にアイコンを表示し、どの内容を選択する項目なのかを見た目で分かりやすくします。都道府県、配送方法、支払い方法...
セレクトボックス セレクトボックスの矢印アイコンを変更する方法【HTML/CSS・サンプルコード付き】
セレクトボックスの矢印アイコンを変更する方法 セレクトボックスの矢印アイコンを変更する方法を紹介します。このサンプルでは、ブラウザ標準の矢印を非表示にし、CSSで作成した独自の矢印をセレクトボックスの右側へ表示します。細いV字、太いV字、三...
ドロップダウンメニュー クリックすると枠線を強調するドロップダウンメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
クリックすると枠線を強調するドロップダウンメニューの作り方 ドロップダウンメニューを開いたときに、現在操作している項目を分かりやすく強調したい場合があります。枠線や背景色を変化させることで、どのドロップダウンを操作しているのか視覚的に伝えや...
セレクトボックス スクロール付きセレクトボックスを作る方法【HTML/CSS・サンプルコード付き】
スクロール付きセレクトボックスを作る方法 スクロール付きセレクトボックスを作る方法を紹介します。通常のプルダウン型セレクトボックスとは異なり、このサンプルでは複数の選択肢を一覧表示し、表示範囲を超えた項目をスクロールして確認できるリスト形式...