レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ

bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。

デモのキャプチャ

Restive.JS
Restive.JS -GitHub

表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。

デモのキャプチャ

Responsible.js
Responsible.js -GitHub

スマホユーザーにスマホ用のレイアウトにするだけでなく、デスクトップ版かスマホ版のレイアウトを切り換えられるようにします。

デモのキャプチャ

Breakpoints.js
Breakpoints.js -GitHub

表示サイズの複数のブレイクポイントを定義し、ブレイクポイントごとに異なるイベントを設定できます。

デモのキャプチャ

Adapt.js
Adapt.js -GitHub

定義したブレイクポイントに応じて、読み込むスタイルシートファイルを変更します。

デモのキャプチャ

Unison
Unison -GitHub

CSS, JavaScript, HTML内で利用できるブレイクポイントの定義を一箇所で行えます。

デモのキャプチャ

Rubberband
Rubberband -GitHub

レスポンシブ用のブレイクポイントを最大最小幅、最大最小高さで複数設定し、それぞれに異なるアクションをセットできます。

デモのキャプチャ

Respond.js -GitHub

IE6-8などのMedia Queriesをサポートしていないブラウザでも利用できるようにするスクリプト。

デモのキャプチャ

Response
Response -GitHub

定義したブレイクポイントに応じて、最適な画像ファイルを表示します。

デモのアニメーション

Rimg
Rimg -GitHub

ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示します。

デモのキャプチャ

Focal Point

デスクトップでは通常のサイズ、タブレットでは縮小サイズ、スマフォではクロップして画像を表示させます。

デモのキャプチャ

Focuspoint -GitHub

画像をデスクトップではそのまま表示し、スマホやタブレットなどでは指定した箇所を中心にクロップして表示します。

デモのキャプチャ

Respontent
Respontent -GitHub

画像やテキスト、テーブル、iframeのGoogleMapsやYouTubeなど、コンテンツを表示サイズに応じて自動で最適化します。

デモのキャプチャ

Responsive Elements
Responsive Elements -GitHub

ページ上のあらゆるエレメントをレスポンシブ対応にします。

デモのキャプチャ

Superbox
Superbox -GitHub

lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するスクリプト。

デモのキャプチャ

Jresponsive
Jresponsive -GitHub

かっこいいアニメーションを伴ってレスポンシブ用のレイアウトで、コンテンツを整理します。

デモのキャプチャ

Masonry
Masonry -GitHub

カードをレンガ状に敷き詰めて配置するグリッドレイアウトのライブラリ。切替時のアニメーションも非常にかっこいいです。

デモのキャプチャ

Packery
Packery -GitHub

空のスペースを埋めるアルゴリズムで自動でレイアウトを組み立てるライブラリ。上記のMasonryと同作者のスクリプトです。

デモのキャプチャ

Isotope
Isotope -GitHub

これもMasonryと同作者のスクリプト。ソートやフィルタリング時にかっこいいアニメーションを伴いレイアウトを構築します。

デモのキャプチャ

Wookmark
Wookmark -GitHub

高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト。今年リリースされた2.0からjQuery依存ではなくなり、単独で動作します。

デモのキャプチャ

Heads-Up Grid

最後は、レイアウト検証用ツール。
WebページにPhotoshopのガイドのようなグリッドを表示します。レスポンシブ対応でブレイクポイントごとに設定が可能です。

sponsors

top of page

©2018 coliss