ゆきのふ

アコーディオン

ESCキーで全て閉じられるアコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ESCキーで全て閉じられるアコーディオンの作り方 ESCキーで全て閉じられるアコーディオンを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、複数のアコーディオンを開いた状態から、キーボードのESCキー...
ドロワーメニュー

閉じるボタンで閉じられるドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

閉じるボタンで閉じられるドロワーメニューの作り方 閉じるボタンで閉じられるドロワーメニューの作り方を紹介します。このサンプルでは、「メニューを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、メニュー内に配置した「閉じる」...
モーダルウインドウ

閉じるボタンで閉じられるモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

閉じるボタンで閉じられるモーダルウインドウの作り方 閉じるボタンで閉じられるモーダルウインドウの作り方を紹介します。このサンプルでは、「モーダルを開く」ボタンをクリックすると画面全体へ半透明のオーバーレイが表示され、その中央にモーダルウイン...
ポップアップ

閉じるボタンで閉じられるポップアップの作り方【HTML/CSS/JavaScript・サンプルコード付き】

閉じるボタンで閉じられるポップアップを作る方法 閉じるボタンで閉じられるポップアップをHTML・CSS・JavaScriptで作成する方法を紹介します。ページを開いたタイミングでポップアップを表示し、「閉じる」ボタンをクリックすると非表示に...
ポップアップ

スワイプ・ドラッグで閉じられるポップアップの作り方【HTML/CSS/JavaScript・サンプルコード付き】

スワイプ・ドラッグで閉じられるポップアップの作り方 スワイプ・ドラッグで閉じられるポップアップの作り方を紹介します。このサンプルでは、ページを開いたときに表示されるポップアップを、左右へスワイプまたはドラッグすることで閉じられる動作を実装し...
ポップオーバー

閉じるボタンで閉じられるポップオーバーの作り方【HTML/CSS/JavaScript・サンプルコード付き】

閉じるボタンで閉じられるポップオーバーの作り方 閉じるボタンで閉じられるポップオーバーを作る方法を紹介します。このサンプルでは、「ポップオーバーを表示」ボタンをクリックするとボタンの下に補足情報が表示され、ポップオーバー内に配置した「閉じる...
ドロップダウンメニュー

閉じるボタンで閉じられるドロップダウンメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

閉じるボタンで閉じられるドロップダウンメニューの作り方 閉じるボタンで閉じられるドロップダウンメニューを作る方法を紹介します。このサンプルでは、ボタンをクリックするとドロップダウンメニューが表示され、メニュー内に配置した閉じるボタンを押すこ...
ドロップダウンメニュー

指定時間後に自動で閉じるドロップダウンメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

指定時間後に自動で閉じるドロップダウンメニューの作り方 指定時間後に自動で閉じるドロップダウンメニューを作る方法を紹介します。このサンプルでは、ボタンをクリックするとドロップダウンメニューが表示され、一定時間が経過すると自動的に閉じる動作を...
ポップオーバー

指定時間後に自動で閉じるポップオーバーの作り方【HTML/CSS/JavaScript・サンプルコード付き】

指定時間後に自動で閉じるポップオーバーの作り方 指定時間後に自動で閉じるポップオーバーを作る方法を紹介します。このサンプルでは、ボタンをクリックするとポップオーバーが表示され、一定時間が経過すると自動的に閉じる動作を実装します。ユーザーが閉...
ポップオーバー

スワイプ・ドラッグで閉じられるポップオーバーの作り方【HTML/CSS/JavaScript・サンプルコード付き】

スワイプ・ドラッグで閉じられるポップオーバーの作り方 スワイプ・ドラッグで閉じられるポップオーバーを作る方法を紹介します。このサンプルでは、ボタンをクリックするとポップオーバーが表示され、スマートフォンではスワイプ、パソコンではマウスドラッ...