• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2014/08/07

私がよく使っているjQueryプラグインまとめ(スライダー、モーダルウィンドウなど)

jQueryプラグイン
こんにちは、暑いですね。脇汗すごいですね。僕が。
さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。(たまにjQueryが必須でないものもあります。)

※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。

スライダー

Owl Carousel

Owl Carousel
個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。

Owl Carousel

bxSlider

bxSlider
個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。

jQuery Content Slider | Responsive jQuery Slider | bxSlider

Glide.js

Glide
デモページがカッコイイスライダープラグイン。レスポンシブ対応。CSS3を利用したプラグインで、動きが非常に軽快です。

Glide.js | Simple, Lightweight & Fast jQuery Slider

jQuery Responsive FullWide Slider

jQuery
BlackFlag – Web Development Technicalさんが公開されているプラグイン。こちらもレスポンシブ対応。スライダー部分がフリックで動きます。

プラグインはこちら:jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 | BlackFlag

モーダルウィンドウ

Lightbox

Lightbox
個人・商用利用フリーのモーダルウィンドウ、もはや有名すぎて説明の余地なしなプラグイン「Lightbox」。モーダル時のモチャっと感(?)が好きです。

Lightbox

fancyBox

fancyBox
こちらも有名なモーダルウインドウプラグイン、fancyBox。ただし、商用利用に関しては$19かかります…。

fancyBox – Fancy jQuery Lightbox Alternative

その他

tile.js

tile.js
異なる高さの要素の高さを揃えてくれるプラグイン。軽量で使いやすいです。
ただし、画像を含む要素の高さをそろえる場合は一工夫必要ですのでご注意を。

参考:要素の高さを揃える超軽量jquery.tile.jsがオススメ!ただし画像を含む場合は要注意! | Cappee Design

プラグインはこちら:jquery.tile.js Demo page

Masonry(jQuery不要)

Masonry
高さが違う要素を「Pinterest」風に並び変えてくれるプラグイン「Masonry」。jQueryは必須ではありませんが、カスタマイズしたければ必要になります。

Masonry

exValidation

Validation
フォームのバリデーション(入力内容のチェック)をしてくれるプラグイン。お問い合わせフォームなどの作成時に使用しています。「フォーム入力したのに次の画面でやり直し!→ユーザ離脱」は避けたいですからね。

5509/exValidation · GitHub


とまぁ普段良く使うjQueryプラグインはこんなところでしょうか。
他にも「こんな便利なプラグインあるよ!」って情報がございましたら教えていただけると幸いでございます:)

こんな記事もオススメです

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座

jQueryのエフェクトに変化を加える「jQuery Easing Plugin」の使い方

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×