web制作でよく使うjQueryプラグイン4選。


jQueryプラグインのイメージ

こんにちは。デザイナーのこばやし氏に影響されてすみっコぐらしにハマってしまったアンドレです(ちなみにねこ推し)。
さて、前回はjQueryのメソッドについてお話ししましたが、今回はweb制作でよくお世話になっている、jQueryのプラグインを4つご紹介します。

スライドショー

slick公式サイトのイメージ

以前はbxSliderをよく使っていましたが、最近はslickを使っています。
変えた理由は大きくは2つです。
1つはbxSliderの場合、1ページ中に複数のスライダーを設置すると、bxSliderオブジェクトの挙動が変化し、制御しづらいことです。
もう1つは、よりレスポンシブに強いことです(responsiveオプションにbreakpoint等を含むオブジェクトを渡してやることで簡単に制御できます)。

Tips

スライド化される際にdivやbutton要素が挿入されるため、各画像をul>liでマークアップしているとul直下にdiv等ができ、バリデーションNGになります。公式のマークアップ例通り、divにしておくのが無難でしょう。
また、スライド初期化時に発火するイベント「init」時に行いたい処理は、slick()を呼ぶ前にバインドしておく必要があります(当然といえば当然ですが…)。

モーダル

Colorbox公式サイトのイメージ

無料で高機能。間違いのないプラグインです。
強いて不満を挙げるなら、デフォルトスタイルは5パターンあるのですが、どれも基本的な形が似ている上、一般的なモーダルのデザインからやや外れていたりするので、スタイリングに多少手間取ることぐらいでしょうか。

セレクトボックスのスタイリング

customSelect公式サイトのイメージ

セレクトボックスをスタイリングする必要がある際はこれを使っています。
原理的には、span要素を生成してそれに対してスタイルが当たるようになっています。

レスポンシブ対応する際のTips

反応・機能するのはselect要素なので、div等でラップして、それにselect要素およびspan要素の幅と高さが合うような指定にすると、スタイルの変化についてくるようにできます。

(2016/12/13 追記)
どうやら「render」というイベントを持っているらしく、再描画したい場合それを呼んでやる手もあるようです。

横並び要素の高さ揃え

matchHeight公式サイトのイメージ

heightLineやtileなど、横並びの要素の高さを揃えるプラグインは多数ありますが、一番使い勝手がいいのはこのmatchHeightではないでしょうか。
tileを使っていた際は、レスポンシブ対応の場合に横並びの要素数が変化するタイミングで高さを揃え直す処理を入れたりしていましたが、matchHeightはその処理を勝手にやってくれるので、非常に楽です。
ただ1点、marginやpaddingなどの取り方によって、行の計算が狂うことがあるのには要注意です(滅多にありませんが)。

まとめ

これらのプラグインの存在によって、本来かかるであろう工数を大きく削減することができています。本当にありがたい限りです。
僕自身も勉強を兼ねて、そのうちプラグインを自作してみようと思っています。