SAMPLE
「デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6（サンプルあり）」のサンプルです。
ウィンドウ幅を伸縮してPC版・モバイル版それぞれの表示を確認してみてください。
1.スクロールすると現れるトップへ戻るボタン
スクロールすると現れてクリックするとサイト上部まで移動するボタン。PC版では画面右下にあり、スクロールに応じてついてきますが、スマホ版では常にサイト下部に固定させています。
EXAMPLEクリックするとページ上部までスクロール
このサンプルページの「トップへ戻るボタン」を、ウィンドウ幅を伸縮させて確認してみてください。
2.クリックしたら要素が展開する
見出しをクリックするとコンテンツが見れます。スペースの節約のためスマホ版ではコンテンツをあらかじめ非表示にしています。
EXAMPLE見出しをクリックすると開閉するコンテンツ
見出し見出し見出し
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
見出し見出し見出し
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
見出し見出し見出し
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
3.ウィンドウ幅によって読み込むコードを切り替える
ウィンドウ幅480px以下で見た時のみ、見出しをクリックするとコンテンツが展開します（PCサイズからウィンドウ幅を徐々に狭めていった場合は、480px以下の状態で一度リロードすることが必要）。
EXAMPLE見出しをクリックすると開閉するコンテンツ
見出し見出し見出し
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
見出し見出し見出し
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
見出し見出し見出し
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
4.ウィンドウ幅によって読み込む画像を切り替える
PCサイズで見ると緑の画像(960px x 400px)が表示されますが、ウィンドウ幅480px以下に狭めると紫の画像(480px x 200px)に切り替わります。
EXAMPLEウィンドウ幅によって読み込む画像を切り替える
5.【プラグイン】ポップアップ画像をレスポンシブ対応（Colorbox）
「ColorBox」というlightbox系のイメージビューアをレスポンシブに対応します。リンク先の画像は横800pxですが、ウィンドウ幅をそれ以下にしても画像が画面からはみ出ません（Colorbox実行後にウィンドウ幅を狭めた場合は、一度Colorboxを開き直す必要あり）。
Colorboxの配布先はこちら：Colorbox - a jQuery lightbox
EXAMPLEColorboxの幅をウィンドウに合わせる
6.【プラグイン】埋め込み動画をレスポンシブ対応（FitVids.js）
ウィンドウ幅を変更しても動画がはみ出ません。YouTubeでもvimeoでもOK！
FitVids.jsの配布先はこちら：davatron5000/FitVids.js · GitHub