WEBサイト制作に必須のjQueryプラグイン5選|本当によく使うものだけまとめ WEBデザイン

jQuery初心者でも5つのプラグインだけ覚えればサイトは作れる

Webサイトを構築していく上で、jQueryはよく使いますよね。

jQueryはJavascriptを一から書く必要がなく、多くのプラグインも存在するため、プログラムの知識が深くなくても簡単に実装することができます。

そこで今回は、Webデザイン初心者の方におすすめしたい「この5つだけ覚えておけばWebサイトは一通り作れる」というjQueryプラグインをご紹介します。

  • スライドショー
  • ローダー
  • 画像の拡大表示
  • 横並びの要素の高さを揃える
  • ページトップへ戻るボタン

Webサイト制作でこれらは頻繁に実装することになります。
それぞれおすすめのプラグインを、使い方と併せて詳しく説明していきます。

※jQueryを利用するには「jQueryの本体ファイル」を事前に読み込んでおく必要があります。
 以下の記事で読み込み方法を解説しています。

スポンサーリンク

bxSlider(スライドショー)

https://bxslider.com/

スライドショーのプラグインは数多く存在しますが、最も実装が簡単でカスタマイズの柔軟性も高いため、こちらを覚えておけば余程複雑な動きをするスライドショーでなければ対応できます。

レスポンシブにも対応していて、本当に便利なプラグインです。

実装方法

CDNでも配信されているので、今回はCDNを使用した方法をご紹介します。
すべてコピペで問題ありません。

1. HTMLの記述

<ul class="slider">
	<li><img src="img/01.jpg" alt=""></li>
	<li><img src="img/02.jpg" alt=""></li>
	<li><img src="img/03.jpg" alt=""></li>
</ul>

親要素に「class=”slider”」を指定します。
例では<ul>でマークアップしていますが、親子構造になっていればタグは何を使用しても動作します。

2. CSSを読み込む

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

3. jQueryを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
	$('.slider').bxSlider();
});
</script>

デモ

オプションも数多く用意されています。
公式サイトにまとめられているので、ご参照ください。

スポンサーリンク

PACE.js(ローダー)

https://github.hubspot.com/pace/docs/welcome/

ローダーとは、サイトを読み込んでいる間に表示される画面のことです。

「今読み込み中だよ」と視覚的に伝えることができるので、ユーザーの離脱率や不快感を下げることができると言われています。
Webサイトの表示速度が遅い場合には、特にローダーを実装しておきたいですね。

「PACE.js」は、とにかく実装が簡単で、1分もあれば実装できてしまいます。
さらに用意されているパターンも多く、カスタマイズ性も高い、とても万能なプラグインです。

実装方法

CDNでも配信されているので、今回はCDNを使用した方法をご紹介します。

1. jQueryを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>

2. ローダーごとのCSSを記述

公式サイトにアクセスします。

少しスクロールすると、ローダーのパターンが並んでいます。
各パターンごとに「COPY TO CLIPBOARD」というリンクがあるので、実装したいパターンをクリック。
クリップボードにCSSがコピーされるので、あとはペーストするだけです。

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

試しに「Minimal」のCSSをコピーしてみると、このように必要なCSSがすべて記述されています。
色やサイズなどもすべてCSSで作られているので、カスタマイズも高いですね。

デモ

「Loading Bar」のパターンを実装してみました。
右下の「Rerun」をクリックすることで再読み込みができます。

読み込み中はコンテンツを非表示に

実装はとても簡単ですね。
ですが、このままだとWebサイトのコンテンツとローダーが同時に表示されてしまいます。

ローダーが表示されている間は、コンテンツ全体を非表示にしておきたいので、「class=”wrap”」というクラスを付与して、「display: none;」で隠しておきます。
※クラス名は任意です。

1. HTMLの記述

<div class="wrap">
	コンテンツ
</div>

2. CSSの記述

.wrap {
	display: none;
}

3. javascriptを追加

<script>
Pace.on('done', function(){
	$('.wrap').fadeIn();
});
</script>
スポンサーリンク

Lightbox(画像の拡大表示)

https://lokeshdhakar.com/projects/lightbox2/

画像をクリックすると、大きい画像がポップアップして表示される機能です。
フォトギャラリーなどでよく使われるやつですね。

  • グルーピングができる
  • 画像ごとにキャプションを設定できる
  • 実装がとても簡単

似たようなプラグインはいくつもありますが、Lightboxにはこんなメリットがあります。
デザインのカスタマイズも簡単にできるので、画像拡大系はこれひとつ覚えておけば全般対応できます。

実装方法

CDNでも配信されているので、今回はCDNを使用した方法をご紹介します。

1. HTMLを記述

<a href="image.jpg" data-lightbox="group1" data-title="caption">
	<img src="image.jpg" alt="">
</a>
href 拡大後の画像のパス。
data-lightbox グループ名。
同じグループ名を指定した画像同士がグルーピングされる。
data-title 表示したいキャプション。
指定しない場合は連番が表示される。

2. CSSを読み込む

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.css" rel="stylesheet">

3. jQueryを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js"></script>

デモ

オプションも数多く用意されています。
公式サイトにまとめられているので、ご参照ください。

スポンサーリンク

matchHeight(横並びの要素の高さを揃える)

https://brm.io/jquery-match-height/

floatなどを使って要素を横並びにすると、高さが揃わずレイアウトが崩れてしまいます。

「matchHeight」は、読み込むだけで自動で高さを揃えてくれるjQueryプラグインです。
高さを自動で算出して揃えてくれるので、要素に「height」を指定する必要がなくなります。

実装方法

CDNでも配信されているので、今回はCDNを使用した方法をご紹介します。

1. HTMLを記述

<div class="wrap">
	<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>bbbbbbbbbbb</p>
	<p>ccccccccccccccccccccccccccccc</p>
</div>

クラス名は任意です。

2. jQueryを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
<script>
$(function() {
	$('.wrap p').matchHeight();
});
</script>

「.wrap p」の部分は、サイトに合わせて変更してください。

デモ

スポンサーリンク

ページトップへ戻るボタン

こちらはプラグインではないですが、Webサイトには必ずと言っていいほど実装してある機能です。
ページをスクロールすると右下に表われ、クリックするとページの一番上にスクロールされるボタンのことです。

実装方法

1. HTMLを記述

<a href="#" class="pagetop"></a>

2. CSS を 記述

.pagetop {
	display: none;
	position: fixed;
	right: 5%;
	bottom: 5vh;
	z-index: 100;
}
.pagetop::before {
	content: "";
	width: 20px;
	height: 20px;
	border-left: 3px solid #333;
	border-top: 3px solid #333;
	display: inline-block;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

「::before」部分はデモの装飾です。
ボタンのデザインに合わせて変更してください。

3. jQueryを記述

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	var pagetop = $('.pagetop');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			pagetop.fadeIn();
		} else {
			pagetop.fadeOut();
			}
		});
		pagetop.click(function () {
			$('body, html').animate({ scrollTop: 0 }, 500);
			return false;
	});
});
</script>

デモ

スクロールすると、右下にボタンが表示されます。
クリックするとスムーススクロールで一番上に戻るようになっています。

スポンサーリンク

まとめ

以上が、Webサイトの制作で使うことが多いjQueryプラグインです。
実装がとても簡単で、汎用性のあるものを選びました。
これさえ覚えておけばオーソドックスなWebサイトの制作には困らないと思います。