この記事は 18 Free jQuery Plugins for Responsive Web Designing の内容を日本語訳したものです。
最近日本でもレスポンシブウェブデザインが流行ってきていますが、まだまだTipsがたまっていないと思ったため訳しました。
参考にしてみてください。
最近、ウェブデザインでもっとも需要のあるものの1つがレスポンシブレイアウトです。
レスポンシブレイアウトは、デザイナーが何か大きな成果を達成し、かつユニークですばらしいウェブサイトを作る、いくつかの素晴らしいエレメントを提供します。
これらのレスポンシブレイアウトはアイキャッチが強烈なため、簡単にユーザーの目を引くことが出来ます。
これらのレスポンシブレイアウトの更に素晴らしい特徴の1つが、PC、携帯電話、タブレットなど様々な電子機器に最適化された画面サイズに対応する力をデザイナーに与えることです。
テクノロジーの急速な発達により、誰もがレスポンシブウェブサイトを求め、レスポンシブウェブサイトのおかげでどんな電子機器からでも簡単にウェブサイトを見ることが出来るようになります。
レスポンシブレイアウトの人気は、多くの驚くべき特徴や柔軟性を提供出来ることに所以しています。
ウェブサイトが携帯電話やタブレットのような電子機器から見られるとき、全てのウェブサイトは、ナビゲーションや写真、スライダー、フォーム、カルーセルなどを全て最適化する必要があります。
レスポンシブウェブデザイン用のjQueryプラグインはいくらでも利用出来ますが、全てのプラグインが素晴らしく、効率的で、ウェブサイトの完全な最適化をすることが出来るかといえばそうではないでしょう。
そこで、たくさんあるプラグインの中から、素晴らしいプラグインを見つける手助けをするために、レスポンシブウェブデザインをする驚くべきjQueryプラグインを18個リスト化しました。
これらのプラグインは特に、ウェブサイトをよりレスポンシブにすることを助け、操作を簡単にし、ユーザー体験は素晴らしいものになるでしょう。
このリストのプラグインは手作業で選ばれており、プロのデザイナーもアマチュアのデザイナーもこれらのプラグインが有益であると感じることでしょう。なので、これらをチェックし、最も好きなものをピックアップしてください。
Isotope — An exquisite jQuery plugin for magical layouts (商用は有料)
![](https://tagamidaiki.com/wp-content/uploads/2012/09/Isotope-An-exquisite-jQuery-plugin-for-magical-layouts.jpg)
Hoverizr – Responsive jQuery Photo manipulation plugin
![](https://tagamidaiki.com/wp-content/uploads/2012/09/Hoverizr.jpg)
Response JS
![](https://tagamidaiki.com/wp-content/uploads/2012/09/Response-JS.jpg)
Responsive Image Gallery with a Thumbnail Carousel
![](https://tagamidaiki.com/wp-content/uploads/2012/09/Responsive-Image-Gallery-with-a-Thumbnail-Carousel.jpg)
jQuery Masonry — A layout plugin for jQuery
![](https://tagamidaiki.com/wp-content/uploads/2012/09/jQuery-Masonry.jpg)
scrolldeck
![](https://tagamidaiki.com/wp-content/uploads/2012/09/scrolldeck.jpg)
PhotoSwipe
![](https://tagamidaiki.com/wp-content/uploads/2012/09/PhotoSwipe.jpg)
Supersized – Fullscreen Background Slideshow
![](https://tagamidaiki.com/wp-content/uploads/2012/09/Supersized-–-Fullscreen-Background-Slideshow1.jpg)
The Heads-Up Grid
![](https://tagamidaiki.com/wp-content/uploads/2012/09/The-Heads-Up-Grid.jpg)
Elastislide – A Responsive jQuery Carousel Plugin
![](https://tagamidaiki.com/wp-content/uploads/2012/09/Elastislide-–-A-Responsive-jQuery-Carousel-Plugin.jpg)
Transform a Menu to a Dropdown for Small Screens
![](https://tagamidaiki.com/wp-content/uploads/2012/09/Transform-a-Menu-to-a-Dropdown-for-Small-Screens.jpg)
ResponsiveSlides.js
![](https://tagamidaiki.com/wp-content/uploads/2012/09/ResponsiveSlides-js.jpg)
Automatic Image Montage with jQuery
![](https://tagamidaiki.com/wp-content/uploads/2012/09/Automatic-Image-Montage-with-jQuery.jpg)
Doubletake
![](https://tagamidaiki.com/wp-content/uploads/2012/09/Doubletake.jpg)
Blueberry – A responsive jQuery image slider
![](https://tagamidaiki.com/wp-content/uploads/2012/09/Blueberry-–-A-responsive-jQuery-image-slider.jpg)
Adaptive Images in HTML
![](https://tagamidaiki.com/wp-content/uploads/2012/09/Adaptive-Images-in-HTML.jpg)
FitText — jQuery plugin for inflating web type
![](https://tagamidaiki.com/wp-content/uploads/2012/09/FitText-jQuery-plugin-for-inflating-web-type.jpg)
FitVids.JS
![](https://tagamidaiki.com/wp-content/uploads/2012/09/FitVids-js.jpg)
レスポンシブデザインを作成するにあたり、有益なjQueryプラグインがたくさんまとめてありますね。
個人的には、まだレスポンシブなサイトを作ったことはないのですが、作ることがあれば参考にしたいと思います。
何か間違いや質問等ございましたら、以下コメント欄、またはリプライ(@DAI199)までお願いします。