ゆきのふ

iframeをカルーセルで表示する方法 iframeをカルーセルで表示する方法を紹介します。HTML・CSS・JavaScriptを使い、複数のWebページや外部コンテンツをカルーセル形式で切り替え表示できるサンプルです。前へ・次へボタンや...

Googleマップを表示するカルーセルを作る方法 Googleマップを表示するカルーセルをHTML・CSS・JavaScriptで作る方法を紹介します。カルーセルを切り替えるたびに表示されるGoogleマップも切り替わるため、複数店舗の所在...

全画面カルーセルを作る方法 全画面カルーセルをHTML・CSS・JavaScriptで作る方法を紹介します。ブラウザ全体を使って大きな画像やメッセージを表示できるため、トップページのメインビジュアルやキャンペーン告知、サービス紹介などに適し...

マウスホバーで自動再生を停止できるカルーセルを作る方法 マウスホバーで自動再生を停止できるカルーセルをHTML・CSS・JavaScriptで作る方法を紹介します。通常時は一定時間ごとにスライドが自動で切り替わり、カルーセルの上にマウスポイ...

ドラッグ・スワイプ対応カルーセルを作る方法 ドラッグ・スワイプ対応カルーセルを作る方法を紹介します。PCではマウスドラッグ、スマートフォンやタブレットではスワイプ操作でスライドを切り替えられるサンプルです。左右の矢印ボタンやドットナビにも対...

縦スクロールカルーセルを作る方法 縦スクロールカルーセルを作る方法を紹介します。上下方向へスライドを切り替えられるカルーセルで、お知らせ一覧やニュース、商品紹介、コンテンツ切り替えなどに利用できます。前へ・次へボタンで上下へ移動でき、アニメ...

3D表示で中央の画像を強調するカルーセルを作る方法 3D表示で中央の画像を強調するカルーセルを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptのみを使用して、中央の画像を大きく表示し、左右の画像を奥行きのある3...