カードUI カード内にカードを表示する方法【HTML/CSS・サンプルコード付き】
カード内にカードを表示する方法 カード内にカードを表示する方法を紹介します。このサンプルでは、外側のカードの中へ別のカードを配置し、関連する情報や補足内容をひとつのカード内で分けて表示します。商品情報の補足、プロフィールの詳細、サービス内容...
ゆきのふ
カードUI 
モーダルウインドウ FAQ・Q&A向けモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】
FAQ・Q&A向けモーダルウインドウの作り方 FAQ・Q&A向けモーダルウインドウの作り方を紹介します。このサンプルでは、よくある質問を一覧で表示し、確認したい質問をクリックすると、その質問と回答を画面中央のモーダルウインドウへ表示します。...
ドロップダウンメニュー FAQ・Q&A向けドロップダウンメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】
FAQ・Q&A向けドロップダウンメニューの作り方 FAQ・Q&A向けドロップダウンメニューの作り方を紹介します。このサンプルでは、「質問を選ぶ」ボタンをクリックすると質問一覧がドロップダウン形式で表示され、確認したい質問を選択すると、その質...
トグルスイッチ FAQ・Q&A向けトグルスイッチの作り方【HTML/CSS/JavaScript・サンプルコード付き】
FAQ・Q&A向けトグルスイッチの作り方 FAQ・Q&A向けトグルスイッチの作り方を紹介します。このサンプルでは、質問ごとにトグルスイッチを配置し、スイッチをONにすると対応する回答を表示、OFFにすると回答を非表示にします。複数の質問をそ...
ツールチップ FAQ・Q&A向けツールチップの作り方【HTML/CSS/JavaScript・サンプルコード付き】
FAQ・Q&A向けツールチップの作り方 FAQ・Q&A向けツールチップの作り方を紹介します。このサンプルでは、よくある質問を一覧で表示し、各質問の「？」にマウスを重ねると対応する回答をツールチップで表示します。クリックまたはタップでも回答を...
チェックボックス FAQ・Q&A向けチェックボックスの作り方【HTML/CSS/JavaScript・サンプルコード付き】
FAQ・Q&A向けチェックボックスの作り方 FAQ・Q&A向けチェックボックスの作り方を紹介します。このサンプルでは、確認したい質問をチェックボックスから複数選択すると、選択した項目に対応する回答を表示します。1つだけでなく複数の質問を同時...
タブ切り替え 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...