ドロップダウンメニュー ドロップダウンメニュー内にドロップダウンメニューを表示する方法【HTML/CSS/JavaScript・サンプルコード付き】
ドロップダウンメニュー内にドロップダウンメニューを表示する方法 ドロップダウンメニュー内に、さらに別のドロップダウンメニューを表示する方法を紹介します。このサンプルでは、親となるメニューをクリックして項目を表示し、その中にある項目をクリック...
ゆきのふ
ドロップダウンメニュー 
テーブル テーブル内にテーブルを表示する方法【HTML/CSS・サンプルコード付き】
テーブル内にテーブルを表示する方法 テーブル内にテーブルを表示する方法を紹介します。このサンプルでは、HTMLのtable要素で作成した外側のテーブルのセル内へ、さらに別のtable要素を配置して入れ子構造のテーブルを作成します。ひとつの項...
ステップバー ステップバー内にステップバーを表示する方法【HTML/CSS・サンプルコード付き】
ステップバー内にステップバーを表示する方法 ステップバー内にステップバーを表示する方法を紹介します。このサンプルでは、全体の進行状況を表すステップバーと、現在のステップに含まれる詳しい手順を表すステップバーを組み合わせて表示します。大きな手...
カードUI カード内にカードを表示する方法【HTML/CSS・サンプルコード付き】
カード内にカードを表示する方法 カード内にカードを表示する方法を紹介します。このサンプルでは、外側のカードの中へ別のカードを配置し、関連する情報や補足内容をひとつのカード内で分けて表示します。商品情報の補足、プロフィールの詳細、サービス内容...
ラジオボタン FAQ・Q&A向けラジオボタンの作り方【HTML/CSS/JavaScript・サンプルコード付き】
FAQ・Q&A向けラジオボタンの作り方 FAQ・Q&A向けラジオボタンの作り方を紹介します。このサンプルでは、複数の質問から確認したい項目を1つだけ選択すると、対応する回答を下部へ表示します。ラジオボタンは同じグループ内から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向けドロップダウンメニューの作り方を紹介します。このサンプルでは、「質問を選ぶ」ボタンをクリックすると質問一覧がドロップダウン形式で表示され、確認したい質問を選択すると、その質...
トグルスイッチ 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つだけでなく複数の質問を同時...