ゆきのふ

タブ切り替え

FAQ・Q&A向けタブ切り替えの作り方【HTML/CSS/JavaScript・サンプルコード付き】

FAQ・Q&A向けタブ切り替えの作り方 FAQ・Q&A向けタブ切り替えの作り方を紹介します。このサンプルでは、施設についてよく確認される「営業時間」「利用料金」「予約方法」をタブとして表示し、クリックした項目に対応する回答へ切り替えます。複...
セレクトボックス

FAQ・Q&A向けセレクトボックスの作り方【HTML/CSS/JavaScript・サンプルコード付き】

FAQ・Q&A向けセレクトボックスの作り方 FAQ・Q&A向けセレクトボックスの作り方を紹介します。このサンプルでは、セレクトボックスに質問を選択肢として表示し、選んだ質問に対応する回答をJavaScriptで表示します。複数の質問と回答を...
カードUI

FAQ・Q&A向けカードの作り方【HTML/CSS・サンプルコード付き】

FAQ・Q&A向けカードの作り方 FAQ・Q&A向けカードの作り方を紹介します。このサンプルでは、質問と回答をひとつのカード内へまとめて表示するシンプルなFAQ・Q&AをHTMLとCSSで実装します。アコーディオンのような開閉操作を使わず、...
ラジオボタン

ページを移動しても選択状態を記憶するラジオボタンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページを移動しても選択状態を記憶するラジオボタンの作り方 ページを移動しても選択状態を記憶するラジオボタンの作り方を紹介します。このサンプルでは、複数の選択肢から1つを選べるラジオボタンをHTMLで作成し、選択された項目をJavaScrip...
モーダルウインドウ

ページを移動しても開閉状態を記憶するモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページを移動しても開閉状態を記憶するモーダルウインドウの作り方 ページを移動しても開閉状態を記憶するモーダルウインドウの作り方を紹介します。このサンプルでは、モーダルウインドウを開いた状態で別のページへ移動しても、移動先で開いた状態を復元で...
トグルスイッチ

ページを移動してもON/OFFを記憶するトグルスイッチの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページを移動してもON/OFFを記憶するトグルスイッチの作り方 ページを移動してもON/OFFを記憶するトグルスイッチの作り方を紹介します。このサンプルでは、トグルスイッチで切り替えたON・OFFの状態をJavaScriptのlocalSt...
テキストボックス

ページを移動しても内容を記憶するテキストボックスの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページを移動しても内容を記憶するテキストボックスの作り方 ページを移動しても入力内容を記憶するテキストボックスの作り方を紹介します。このサンプルでは、テキストボックスへ入力した文字列をJavaScriptで取得し、ブラウザのlocalSto...
テキストエリア

ページを移動しても内容を記憶するテキストエリアの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページを移動しても内容を記憶するテキストエリアの作り方 ページを移動しても入力内容を記憶するテキストエリアの作り方を紹介します。このサンプルでは、テキストエリアへ入力した文章をJavaScriptで取得し、ブラウザのlocalStorage...
セレクトボックス

ページを移動しても選択状態を記憶するセレクトボックスの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページを移動しても選択状態を記憶するセレクトボックスの作り方 ページを移動しても選択状態を記憶するセレクトボックスの作り方を紹介します。このサンプルでは、セレクトボックスで選択した項目をブラウザのlocalStorageへ保存します。通常は...
アコーディオン

ページを移動しても開閉状態を記憶するアコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページを移動しても開閉状態を記憶するアコーディオンの作り方 ページを移動しても開閉状態を記憶するアコーディオンの作り方を紹介します。このサンプルでは、見出しをクリックしてアコーディオンを開閉すると、その状態をブラウザのlocalStorag...