レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ
Post on:2015年3月30日
sponsors
bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。
表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。
Responsible.js
Responsible.js -GitHub
スマホユーザーにスマホ用のレイアウトにするだけでなく、デスクトップ版かスマホ版のレイアウトを切り換えられるようにします。
Breakpoints.js
Breakpoints.js -GitHub
表示サイズの複数のブレイクポイントを定義し、ブレイクポイントごとに異なるイベントを設定できます。
定義したブレイクポイントに応じて、読み込むスタイルシートファイルを変更します。
CSS, JavaScript, HTML内で利用できるブレイクポイントの定義を一箇所で行えます。
レスポンシブ用のブレイクポイントを最大最小幅、最大最小高さで複数設定し、それぞれに異なるアクションをセットできます。
IE6-8などのMedia Queriesをサポートしていないブラウザでも利用できるようにするスクリプト。
定義したブレイクポイントに応じて、最適な画像ファイルを表示します。
ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示します。
デスクトップでは通常のサイズ、タブレットでは縮小サイズ、スマフォではクロップして画像を表示させます。
画像をデスクトップではそのまま表示し、スマホやタブレットなどでは指定した箇所を中心にクロップして表示します。
画像やテキスト、テーブル、iframeのGoogleMapsやYouTubeなど、コンテンツを表示サイズに応じて自動で最適化します。
Responsive Elements
Responsive Elements -GitHub
ページ上のあらゆるエレメントをレスポンシブ対応にします。
lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するスクリプト。
Jresponsive
Jresponsive -GitHub
かっこいいアニメーションを伴ってレスポンシブ用のレイアウトで、コンテンツを整理します。
カードをレンガ状に敷き詰めて配置するグリッドレイアウトのライブラリ。切替時のアニメーションも非常にかっこいいです。
空のスペースを埋めるアルゴリズムで自動でレイアウトを組み立てるライブラリ。上記のMasonryと同作者のスクリプトです。
これもMasonryと同作者のスクリプト。ソートやフィルタリング時にかっこいいアニメーションを伴いレイアウトを構築します。
高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト。今年リリースされた2.0からjQuery依存ではなくなり、単独で動作します。
最後は、レイアウト検証用ツール。
WebページにPhotoshopのガイドのようなグリッドを表示します。レスポンシブ対応でブレイクポイントごとに設定が可能です。
sponsors
