Webサイトを構築していく上で、jQueryはよく使いますよね。
jQueryはJavascriptを一から書く必要がなく、多くのプラグインも存在するため、プログラムの知識が深くなくても簡単に実装することができます。
そこで今回は、Webデザイン初心者の方におすすめしたい「この5つだけ覚えておけばWebサイトは一通り作れる」というjQueryプラグインをご紹介します。
- スライドショー
- ローダー
- 画像の拡大表示
- 横並びの要素の高さを揃える
- ページトップへ戻るボタン
Webサイト制作でこれらは頻繁に実装することになります。
それぞれおすすめのプラグインを、使い方と併せて詳しく説明していきます。
※jQueryを利用するには「jQueryの本体ファイル」を事前に読み込んでおく必要があります。
以下の記事で読み込み方法を解説しています。
bxSlider（スライドショー）
スライドショーのプラグインは数多く存在しますが、最も実装が簡単でカスタマイズの柔軟性も高いため、こちらを覚えておけば余程複雑な動きをするスライドショーでなければ対応できます。
レスポンシブにも対応していて、本当に便利なプラグインです。
実装方法
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（ローダー）
ローダーとは、サイトを読み込んでいる間に表示される画面のことです。
「今読み込み中だよ」と視覚的に伝えることができるので、ユーザーの離脱率や不快感を下げることができると言われています。
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（画像の拡大表示）
画像をクリックすると、大きい画像がポップアップして表示される機能です。
フォトギャラリーなどでよく使われるやつですね。
- グルーピングができる
- 画像ごとにキャプションを設定できる
- 実装がとても簡単
似たようなプラグインはいくつもありますが、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（横並びの要素の高さを揃える）
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サイトの制作には困らないと思います。