chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2015/04/16

[jQuery]WEB制作でよく使うjQueryプラグイン[2015年版]

client-jquery-eye

WEB制作でよく使うjQueryプラグインをご紹介いたします。色々使ってきた中で今のものに落ちついてきた感じです。定番と呼ばれるものが多いですが、使い勝手の良さやバグなどの対処法なども紹介されている事も多く、そういった点から今回のものになっていったと思います。対応ブラウザ,ライセンス共に掲載しております。

WEB制作でよく使うjQueryプラグイン

WEB制作でのよく使用するjQueryプラグインをまとめました。

今回は使い方ではなく、単純にjQueryプラグインのご紹介です。

目次

スライダー系

WEB制作でスライダーのjQueryプラグインが一番使用率が高いです。

ここ2,3年程ですっかり入ってて当たり前のような存在になりました。上から順に、よく使うものです!

bxSlider

client-jquery-1

jQueryのスライダーでは、かなり定番ではないでしょうか。カスタマイズ等もよく見かけます。

レスポンシブ対応のjQueryスライダーです。

 

 slick

client-jquery-2

以前このブログでも紹介した、レスポンシブ対応のjQueryスライダーです。

このスライダーも使い勝手が良く、頻繁に使用しております。

使用方法は下記の記事を参考にしていただければ幸いです。

[jQuery]レスポンシブ対応!多機能カルーセルプラグイン「slick.js」

 

FlexSlider2

client-jquery-3

レスポンシブ対応のjQueryスライダー。

カルーセルやスマートフォンにも対応させる時などに良く使います。

スマートフォンのタッチ操作にも対応しております。

 

モーダルウインドウ系

モーダルウインドウも使用率は高めです。ですが、ほぼ定番のjQueryプラグインかと思います:)

Lightbox

client-jquery-4

モーダルウインドウの定番プラグインです。

画像のモーダルウインドウであればこのLightboxを使います。モーダルウインドウの中では一番使いやすいですね:)

 

fancyBox

client-jquery-5

画像以外、iframeやYouTubeの動画等をモーダルウインドウにする場合は、こちらを良く使っています。

ただし、商用で使用する場合はライセンスの購入が必要です。

シングルライセンスだと¥2,386/マルチドメインだと¥11,176となっております。

私の会社では使用率が高かった為マルチドメイン版のライセンスを購入していました。

 

Colorbox

client-jquery-6

こちらもfancyBoxと同様に、iframeやYouTubeの動画に対応しております。

対応ブラウザもIE7以上となっており、結構使用しておりました。

 

スクロールバー装飾

少なくはなって来ましたが、スクロールバーの装飾はたまにします。

jScrollPane

client-jquery-7

これもスクロールバー装飾では定番のプラグインだと思います。

マウスホイールの検知に別プラグインが必要になるという点以外は、装飾もCSSで変更がしやすく、使い勝手は非常に良いです:)

 

 その他

その他によく使うjQueryプラグインです。どれも使い勝手が良く、オススメです:)

jQuery.customSelect()

client-jquery-8

セレクトボックスを装飾できるjQueryプラグインです。

自分でクラスも付ける事ができ、複数のセレクトボックスそれぞれにスタイルを付ける事も可能です。

IE7からの対応しています。

 

Smooth Scroll Plugin

client-jquery-9

ページトップなどのアンカーリンクの移動の際にふわっとした動きになる、スムーススクロールのjQueryプラグインです。

スピードの設定や、オフセット等も決める事が出来、なおかつ簡単に設置が可能です。

jQueryで簡単に組む事も簡単ですが、ふわっとした移動をさせる場合には是非。

 

jquery.backgroundcover

client-jquery-10

IE8でもCSS3のbackground-size:coverと同じような効果にさせるjQueryプラグインです。

最近では全画面表示等も増え、結構使用率は高めです。

記事を書いておりますので以下の記事を参考にしてください。

[jQuery]IE8でCSS3のbackground-size:coverを扱う

 

 

WEB制作でよく使うjQueryプラグインを上げてみました。

色々なプラグインを試してきて、この辺りに落ち着いた感じです。使いやすいjQueryのプラグインや、オススメのプラグインがありましたら是非教えてください!

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加