ゆきのふ

ドロップダウンメニュー

2階層付きドロップダウンメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】 

2階層付きドロップダウンメニューを作る方法 2階層付きドロップダウンメニューを作る方法を紹介します。このサンプルでは、HTML、CSS、JavaScriptを使い、親メニューをクリックすると子メニューが展開される階層型のドロップダウンメニュ...
ドロップダウンメニュー

複数のドロップダウンメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

複数のドロップダウンメニューを作る方法 複数のドロップダウンメニューを作る方法を紹介します。このサンプルでは、HTML、CSS、JavaScriptを使って、1つのページ内に複数のドロップダウンメニューを配置し、それぞれを独立して開閉できる...
ドロップダウンメニュー

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

ページを移動しても開閉状態を記憶するドロップダウンメニューの作り方 ページを移動しても開閉状態を記憶するドロップダウンメニューの作り方を紹介します。このサンプルでは、メニューボタンをクリックしてドロップダウンメニューを開閉し、その状態をJa...
ドロップダウンメニュー

ESCキーで閉じられるドロップダウンメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ESCキーで閉じられるドロップダウンメニューを作る方法 ESCキーで閉じられるドロップダウンメニューの作り方を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、ボタンをクリックするとメニューを表示し、ESCキーを...
ドロップダウンメニュー

外側クリックで閉じられるドロップダウンメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

外側クリックで閉じられるドロップダウンメニューを作る方法 外側クリックで閉じられるドロップダウンメニューの作り方を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、ボタンをクリックするとドロップダウンメニューを表...
ドロップダウンメニュー

HTML/CSSのみで作るドロップダウンメニューの作り方【HTML/CSS・サンプルコード付き】

HTML/CSSのみで作るドロップダウンメニューの作り方 HTML/CSSのみで作るドロップダウンメニューの作り方を紹介します。このサンプルでは、HTMLとCSSだけを使用してボタンのクリックでメニューを開閉できるシンプルなドロップダウンメ...
スライダー

縦スクロールスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

縦スクロールスライダーを作る方法 縦スクロールスライダーを作る方法を紹介します。このサンプルでは、上下方向へ画像を切り替えられるスライダーをHTML、CSS、JavaScriptだけで実装します。左右へ切り替える一般的なスライダーとは異なり...
スライダー

2枚の画像を比較できるスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

2枚の画像を比較できるスライダーを作る方法 2枚の画像を比較できるスライダーを作る方法を紹介します。このサンプルでは、1枚の画像をもう1枚の画像の上へ重ねて表示し、中央のスライダーを左右へドラッグすることで表示範囲を変更できます。同じ位置に...
スライダー

画像を拡大表示できるスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

画像を拡大表示できるスライダーを作る方法 画像を拡大表示できるスライダーを作る方法を紹介します。通常の画像スライダーに加えて、表示中の画像をクリックすると大きく確認できる拡大表示機能を付けたサンプルです。サムネイルや商品画像、作品ギャラリー...
スライダー

キーボード操作でスライドする画像スライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

キーボード操作でスライドする画像スライダーを作る方法 キーボード操作でスライドする画像スライダーをHTML・CSS・JavaScriptで作る方法を紹介します。左右の矢印キーを押すことで画像を切り替えられるため、マウス操作だけに頼らない画像...