テキストボックス 指定時間が経過すると入力できなくなるテキストボックスの作り方
ページを開いてから指定した時間が経過すると、自動的に入力できなくなるテキストボックスの作り方を紹介します。ページ表示と同時に時間の計測が始まり、制限時間を過ぎると入力欄が無効化され、文字の追加・変更・削除ができなくなります。 時間の計測はペ...
ゆきのふ
テキストボックス 
ツールチップ ページ表示後に指定時間でツールチップを表示する方法
ページを表示してから指定した時間が経過すると、ツールチップを自動で表示する方法を紹介します。今回は、ページ表示から3秒後に「項目名」の横にある「？」アイコンの上側へ補足説明が表示される仕組みを作成します。 通常のマウスホバーで表示するツール...
チェックボックス 指定時間後にチェックできなくなるチェックボックスを作る方法
指定した時間が経過すると、チェックボックスを操作できなくする方法を紹介します。今回は4つのチェックボックスを用意し、ページを開いてから3秒間だけチェックを付けたり外したりできるようにしています。 3秒が経過すると、すべてのチェックボックスが...
タブ切り替え タブごとに表示時間を指定して自動切り替えする方法
タブごとに異なる表示時間を設定し、一定時間が経過すると次のタブへ自動で切り替わる仕組みを紹介します。すべてのタブを同じ間隔で切り替えるのではなく、それぞれの内容に合わせて表示時間を個別に指定できるのが特徴です。 今回のサンプルでは、タブ1を...
セレクトボックス 指定時間後に選択できなくなるセレクトボックスを作る方法
セレクトボックスを表示してから指定した時間が経過すると、自動的に選択できなくなる仕組みを作ります。最初は自由に項目を選べますが、時間が経過すると選択欄が無効になり、それ以上変更できなくなります。 今回は、3秒後に無効になるセレクトボックスを...
アコーディオン 指定時間後に自動で開閉するアコーディオンの作り方
指定時間後に自動で開閉するアコーディオンは、ページを開いてから一定時間が経過すると、クリック操作をしなくても内容が自動的に表示されたり、閉じられたりする仕組みです。例えば、3秒に設定した場合は、ページを開いてから約3秒後にアコーディオンが自...
セレクトボックス 画像をセレクトボックスで切り替える方法
セレクトボックスで項目を選ぶと、その項目に対応する画像へ切り替わる仕組みを作ります。最初は「山と湖」の画像が表示されており、「海と青空」や「森と木々」を選択すると、表示される画像が切り替わります。 各選択肢には画像のURLが設定されており、...
ステップバー ステップバー内にステップバーを表示する方法
大きな手順の中に、さらに細かい手順を表示する入れ子構造のステップバーの作り方を紹介します。全体の進行状況を示すステップバーと、現在の工程に含まれる詳しい手順を示すステップバーを組み合わせることで、複数段階の作業を分かりやすく整理できます。 ...
カードUI カード内にカードを表示する方法
カードの中に、さらに別のカードを配置する入れ子構造のカードを作る方法を紹介します。外側のカードにタイトルや説明文を表示し、その内側に別のカードを配置することで、関連する情報や補足内容をひとつのカード内にまとめられます。 今回のサンプルでは、...
ラジオボタン ページを移動しても選択状態を記憶するラジオボタンの作り方
ラジオボタンで選択した項目をブラウザに保存し、別のページへ移動して戻った場合や、ページを再読み込みした場合でも、選択状態を維持する方法を紹介します。通常のラジオボタンではページを開き直すと選択状態が初期化されることがありますが、今回のコード...