ポップオーバー ×ボタンで閉じられるポップオーバーの作り方【HTML/CSS/JavaScript・サンプルコード付き】
×ボタンで閉じられるポップオーバーの作り方 ×ボタンで閉じられるポップオーバーの作り方を紹介します。このサンプルでは、ボタンをクリックするとポップオーバーが表示され、ポップオーバー内に配置した×ボタンをクリックすると閉じる仕組みをHTML・...
ゆきのふ
ポップオーバー 
ドロップダウンメニュー スワイプ・ドラッグで閉じられるドロップダウンメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】
スワイプ・ドラッグで閉じられるドロップダウンメニューの作り方 スワイプ・ドラッグで閉じられるドロップダウンメニューの作り方を紹介します。このサンプルでは、「メニュー」ボタンをクリックするとドロップダウンメニューが表示され、画面上をスワイプま...
ドロップダウンメニュー ×ボタンで閉じられるドロップダウンメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】
×ボタンで閉じられるドロップダウンメニューの作り方 ×ボタンで閉じられるドロップダウンメニューの作り方を紹介します。このサンプルでは、「メニュー」ボタンをクリックすると項目一覧が表示され、メニュー内の右上にある「×」ボタンをクリックすると閉...
ドロワーメニュー 指定時間後に自動で閉じるドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】
指定時間後に自動で閉じるドロワーメニューの作り方 指定時間後に自動で閉じるドロワーメニューの作り方を紹介します。このサンプルでは、画面左側から表示されるドロワーメニューを作成し、メニューを開いたあと一定時間が経過すると自動で閉じる動作を実装...
モーダルウインドウ スワイプ・ドラッグで閉じられるモーダルウインドウを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スワイプ・ドラッグで閉じられるモーダルウインドウを作る方法 スワイプ・ドラッグで閉じられるモーダルウインドウを作る方法を紹介します。このサンプルでは、モーダルウインドウを上下左右のいずれかへスワイプまたはドラッグし、一定の距離まで移動させる...
ポップオーバー ESCキーで閉じられるポップオーバーの作り方【HTML/CSS/JavaScript・サンプルコード付き】
ESCキーで閉じられるポップオーバーの作り方 ESCキーで閉じられるポップオーバーの作り方を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、ボタンをクリックするとポップオーバーを表示し、キーボードのESCキーを...
ステップバー 基本のステップバーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
基本のステップバーを作る方法 基本のステップバーをHTML・CSS・JavaScriptで作る方法を紹介します。このサンプルでは、「次へ」「戻る」ボタンを押すだけで現在のステップが切り替わり、進行状況を分かりやすく表示できます。JavaSc...
フッター 基本のフッターを作る方法【HTML/CSS・サンプルコード付き】
基本のフッターを作る方法 基本のフッターを作る方法を紹介します。このサンプルでは、HTMLとCSSを使用して、Webページの最下部に表示するシンプルなフッターを作成します。フッター内にはサイト名、ナビゲーションリンク、コピーライトを配置し、...
トースト 基本のトーストを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
基本のトーストを作る方法 基本のトーストを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、画面右下へ一時的に表示されるトーストを作成します。ボタンをクリックするとトーストが表示され、一定時間が経過す...
ローディング 基本の読み込み中アニメーションを作る方法【HTML/CSS・サンプルコード付き】
基本の読み込み中アニメーションを作る方法 基本の読み込み中アニメーションを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、円形のアニメーションが回転するシンプルな読み込み中表示を作成します。JavaScriptを使用...