Elementor スマホ横スワイプカードCSS（PCグリッド・マウスドラッグJS付き）

💡Elementorでスマホ横スワイプカードを実装したい方へ

スマホ・タブレットでは横スワイプ、PCではグリッド表示になるカードレイアウトを実装できるテンプレートです。

料金表・人気メニュー・事例・スタッフ紹介などを、見やすく整理しながらスマホで直感的に閲覧できるUIを実現します。

横スワイプUIをゼロから実装すると、カード幅・余白・レスポンシブ対応・スクロール制御など細かい調整が積み重なります。
本テンプレートはそれらをすべて解決済みの状態で提供するため、クラスを付けてCSSを貼るだけで安定したUIをそのまま導入できます。

プラグイン不要・CSSのみで動作するため軽量で、PCでのマウスドラッグ対応が必要な場合は同梱のJSを追加するだけで実現できます（任意）。

✅このテンプレートでできること

• スマホ・タブレットで横スワイプカードを実装
• PCでは自動でグリッド表示に切り替え
• カードUIを使ったレイアウトをそのまま再現
• スクロールスナップ（scroll-snap）で滑らかな操作感
• CSSのみで実装可能（プラグイン不要）
• JSを使えばPCでもマウスドラッグ対応（任意）

📱スマホ横スワイプカードとは？

スマホでよく使われる「横にスワイプして閲覧できるカードUI」です。

• 料金プラン
• 人気メニュー
• 施工事例・実績
• スタッフ紹介

など、LPや企業サイトで頻繁に使われるUIです。

🔍よくある実装との違い

横スワイプUIは、スライダープラグインで実装されることが多いですが、

• 設定が複雑
• 動作が重くなる
• 細かい調整がしづらい

といった問題があります。

本テンプレートでは、

• CSS（scroll-snap）で軽量に実装
• Elementorのコンテナ構造にそのまま対応
• カード幅・余白を変数で簡単調整

👉 「作れる」ではなく「作る手間をなくす」ためのテンプレートです

🙋‍♀️こんな方におすすめ

• ElementorでLP・企業サイトを制作している方
• スマホで見やすいUIを作りたい方
• スライダープラグインを使いたくない方
• カードUIを簡単に実装したい方
• 毎回横スクロールUIの調整をしている方

🛠導入は２ステップ＋任意１ステップ（貼るだけ）

1. クラスを設定
   親コンテナに「mhd-swipe」、子コンテナに「mhd-swipe-item」を付与します。
2. CSSを貼り付け
   外観 → カスタマイズ → 追加CSS（またはElementorのカスタムCSS）に貼り付けます。
3. 【任意】JSを貼り付け
   PCでマウスドラッグによる横移動に対応したい場合のみ追加してください。不要であればスキップできます。

導入手順はスクリーンショット付きの導入ガイドで詳しく解説しています。

⚙対応環境・前提条件

• WordPress
• Elementor（無料版可）
• Container（Flexboxコンテナ）使用

🖥️動作確認環境

• Windows：Chrome / Edge
• Mac未確認
• iOS：iPhone（Safari）実機確認済み
• Android：Chrome 実機確認済み

📖導入難易度・必要スキル

【導入難易度】★☆☆☆☆（かんたん）

• WordPress / Elementorの基本操作ができる方
• CSSをコピー＆貼り付けできる方

💡もっと本格的な操作UIが欲しい方へ

「矢印ボタンやプログレスバーを付けて、ちゃんとしたカルーセルUIにしたい」という方には、別商品の「スマホ横スワイプカード（矢印・プログレスバー付き）」がおすすめです。
左右の矢印ボタンとプログレスバーで、ユーザーが横スクロールに気づかず離脱する問題を解決できます。
→ スマホ横スワイプカード（矢印・プログレスバー付き）はこちら