テンプレなので他の配布スクリプトのように親切な設計じゃないですけど・・レスポンシブWebデザイン対応のjQueryで動くカルーセルを作るための雛形っぽいのを作ってみました。大したもんじゃないんですがw最初から小さい画面での表示も考慮しているのでプラグインではよくある機能も付けていません。動作確認デフォルトの状態を画面いっぱいに広がるようにしてありますので、Webサイトに応じてサイズを調整してください。クリックまたはタップでdiv要素がスライドします。※responsivepxでレスポンシブWebデザインの対応を確認出来ます。色々なデバイスで使うための雛形なので必要最低限の機能しかありません。※動作させるだけなら不要です一応、上記の事を考えて作ったつもりです。以下よりレスポンシブWebデザインなカルーセル麻紀を作る手順です。jQuery前述していますが、雛形なので必要最低限のコードしか書いていません。説明はいらないですよね。クリックイベントで要素を横にアニメーションでずらしてるだけです。レスポンシブWebデザイン対応といっても、単純に幅を全て%で指定しているだけに過ぎません。box">Div</div></div>ボックス要素をスライドさせるようにします。CSSCSSは以下のようにしてあります。Queriesは不要です。Webは複雑な事をせずともレスポンシブに対応できるようになっているのですが、固定幅を使う事でその法則から外れる形になります。Queriesで済ませようと考えると、メンテナンス性やパフォーマンスにも影響を出します。実装段階で使わざるを得ませんので、骨組みの段階では使わないように設計します。画像を含めてみる仮に、上記のようにボックス内に画像を含めたいとします。Queriesは不要です。;height:auto;}画像はこれでOK。Sample02※さっきのツール使ってご確認下さいiPhoneだとこんな感じ。何も設定してないので幅ピッタリになっちゃってますけどw余白を作る親要素の幅が100%だと、子要素の余りの空白部分をクリックしても進んじゃいますので幅を変更して見ましょう。余白を作り、クリックイベントの範囲を狭くしました。このように単純に固定幅を使わなければこういったレスポンシブWebデザインに対応するのに大きな手間はかかりません。Queriesが必要になってくるかというと、このカルーセルの場合は高さを固定していますよね。このままだと、iPhoneで見た場合、画像の下が大きく開いてしまいます。このようにサイズをピクセルで固定されていると比率を保てずデバイスごとに差異が生じてしまいますが、かといって固定できないと表現の選択肢が減ってしまいます。Queriesの需要が出てきます。Queriesでブレークポイント設定し、デバイスに応じた高さにしてあげればレスポンシブWebデザイン対応のカルーセルが(とりあえず)完成します。Queriesで調整しても良いですね。いう点を施工前に理解しておくと無駄なコードを書く必要が無くなりますので工数削減やパフォーマンスにも貢献できますね。Queriesが必要になってきますが、親要素を考える必要は無いので案外書きやすいんじゃないかなぁ、と思います。一応作ったので・・というわけで上記一式を配布しますので適当に使うなり遊ぶなりしてください。コードも短いのでライセンスもありません。このままじゃ全然実用性は無いですけどwこの雛形から高機能なカルーセルは作れないと思いますが、そもそもタッチデバイスのようなものに高機能なライブラリは利便性以前に、パフォーマンスを妨げる事のほうが多いので既存の配布スクリプトを利用するのは微妙な気がしています。レスポンシブWebデザイン対応、という言葉をかなり見かけますが、単純にレイアウトを最適化するだけでなく、仕様面なども考慮したいところですね。Queriesを借りています。スマフォ案件にまともに取り組める方ならこういった基本的な雛形は不要かもしれませんけどTipsを書いたついでになんとなく配布してみました。雛形そのものも、自分の好みで作成したほうがいいかと思いますのであくまで参考という事で・・・いろいろ微妙な点も感じられるかと思いますけど、これはこれ、って事でご理解下さいませ。