HTML/CSSが上達してくると、ユーザーの目を引くおしゃれな動きや、スライドショーなどの便利機能も実装したくなりますよね♪
これらを簡単に実現できるのが、jQuery（JavaScript）プラグインです。
ただ、「色々あるけど、このプラグインでいいのかな…？」と不安に感じるかもしれません。
そこでこの記事では、企業がWEB制作でリアルに使っているjQuery（JavaScript）プラグインを、機能別にご紹介します。
目次
jQuery（JavaScript）プラグインとは？
プラグインとは「拡張機能」のことです。
「拡張機能」と言われてもピンと来ないと思うので、「必要な機能を実装するためのファイルのカタマリ」というイメージを持ってもらえればOKですね。
「スマホでYouTubeを見た〜い！」と思った時、スマホにYouTubeアプリをインストールするようなイメージです。
具体的には、スライドショーやドロワーメニュー、ポップアップ機能など、必要なものを選んで実装できますよ♪
スライドショーなどは、毎回0からコードを書くと時間がかかりすぎて仕事になりません。
そのため、プラグインで基本的な機能を実装し、用意されたオプションやCSSで自分好みに調整するのが合理的と言えます。
WEB制作は時間との勝負になることも多いので、プラグインで実装できるものはガシガシ使っていきましょう！
WEB制作の現場で使われる便利プラグイン9選
スライドショーをサクッと実装できる軽量プラグイン「Swiper」
<div class="container py-5">
<div class="row">
<div class="col-lg-6 product-left mb-5 mb-lg-0">
<div class="swiper-container product-slider mb-3">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1-qzpXz-6SaqM3IPlQl_d9YXaPaBPw1xi" alt="..." class="img-fluid">
</div>
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1GyPJxF36hlp2JS7SeYrnW0Bmuc9KJyBq" alt="..." class="img-fluid">
</div>
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1MIbogRkUdngQXnaXT8Mufup-7CScTNRj" alt="..." class="img-fluid">
</div>
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1a_w8OcDV-IA5UMz7usKtO_lXf0YSee3u" alt="..." class="img-fluid">
</div>
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1gLp3gryMbGYpgAfAtnDGccME1lCzEyUU" alt="..." class="img-fluid">
</div>
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1iOOVa8mOrESI0o5o7au7nAOlPFAwbnLM" alt="..." class="img-fluid">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-container product-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1-qzpXz-6SaqM3IPlQl_d9YXaPaBPw1xi" alt="..." class="img-fluid">
</div>
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1GyPJxF36hlp2JS7SeYrnW0Bmuc9KJyBq" alt="..." class="img-fluid">
</div>
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1MIbogRkUdngQXnaXT8Mufup-7CScTNRj" alt="..." class="img-fluid">
</div>
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1a_w8OcDV-IA5UMz7usKtO_lXf0YSee3u" alt="..." class="img-fluid">
</div>
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1gLp3gryMbGYpgAfAtnDGccME1lCzEyUU" alt="..." class="img-fluid">
</div>
<div class="swiper-slide">
<img src="https://drive.google.com/uc?id=1iOOVa8mOrESI0o5o7au7nAOlPFAwbnLM" alt="..." class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>.product-thumbs .swiper-slide img {
border:2px solid transparent;
object-fit: cover;
cursor: pointer;
}
.product-thumbs .swiper-slide-active img {
border-color: #bc4f38;
}
.product-slider .swiper-button-next:after,
.product-slider .swiper-button-prev:after {
font-size: 20px;
color: #000;
font-weight: bold;
}/* product left start */
if($(".product-left").length){
var productSlider = new Swiper('.product-slider', {
spaceBetween: 0,
centeredSlides: false,
loop:true,
direction: 'horizontal',
loopedSlides: 5,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
resizeObserver:true,
});
var productThumbs = new Swiper('.product-thumbs', {
spaceBetween: 0,
centeredSlides: true,
loop: true,
slideToClickedSlide: true,
direction: 'horizontal',
slidesPerView: 5,
loopedSlides: 5,
});
productSlider.controller.control = productThumbs;
productThumbs.controller.control = productSlider;
}
/* product left end */出力結果
【このプラグインの特徴】
- 実装が簡単かつオプションが豊富jQuery不要。
- jQuery不要。超軽量で動作も軽い
- デザインをカスタマイズしやすいシンプルスライダー
- レスポンシブにも対応（スマホイベントもありで、動作も滑らか）
高機能なスライドショーをサクッと導入できるプラグインで、当社を含め多くの企業が導入しています。
人気の理由は、高機能かつjQueryが不要なため超軽量だから。
近年はSEOでWEBサイトの表示速度が重視されているので、非常に秀逸なプラグインと言えるでしょう。
また、さまざまなタイプのスライドショーに対応しているので、ほとんどの要望に答えられます。
使い方も簡単で、利用者が多いため情報が豊富ですし、定期的にアップデートもされるので、スライドショーを実装するならSwiperでOK。
豊富なアニメーションや、サムネイル付きスライダー、スライドを1/3だけはみ出して表示するなど、カスタマイズも豊富です。
もちろん、ブレイクポイントが用意されているので、さまざまなデバイスにも自動対応してくれます。
実装手順と使い方イメージ
1. ファイルを設置・読み込む（CDN、npm、ダウンロード）
CSSファイルとJSファイルを読み込みます。（jQueryは不要）
2. HTMLで型を記載
<div class=”swiper-slide”>…</div>の中にスライドさせたい要素を記載します。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">slide1</div>
<div class="swiper-slide">slide2</div>
<div class="swiper-slide">slide3</div>
</div>
</div>※最新版（7.0以降）はclass名が「swiper-container」から「swiper」になったので注意しましょう。
3. スクリプトを記載
const swiper = new Swiper(‘.swiper’, {…}の中にオプションを記載していくイメージです。
const swiper = new Swiper('.swiper', {
pagination: { el: '.swiper-pagination', },
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },
breakpoints: {
// 768px以上の場合 768: { slidesPerView: 2, },
// 980px以上の場合 980: { slidesPerView: 3, },
// 1200px以上の場合 1200: { slidesPerView: 4, }
}
});⇒オプション一覧はこちら
※ 英語が苦手な方はGoogle翻訳で見ましょう
スライドショーのプラグインはたくさんありますが、汎用性や機能性、軽さを考慮するとSwiper一択でOKです！
npmにも対応しているため、Swiperをマスターしておけばいろんな案件で使えます◎
横からのドロワー（ハンバーガー）メニューを実装できる「hiraku.js」
<nav class="navbar navbar-fixed-top navbar-inverse js-fixed-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed js-offcanvas-btn" >
<span class="sr-only">Toggle navigation</span>
<span class="hiraku-open-btn-line"></span>
</button>
<a class="navbar-brand" href="#">hiraku.js</a>
</div>
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<div class="jumbotron">
<h1>hiraku.js</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
</div><!--/row-->
</div><!--/.col-xs-12.col-sm-9-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group js-offcanvas">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--/.sidebar-offcanvas-->
</div><!--/row-->
<hr>
<footer>
<p>© appleple.</p>
</footer>
</div><!--/.container-->/*
* Style tweaks
* --------------------------------------------------
*/
body {
padding-top: 70px;
}
footer {
padding: 30px 0;
}
.list-group {
margin-bottom: 0;
}
.list-group-item:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (min-width: 768px) {
.js-hiraku-offcanvas {
display: block;
position: static;
background: none;
}
.js-hiraku-offcanvas .js-hiraku-offcanvas-sidebar {
position: static;
margin-right: 0;
width:auto;
}
}$(".js-offcanvas").hiraku({
btn: ".js-offcanvas-btn",
fixedHeader: ".js-fixed-header",
direction: "right",
breakpoint: 767
});出力結果
【このプラグインの特徴】
- 不具合が少ない
- 左右から表示させられる
- スクロール時にメインコンテンツは固定される
- 簡単にハンバーガーメニュー（3本線）を「×」に変化させられる
hiraku.jsは、横からヌルッと表示されるハンバーガーメニューを実装するjQueryプラグインです。
わりとマイナーなプラグインですが、iOS特有のバグにまで配慮されているなど、エラーが非常に少ないのが特徴。
「細かいバグにまで配慮しているドロワープラグインはないのか…」と、困っている制作者に特におすすめしたいですね。
上方向からのドロワーを実装するのは大変など、カスタマイズ性は高くないのが少し残念なポイントです。
ただ、デザインはCSSで簡単にカスタマイズできるので、jQuery初心者も安心◎
実装手順と使い方イメージ
ファイルを設置・読み込む（CDN、npm、ダウンロード）
jQuery、CSSファイル、JSファイルをHTMLで読み込みましょう。
※他サイトでは、古いバージョンが紹介されていることもあるので注意しましょう。
HTMLを記述
headerの中に下記を記述
<header class="header">
<button type="button" class="js-offcanvas-btn">
<span class="hiraku-open-btn-line"></span>
</button>
</header></header>の下に、ドロワーの中身を記述
<aside class="js-offcanvas">
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">振り向く</a></li>
<li><a href="#">追いかける</a></li>
<li><a href="#">戸惑う</a></li>
</ul></aside>CSSでハンバーガメニューの線などを調整
ハンバーガーメニューの3本線などは、CSSでデザイン変更可能です。
.hiraku-open-btn-line{
background-color: #cc0000;
}
.hiraku-open-btn-line:before,
.hiraku-open-btn-line:after{
background-color: #cc0000;
}スクリプトを記述
クリックするボタン要素、中身が出てくる方向、中身の横幅などを調整できます。
<script>
new Hiraku('.js-offcanvas', {
btn: ".js-offcanvas-btn",
direction: 'left',
width: 70%
});
</script>ドロワーメニューを開いたときにheaderを固定したり、別で閉じるボタンを設定したりもできます！
上から表示させたい場合は別のプラグインを使うか、CSSとjQueryを直書きすることが多いです。
フワッと表示させるアニメーションプラグイン「AOS.js」
<div class="item" data-aos="example-anim1">1</div>
<div class="item" data-aos="example-anim2">2</div>
<div class="item" data-aos="example-anim3">3</div>
<div class="item" data-aos="example-anim1">4</div>
<div class="item" data-aos="example-anim2">5</div>
<div class="item" data-aos="example-anim3">6</div>
<div class="item" data-aos="example-anim1">7</div>
<div class="item" data-aos="example-anim2">8</div>
<div class="item" data-aos="example-anim3">9</div>* {
box-sizing: border-box;
}
.item {
width: 200px;
height: 200px;
margin: 50px auto;
padding-top: 75px;
background: #ccc;
text-align: center;
color: #FFF;
font-size: 3em;
}
/* Animations */
[data-aos="example-anim1"] {
transform: skewX(45deg);
opacity: 0;
transition-property: transform, opacity;
&.aos-animate {
transform: skewX(0);
opacity: 1;
}
}
[data-aos="example-anim2"] {
background: red;
transition-property: background;
&.aos-animate {
background: green;
}
}
[data-aos="example-anim3"] {
transform: rotate(360deg);
opacity: 0;
transition-property: transform, opacity;
&.aos-animate {
transform: rotate(0);
opacity: 1;
}
}AOS.init({
duration: 1200
});出力結果
デモページはこちら
【このプラグインの特徴】
- スクロールに連動して、要素をフワッと表示できる
- カスタマイズが豊富
- 軽量プラグイン
- jQuery不要
WEBページがスクロールされたらフワッと表示するアニメーションが流行っていますよね！
それを簡単に実現できるプラグインが「AOS.js」。
動きが軽快だったり、カスタマイズの豊富さはもちろんですが、軽量なところがお気に入りのポイントです。
というのも、フワッと表示のプラグイン（inview.jsやwow.jsなど）はたくさんありますが、大体が「animate.css」を読み込まないと使えません。
AOS.jsはJSファイル1つで動くので、WEBサイトのスリム化に貢献してくれるのでおすすめです◎
使い方も簡単なので、アニメーションをつけたい時に選択肢の一つにしてくださいね♪
アニメーションをつけすぎると、コンテンツの読みにくいWEBページになります、動きはなるべく小さく、少なくするのがポイントです！
UXに関わってくる部分です。
実装手順と使い方イメージ
ファイルを設置・読み込む（CDN、npm、ダウンロード）
HTMLでプラグインを読み込みます。
読み込むファイルは「aos.css」と「aos.js」のみです。
HTMLを記述する
<div data-aos="fade-right">
SAMPLE
</div>アニメーションをつけたい要素を「data-aos=””」という属性をつけて囲います。
「data-aos=””」属性の値にオプションを追記することで、タイミングやトリガー、回転、動きなどを指定可能です。
スクリプトを記述する
<script>
AOS.init()
</script>最低限、これだけで動きます。
もっと細かく条件を指定したい場合、オプションを追記していきましょう！
モーダル（ポップアップ）を簡単に実装できる「Micromodal.js」
<body>
<div class="demo-wrapper">
<a class="modal-login" href="#" data-micromodal-trigger="modal-login">Login</a>
</div>
<div class="modal micromodal-slide" id="modal-login" aria-hidden="false">
<div class="modal__overlay" tabindex="-1" data-custom-close="">
<div class="modal__container w-90 w-40-ns" role="dialog" aria-modal="true" aria-labelledby="modal-login-title">
<header class="modal__header">
<h3 class="modal__title" id="modal-2-title">
<i class="fas fa-user pr2"></i> Login
</h3>
<button class="modal__close" aria-label="Close modal" data-custom-close=""></button>
</header>
<form class="black-80" action="/">
<div class="modal__content" id="modal-2-content">
<div class="measure">
<label for="email" class="f6 b db mb2 js-email">Email</label>
<input id="email" class="input-reset ba b--black-20 pa2 mb2 db w-100 js-emailInput" type="text" autocomplete="off">
<label for="password" class="f6 b db mb2 mt3">Password <span class="normal black-60">(required)</span>
</label>
<input id="password" class="input-reset ba b--black-20 pa2 mb2 db w-100" type="password" required="" autocomplete="off">
<small id="name-desc" class="f6 black-60 db mb2">Must be at least 6 characters long.</small>
</div>
</div>
<footer class="modal__footer">
<input type="submit" class="modal__btn modal__btn-primary" value="Login">
<a class="f6 ml2 dark-blue no-underline underline-hover" href="#" aria-label="Reset password" data-custom-close>Reset Password</a>
</footer>
</form>
</div>
</div>
</div>
</body>/*
* > normalize.css
* > https://unpkg.com/tachyons/css/tachyons.min.css (https://tachyons.io/)
*
*/
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
/**************************\
Basic Modal Styles
\**************************/
body {
font-family: "Lato", -apple-system, BlinkMacSystemFont, avenir next, avenir,
helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}
.demo-wrapper {
width: 100px;
padding: 20px;
margin: 0 auto;
}
.modal {
font-family: "Lato", -apple-system, BlinkMacSystemFont, avenir next, avenir,
helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}
.modal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
.modal__container {
background-color: #fff;
padding: 30px;
max-width: 500px;
max-height: 100vh;
border-radius: 4px;
overflow-y: auto;
box-sizing: border-box;
}
.modal__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal__title {
margin-top: 0;
margin-bottom: 0;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.25;
color: #00449e;
box-sizing: border-box;
}
.modal__close {
background: transparent;
border: 0;
}
.modal__header .modal__close:before {
content: "\2715";
}
.modal__content {
margin-top: 2rem;
margin-bottom: 2rem;
line-height: 1.5;
color: rgba(0, 0, 0, 0.8);
}
.modal__btn {
font-size: 0.875rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: #e6e6e6;
color: rgba(0, 0, 0, 0.8);
border-radius: 0.25rem;
border-style: none;
border-width: 0;
cursor: pointer;
-webkit-appearance: button;
text-transform: none;
overflow: visible;
line-height: 1.15;
margin: 0;
will-change: transform;
-moz-osx-font-smoothing: grayscale;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: -webkit-transform 0.25s ease-out;
transition: transform 0.25s ease-out;
transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.modal__btn:focus,
.modal__btn:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.modal__btn-primary {
background-color: #00449e;
color: #fff;
}
/**************************\
Demo Animation Style
\**************************/
@keyframes mmfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mmfadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes mmslideIn {
from {
transform: translateY(15%);
}
to {
transform: translateY(0);
}
}
@keyframes mmslideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(-10%);
}
}
.micromodal-slide {
display: none;
}
.micromodal-slide.is-open {
display: block;
}
.micromodal-slide[aria-hidden="false"] .modal__overlay {
animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden="false"] .modal__container {
animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__overlay {
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__container {
animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
will-change: transform;
}
/**************************\
Button Style
\**************************/
a.modal-login {
position: relative;
display: inline-block;
padding: 1em 2em;
text-decoration: none;
text-align: center;
cursor: pointer;
user-select: none;
color: black;
background: #cecece;
border-radius: 4px;
}
a.modal-login::after {
position: relative;
display: inline-block;
transition: transform 0.2s ease;
font-weight: bold;
letter-spacing: 0.01em;
will-change: transform;
transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0))
rotateY(var(--ry, 0));
}/**************************\
Micromodal Example Snippet
latest: https://cdn.jsdelivr.net/npm/micromodal@0.4.2/dist/micromodal.min.js
\**************************/
/**************************\
Important: Micromodal 0.4.2 is currently not IE11 compatible. A temp
replacement could be https://codepen.io/brifiction/pen/GRgoLgQ. Or revert
back to https://cdn.jsdelivr.net/npm/micromodal@0.3.2/dist/micromodal.min.js
\**************************/
MicroModal.init({
// onShow: modal => console.info(`${modal.id} is shown`), // [1]
// onClose: modal => console.info(`${modal.id} is hidden`), // [2]
openTrigger: 'data-micromodal-trigger', // [3]
closeTrigger: 'data-custom-close', // [4]
disableScroll: true, // [5]
disableFocus: false, // [6]
awaitOpenAnimation: false, // [7]
awaitCloseAnimation: false, // [8]
debugMode: true // [9]
});出力結果
【このプラグインの特徴】
- 超軽量（1.9KB）
- スタイルの自由度が高い
- jQuery不要
Micromodal.jsは、「ボタンをクリックしたら要素や画像をポップアップ表示したい」こんな悩みに応えてくれます。
例えば、「画像は小さく表示するけど、クリックしたら画面いっぱいに表示」「ログイン画面をフワッと表示したい」「ページ遷移させずに情報を追記したい」こんな時に使えそうですね！
モーダル系プラグインもたくさんありますが、Micromodalは超軽量で、デザインのカスタマイズに制限がないところが特に気に入っています。
「WAI-ARIAガイドライン」というちょっとお堅めの団体が作っているので、安心して使えますよ◎
「デザインを心配せず、シンプルなポップアップ機能が欲しい！」という方は使ってみてください。
実装手順と使い方イメージ
ファイルを設置・読み込む（CDN、npm、ダウンロード）
HTMLでプラグインを読み込みます。
ダウンロードして設置したい方は、Githubからどうぞ。
HTMLを記述する
<div id="modal-1" aria-hidden="true">
<!-- ここにモーダルの中身を書く -->
</div>
<button data-micromodal-trigger="modal-1">open</button>//トリガーとなるボタン要素を設置モーダルウィンドウの中身と、トリガーとなるボタン要素を設置します（buttonタグである必要はなし）
スクリプトを記述
<script>
MicroModal.init();
</script>JavaScriptで制御します。
トリガー（data-micromodal-trigger属性）を探し、そのトリガーで指定した属性値のID（modal-1）をもった要素（<div id=”modal-1″ aria-hidden=”true”>）がポップアップ表示する仕様ですね。
要素の高さを自動で揃えてくれるプラグイン「matchHeight.js」
<div class="row">
<div class="column">
<h2 class="title match" data-mh="title">Citizen Kane</h2>
<p class="description" data-mh="desc">The fresh, sophisticated, and classic masterpiece, Citizen Kane, is probably the world's most famous and highly-rated film.</p>
<div class="label">1941</div>
</div>
<div class="column">
<h2 class="title match" data-mh="title">The Bridge on the River Kwai</h2>
<p class="description" data-mh="desc">The memorable, epic World War II adventure/action, anti-war drama, was the first of director David Lean's major multi-million dollar, wide-screen super-spectaculars.</p>
<div class="label">1957</div>
</div>
<div class="column">
<h2 class="title match" data-mh="title">Star Wars, Episode IV: A New Hope</h2>
<p class="description" data-mh="desc">One of the most popular, profitable, entertaining, and successful science fiction/action - adventure/fantasy films of all time. </p>
<div class="label">1977</div>
</div>
</div>@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
html,
body {
background: #39b54a;
color: white;
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.row {
max-width: 880px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding: 1rem;
}
.column {
width: calc(100% - 2rem);
margin: 1rem;
@media only screen and (min-width: 500px) {
width: calc(50% - 2rem);
}
@media only screen and (min-width: 680px) {
width: calc(33.333334% - 2rem);
}
}
.title {
font-size: 2.1rem;
margin-bottom: 1rem;
}
.description {
margin-top: 0;
margin-bottom: 1rem;
}
.label {
display: inline-block;
padding: .15rem .6rem;
border: 2px solid white;
font-size: .875rem;//Match title height
function MatchHeight() {
$('.match')
.matchHeight({})
;
}
//Functions that run when all HTML is loaded
$(document).ready(function() {
MatchHeight();
});出力結果
デモページはこちら
※ remove matchHeightボタンをクリックすると、導入前の状態と比較できます。
【このプラグインの特徴】
- 横並びの要素の高さを自動で揃えられる
- レスポンシブ対応
- jQuery必須
「CSSだと隣り合う要素の高さが揃わない…」「テキスト量が違っても高さを揃えたい」こんな経験ありませんか？
これをサクッと解消してくれるのが「matchHeight.js」です。
仕組みは、指定した隣り合う要素の中で1番高さがある要素の値を自動で取得し、その他の要素に同じ値のheightをDOM指定することで揃えてくれます。
高さを揃えてくれるだけのプラグインですが、CSSコーディングでつまづいた時の良い解決策となるので、知っておくと便利でしょう◎
実装手順と使い方イメージ
ファイルを設置・読み込む（CDN、npm、ダウンロード）
matchHeight.jsをHTMLファイルで読み込みます。
公式ダウンロードページにCDNなどが用意されていますので見てみましょう！
ダウンロードして使う場合はmatchHeight on GitHubに飛び、「Code」という緑のボタンをクリックし「Download ZIP」を選べばOKです。
設置するファイルは「jquery.matchHeight-min.js」という圧縮ファイルのみとなります。
スクリプトを記述
<ul style="display: flex;">
<li class="same-height">高さを揃える要素1</li>
<li class="same-height">高さを揃える要素2</li>
<li class="same-height">高さを揃える要素3</li>
</ul>$(function() {
$('.same-height').matchHeight();
});高さを揃えたい横並びの要素をセレクタ「$(‘li.same-height’)」で指定し、後ろに「.matchHeight();」という独自メソッドを付けるだけです。
これだけで、何をやっても揃わなかった高さを揃えてくれます。
地味ですが、超お手軽に高さを揃えられるためおすすめです♪
クライアントがテキストを編集しても、見た目がキレイに整うようにしたい時に使ってみましょう！
グラフを動的に、キレイに表示してくれる「Chart.js」
<canvas id="oilChart" width="600" height="400"></canvas>var oilCanvas = document.getElementById("oilChart");
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
var oilData = {
labels: [
"Saudi Arabia",
"Russia",
"Iraq",
"United Arab Emirates",
"Canada"
],
datasets: [
{
data: [133.3, 86.2, 52.2, 51.2, 50.2],
backgroundColor: [
"#FF6384",
"#63FF84",
"#84FF63",
"#8463FF",
"#6384FF"
]
}]
};
var pieChart = new Chart(oilCanvas, {
type: 'pie',
data: oilData
});出力結果
【このプラグインの特徴】
- 線・棒・円グラフ、ドーナツ・レーダーチャート、鶏頭図など様々なグラフを作れる
- Canvasのため、動きのあるグラフを簡単に実装できる
- 設定やアニメーションのカスタマイズが超豊富
- 日本語ドキュメントが用意されている
- レスポンシブ対応
- jQuery不要
「グラフを実装したいけど難しそう」「Excelで作った画像だと味気ないと感じている」「値をクリックしたら項目名（ツールチップ）を表示させたい」
こんなわがままに答えてくれるのが「Chart.js」です。
グラフに使う値だけあれば、あとはルール通りに記述するだけ。
複雑なグラフになると設定が難しくなりますが、日本語ドキュメントがあるので比較的実装できる確率は高いです。
また、Canvasを使用するため、滑らかな動きでユーザーの視線を引き込むこともできます。
カスタマイズも非常に豊富なので、グラフやチャートを作りたいと思ったら、まず試して欲しいプラグインですね。
実装手順と使い方イメージ
ファイルを設置・読み込む（CDN、npm、ダウンロード）
Chart.jsをHTMLファイルで読み込みます。
※ 使用ファイルは「Chart.min.js」のみ。ダウンロードは「Contributors」→「assets」の中からどれを選んでもOKです。
HTMLでグラフの位置を指定
<div class="chart">
<canvas id="myChart"></canvas>
</div>canvasタグにidで名前をつけるだけでOKです。
スクリプトで細かい設定をする
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'pie',//グラフの種類（円グラフの場合）
data: data: {//グラフの値や項目名、色などを設定
labels: ["A型", "B型", "O型", "AB型"],
datasets: [{
backgroundColor: [
"red",
"blue",
"green",
"yellow"
],
data: [33, 34, 20, 13]
}]
},
options: title: {//アニメーションや角度などを設定
display: true,
text: '血液型 割合'
}
});
</script>※ グラフを1ページにしか使わない場合、HTMLファイルにインラインで記述するのがおすすめです。
他のプラグインより設定項目が多いため難しく感じるかもしれませんが、ドキュメントは丁寧に書いてあり、利用者が多いためコードサンプルも見つかると思うため安心してください！
Googleカレンダーにも対応するカレンダープラグイン「Full Calendar」
<div id='calendar'></div>$(document).ready(function () {
// Documentの読み込みが完了するまで待機し、カレンダーを初期化します。
$('#calendar').fullCalendar({
// ヘッダーのタイトルとボタン
header: {
// title, prev, next, prevYear, nextYear, today
left: 'prev,next today',
center: 'title',
right: 'month agendaWeek agendaDay'
},
// jQuery UI theme
theme: false,
// 最初の曜日
firstDay: 1, // 1:月曜日
// 土曜、日曜を表示
weekends: true,
// 週モード (fixed, liquid, variable)
weekMode: 'fixed',
// 週数を表示
weekNumbers: false,
// 高さ(px)
//height: 700,
// コンテンツの高さ(px)
//contentHeight: 600,
// カレンダーの縦横比(比率が大きくなると高さが縮む)
//aspectRatio: 1.35,
// ビュー表示イベント
viewDisplay: function(view) {
//alert('ビュー表示イベント ' + view.title);
},
// ウィンドウリサイズイベント
windowResize: function(view) {
//alert('ウィンドウリサイズイベント');
},
// 日付クリックイベント
dayClick: function () {
//alert('日付クリックイベント');
},
// 初期表示ビュー
defaultView: 'month',
// 終日スロットを表示
allDaySlot: true,
// 終日スロットのタイトル
allDayText: '終日',
// スロットの時間の書式
axisFormat: 'H(:mm)',
// スロットの分
slotMinutes: 15,
// 選択する時間間隔
snapMinutes: 15,
// TODO よくわからない
//defaultEventMinutes: 120,
// スクロール開始時間
firstHour: 9,
// 最小時間
minTime: 6,
// 最大時間
maxTime: 20,
// 表示する年
year: 2012,
// 表示する月
month: 12,
// 表示する日
day: 31,
// 時間の書式
timeFormat: 'H(:mm)',
// 列の書式
columnFormat: {
month: 'ddd', // 月
week: "d'('ddd')'", // 7(月)
day: "d'('ddd')'" // 7(月)
},
// タイトルの書式
titleFormat: {
month: 'yyyy年M月', // 2013年9月
week: "yyyy年M月d日{ ～ }{[yyyy年]}{[M月]d日}", // 2013年9月7日 ～ 13日
day: "yyyy年M月d日'('ddd')'" // 2013年9月7日(火)
},
// ボタン文字列
buttonText: {
prev: '‹', // <
next: '›', // >
prevYear: '«', // <<
nextYear: '»', // >>
today: '今日',
month: '月',
week: '週',
day: '日'
},
// 月名称
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// 月略称
monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// 曜日名称
dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
// 曜日略称
dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
// 選択可
selectable: true,
// 選択時にプレースホルダーを描画
selectHelper: true,
// 自動選択解除
unselectAuto: true,
// 自動選択解除対象外の要素
unselectCancel: '',
// イベントソース
eventSources: [
{
events: [
{
title: 'event1',
start: '2013-01-01'
},
{
title: 'event2',
start: '2013-01-02',
end: '2013-01-03'
},
{
title: 'event3',
start: '2013-01-05 12:30:00',
allDay: false // will make the time show
}
]
}
]
});
// 動的にオプションを変更する
//$('#calendar').fullCalendar('option', 'height', 700);
// カレンダーをレンダリング。表示切替時などに使用
//$('#calendar').fullCalendar('render');
// カレンダーを破棄（イベントハンドラや内部データも破棄する）
//$('#calendar').fullCalendar('destroy')
});出力結果
【このプラグインの特徴】
- カスタマイズしやすいシンプル設計
- 機能やデザインカスタマイズが豊富
- テンプレートが複数用意されている
- 日本語対応で、イベント登録・画面遷移も可能
- APIを使えばGoogleカレンダーと予定を同期できる
- 日・週・月表示や、横向きなどさまざまなスタイルも実装できる
- jQuery不要
日本語のカレンダーを実装するなら「Full Calendar」でOKです。
さまざまなカレンダー表示ができますし、デザインもCSSでいじれるのでカスタマイズ性もグッド。
何よりGoogleカレンダーと同期できますし、Googleカレンダーのデザインを編集できるため、機能面で特に優れていると言えますね。
Googleカレンダーをデフォルトで実装すると、ちょっと寂しい気がしますから。。
美容室案件などで「おしゃれなカレンダーに急な休日をサクッと表示したい」、といった要望に応えたい場合におすすめです。
実装手順と使い方イメージ
ファイルを設置・読み込む（npm、ダウンロード）
Full CalendarのファイルをHTMLで読み込みます。
読み込むファイルは「main.min.css」「main.min.js」の圧縮ファイルです。
HTMファイルでカレンダーを表示したい場所に記述
<div id="calendar"></div>上記を記述した位置にカレンダーを表示させます。
スクリプトで詳細設定する
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl,
initialView: 'dayGridMonth' //ここにオプションを記載していく
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
locale: 'ja',//表記を日本語対応
});
calendar.render();
});
</script>テーブル（表）が横スクロールできることを知らせる「ScrollHint」
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollHint</title>
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
</head>
<body>
<div class="js-scrollable">
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>サンプルテキストサンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキストサンプルテキストサンプルテキスト</td>
</tr>
<tr>
<td>サンプルテキストサンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキストサンプルテキストサンプルテキスト</td>
</tr>
<tr>
<td>サンプルテキストサンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキストサンプルテキストサンプルテキスト</td>
</tr>
</tbody>
</table>
</div>
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
</body>
</html>table {
width: 800px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
}
th,
td{
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}
th {
font-size: 16px;
font-weight: bold;
padding: 20px;
}
td {
font-size: 14px;
padding: 20px;
line-height: 1.4;
}new ScrollHint('.js-scrollable', {
i18n: {
scrollable: 'スクロールできます'
}
});出力結果
【このプラグインの特徴】
- 横スクロールをユーザーに伝えられ、テーブルを見てもらえる
- 簡単に導入でき、レスポンシブ対応
- jQueryは不要
「スマホやタブレットでも、テーブルをキレイに表示したい」という思いから、テーブルを横スクロール表示にすることも多いですよね。
しかしデフォルトのテーブルでは、横スクロールできることがユーザーに伝わりにくいです。
そんな時は、横スクロールできることをスマートに伝えられるプラグイン「ScrollHint」を使いましょう！
この辺りまで実装してクライアントに納品すると、評価はかなり高まると思います◎
実装手順と使い方イメージ
ファイルを設置・読み込む（CDN、npm、ダウンロード）
必要ファイルをHTMLで読み込みます。
必要ファイルは、scroll-hint.cssとscroll-hint.min.jsです。
HTMLを記述する
<div class="js-scrollable">
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
</tr>
</tbody>
</table>
</div>tableタグの親要素に、「js-scrollable」というclass名を指定するだけです。
スクリプトを記述
new ScrollHint('.js-scrollable', {
scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appeari18n: {
scrollable: 'スクロールできます'//オプションを記載
}
});必要であれば、スクリプトを記述しカスタマイズしていきます。
アイコン下の文字は変更可能です。
細やかな実装までできれば、クライアントから継続依頼をもらいやすいです。
いざという時のために頭の片隅に置いておきましょう！
スクロールバーにも愛あるデザインを！「jQuery custom content scroller」
<!DOCTYPE HTML>
<html lang="ja">
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.otwo.jp/blog/demo/scroll/jquery.mCustomScrollbar.min.js"></script>
<link rel="stylesheet" href="http://www.otwo.jp/blog/demo/scroll/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div class="content pattern1">
<div class="scroll">デフォルト</div>
</div>
<div class="content pattern2">
<div class="scroll">theme:rounded-dots-dark</div>
</div>
<div class="content pattern3">
<div class="scroll">theme:inset-3-dark</div>
</div>
</body>
</html>.content{
width: 200px;
height: 200px;
border: solid 1px #000;
overflow: hidden;
display: inline-block;
}
.scroll{
height: 500px;
overflow: auto;
} $(window).on("load",function(){
$(".pattern1").mCustomScrollbar();
$(".pattern2").mCustomScrollbar({
theme:"rounded-dots-dark"
});
$(".pattern3").mCustomScrollbar({
theme:"inset-3-dark"
});
});出力結果
デモページはこちら
【このプラグインの特徴】
- スクロールバーをデザインできる
- 幅広いブラウザに対応
- jQuery必須
「デフォルトのスクロールバーだとデザイン的に浮く」「納品されたデザインがオリジナルのスクロールバーだった」
こんなお悩みを解決できるのが「custom content scroller」です。
スクロールバーは-webkit-系のブラウザならCSSでデザイン変更できますが、他のブラウザだとダサめのデフォルトデザインが反映されて困りますよね？
このプラグインを使えば、ほぼブラウザを気にせずデザイン変更が可能です。
スタイリッシュなテーマがいくつか用意してあるので、デザイン的に浮きません。
CSSでバーの色や幅・位置、透明度などを変更できるので、比較的使いやすいですよ〜。
ちなみに、マウスホイールなどのカスタムも豊富。
実装手順と使い方イメージ
ファイルを設置・読み込む（CDN、npm、ダウンロード）
HTMLでプラグインを読み込みます。
ダウンロードして設置する際の必要ファイルは、「jquery.mCustomScrollbar.min.css」「jquery.mCustomScrollbar.min.js」となります。
HTMLで範囲を指定
<div class="scroll-area">
<div>
ここに記述したものがスクロールで表示されます。
</div>
</div>スクリプトでオプションを指定
<script>
(function($){
$(window).on("load",function(){
$(".scroll-area").mCustomScrollbar();
});
})(jQuery);
</script>このプラグインはスクロールバーをCSSとJSで擬似的に表示させているものであるため、スクロールに対してJS処理をしている場合は影響出るかもしれません。
とはいえ、簡単にスクロールバーをデザインできるため、導入はアリだと思います♪
⇒jQuery custom content scrollerの公式ドキュメントはこちら
良質なプラグインの選び方
プラグインはどれを選んでも良いわけではありません。
表面上良さそうに見えても、実際に使ってみると汎用性が低かったり、エラーの原因になって制作の進行を妨げることもあるからです。
そのため、「どんなプラグインを選べば良いか」を意識して使用しましょう！
カスタマイズ性は高いか
プラグインはカスタマイズの豊富さをチェックしましょう！
というのも、欲しい機能を正確に実装できるかが変わってくるからです。
例えば、スライドショーのプラグインはたくさんありますが、下にサムネイルを表示できなかったり、スマホのスワイプに反応しないなどそれぞれ違いがあります。
必要機能を実装できないと意味がないので、カスタマイズ性はしっかりとチェックしましょう。
プラグインの公式ページの「オプション」を解説している部分で、カスタマイズできる機能を確認できます。
プラグインの更新はされているか
プラグインの中には、何年も前に開発者が更新をやめている場合もあります。
時が経つごとに新しい技術に対応できなくなる可能性が高まるので、「最後の更新はいつか？」という部分はチェックしておきたいですね！
プラグインは「Github」で公開されていることが多いので、そのプラグインのGithubのページで「History」を確認すればOKです。
1~3年くらいなら問題ないかもしれませんが、4年以上更新されてない場合は要注意。
マイナー過ぎないか
マイナーすぎるプラグインはなるべく避けたいところ。
というのも、利用者が少なくて、どんなエラーが起こりどんな解決策があるかもわからないからです。
悪いスクリプトがこっそり入れられている可能性もゼロではないので、なるべくメジャーなプラグインを使いましょう。
あなたが冒険する必要はありませんからね。
