ゆきのふ

キーボード操作でスライドする画像スライダーを作る方法 キーボード操作でスライドする画像スライダーを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を使用して、複数の画像を左右の矢印ボタンやドットナビゲーションで切り替えられるシンプルな画像...