10 プラグインを使って機能を組み込む（画像のポップアップとスライドショー）

2025年7月9日

プラグインとは

プラグインとは、機能を拡張するために追加できるソフトウェアのことです。
Web制作においては、「プラグイン」「ライブラリ」のような呼び方で、ページに機能を組み込むことができます。

このページでは、3つの機能（計4つのパターン）の実装方法を一緒に学んでいきます。

メインビジュアルの背景画像をフワッと切り替える → CSS Animation
画像（キャプションあり）のポップアップ → Fancybox
画像+HTMLのポップアップ → Fancybox
カルーセル → Swiper

サンプルのソースコードは、以下よりダウンロードできます。

embed_plugin.zipをダウンロード

CSSだけでスライドショー

複数の背景画像を用意し、フワッと画像が切り替わる動きは、CSS Animationだけで実装できます。

HTML

mainvisualクラスに背景を設置し、その背景画像をアニメーションさせます。

<!-- メインビジュアル -->
<div class="mainvisual">
    <p class="mainvisual-caption">メインビジュアルはCSSアニメーションで背景画像を切替</p>
</div>

CSS

背景の設定を行っておきます。（background-）
animationと高さの設定をし、キャプションを親要素を基準に絶対配置しています。
keyframesはmainvisualという名前で設定しているので、animationにもその名前を書きます。
20%毎に、6枚の背景画像を設定しています。

/*Main visual CSS Animation*/
.mainvisual {
    background-image: url(../image/image-beach.jpg); /*1枚目*/
    background-color: #000; /*任意*/
    background-size: cover; /*隙間なく表示*/
    background-position: center 70%; /*左右は中央、上から70％*/
    animation: mainvisual 30s infinite alternate; /*アニメーション設定 30秒で無限ループ、行ったり来たり*/
    height: 70vh; /*高さは幅に対して70%*/
    position: relative; /*子要素キャプションの相対位置として親要素にセット*/
}

.mainvisual-caption {
    color: #fff; /*文字色*/
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4); /*ドロップシャドウ*/
    font-size: 12px; /*フォントサイズ*/
    position: absolute; /*親要素に対して絶対配置*/
    bottom: 0; /*下に配置*/
    right: 20px; /*右から20px*/
}

@keyframes mainvisual {
    0% {
        background-image: url(../image/image-beach.jpg); /*1枚目*/
    }

    20% {
        background-image: url(../image/image-bridge.jpg); /*2枚目*/
    }

    40% {
        background-image: url(../image/image-lake.jpg); /*3枚目*/
    }

    60% {
        background-image: url(../image/image-river.jpg); /*4枚目*/
    }

    80% {
        background-image: url(../image/image-sea.jpg); /*5枚目*/
    }

    100% {
        background-image: url(../image/image-tram.jpg); /*6枚目*/
    }
}

画像（キャプションつき）ポップアップ – Fancybox

画像をクリックしたら、拡大された画像がキャプションつきで表示され、同じグループの画像も次々と表示できる機能が実装できるのがFancyboxです。
Fancyboxの設定は、HTMLの属性などで設定します。
大きさ・ボタンの色などのスタイル変更は、CSSで行います。

Fancyboxの組み込み

CDN上にあるCSSとJavaScriptファイルを組み込みます。

CDN（Content Delivery Network、コンテンツ配信ネットワーク）とは、Webサイトのコンテンツをエンドユーザーに効率的に配信するためのネットワークのことです。世界中に分散配置されたサーバーにコンテンツをキャッシュすることで、ユーザーのアクセス速度を向上させ、サーバーへの負荷を軽減します。

headタグ内にCSSを記載（かつ自作のCSS[緑]より前）し、bodyの閉じタグより前（かつmain.js[緑]より前）に設置します。
CSSもJavaScriptも、既に定義されたものを上書きしたり、関数を使用するので、読み込み順は非常に大事です。

<head>
    <!-- 文字コードの設定 -->
    <meta charset="UTF-8">
    <!-- レスポンシブ用の設定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ブラウザのタブ・検索エンジン向けタイトル -->
    <title>HOME | PORTFOLIO</title>
    <!-- 検索エンジン向け -->
    <meta name="description" content="検索結果に表示されるページの説明文">
    <!-- CSS アクセシビリティプラス -->
    <link rel="stylesheet" href="css/uaplus.css">
    <!-- fancybox -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <!-- Swiper -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <!-- CSS フレーム -->
    <link rel="stylesheet" href="css/base.css">
    <!-- CSS メインコンテンツ -->
    <link rel="stylesheet" href="css/style.css">
</head>

<!-- fancybox -->
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
    <!-- Swiper -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <!-- メインコンテンツ向けJavaScript -->
    <script src="js/main.js" defer></script>
</body>

</html>

HTML

クリックする画像と、クリックした後に表示される画像の設定を行います。

aタグには、data-fancybox属性にグループ名をセットします。
（同一グループ名のついた画像が、ポップアップ後連続表示されます）

data-src属性には、ポップアップ表示で拡大する画像のパスをセットします。

data-caption属性には、ポップアップの際に画像の下に表示されるキャプションをセットします。

img画像は、ポップアップ前に表示されている一覧の画像として設定します。

<div class="flex-wrap-col3">
    <div class="item">
        <a data-fancybox="group1" data-src="./image/image-beach.jpg" data-caption="Beach">
            <img src="./image/image-beach.jpg" alt="beach" />
        </a>
        <h3>Beach</h3>
    </div>
    <div class="item">
        <a data-fancybox="group1" data-src="./image/image-lake.jpg" data-caption="Lake">
            <img src="./image/image-lake.jpg" alt="lake" />
        </a>
        <h3>Lake</h3>
    </div>
    <div class="item">
        <a data-fancybox="group1" data-src="./image/image-tram.jpg" data-caption="Tram">
            <img src="./image/image-tram.jpg" alt="tram" />
        </a>
        <h3>Tram</h3>
    </div>
</div>

CSS

aタグはdisplay: inlineがデフォルトで、クリックエリアが小さいので、inline-blockへ変更しています。

/*Fancybox*/
.item a {
    display: inline-block;
}

画像＋HTMLのポップアップ – Fancybox

Fancyboxでは、クリック後に拡大される内容をHTMLで用意しておくことができます。
クリック後に表示される要素にはID名をつけておきます。
その要素には、CSSでdisplay: none; を設定しておきます。（クリック前の状態では非表示となります）

HTML

長く見えますが、文章が長くなっているだけです。

3つのitem要素内には、クリックする画像と、modal要素を作成し、modal要素は非表示にします。
aタグのdata-srcには、modal要素のID名を入れておきます。

modal要素内のスタイルは自由です。

Fancyboxの仕組み上、ポイントとなる部分にはマーカーで色を付けています。

<div class="flex-wrap-col3">
    <div class="item">
        <a data-fancybox="group2" data-src="#modal-river" data-caption="river" href="javascript:;">
            <img src="./image/image-river.jpg" alt="river" />
        </a>
        <div class="modal" id="modal-river">
            <div class="modal-wrap">
                <div class="left-content">
                    <img src="./image/image-river.jpg" alt="river" />
                </div>
                <div class="right-content">
                    <h4>River</h4>
                    <p>作品の説明文を書きます。<br>親のmodal-wrapクラスは、display:flexで横並びにしています。</p>
                    <p>2つめの段落が来ても、下余白が入っているので、見やすくなっています。作品の説明を沢山書けますね。</p>
                    <p>作品の説明文を書きます。<br>親のmodal-wrapクラスは、display:flexで横並びにしています。</p>
                    <p>2つめの段落が来ても、下余白が入っているので、見やすくなっています。作品の説明を沢山書けますね。</p>
                    <p>作品の説明文を書きます。<br>親のmodal-wrapクラスは、display:flexで横並びにしています。</p>
                    <p>2つめの段落が来ても、下余白が入っているので、見やすくなっています。作品の説明を沢山書けますね。</p>
                    <p>作品の説明文を書きます。<br>親のmodal-wrapクラスは、display:flexで横並びにしています。</p>
                    <p>2つめの段落が来ても、下余白が入っているので、見やすくなっています。作品の説明を沢山書けますね。</p>
                </div>
            </div>
        </div>
        <h3>River</h3>
    </div>
    <div class="item">
        <a data-fancybox="group2" data-src="#modal-bridge" data-caption="bridge"
            href="javascript:;">
            <img src="./image/image-bridge.jpg" alt="bridge" />
        </a>
        <div class="modal" id="modal-bridge">
            <div class="modal-wrap">
                <div class="left-content">
                    <img src="./image/image-bridge.jpg" alt="bridge" />
                </div>
                <div class="right-content">
                    <h4>Bridge</h4>
                    <p>作品の説明文を書きます。<br>親のmodal-wrapクラスは、display:flexで横並びにしています。</p>
                    <p>2つめの段落が来ても、下余白が入っているので、見やすくなっています。作品の説明を沢山書けますね。</p>
                </div>
            </div>
        </div>
        <h3>Bridge</h3>
    </div>
    <div class="item">
        <a data-fancybox="group2" data-src="#modal-sea" data-caption="sea" href="javascript:;">
            <img src="./image/image-sea.jpg" alt="sea" />
        </a>
        <div class="modal" id="modal-sea">
            <div class="modal-wrap">
                <div class="left-content">
                    <img src="./image/image-sea.jpg" alt="sea" />
                </div>
                <div class="right-content">
                    <h4>Sea</h4>
                    <p>作品の説明文を書きます。<br>親のmodal-wrapクラスは、display:flexで横並びにしています。</p>
                    <p>2つめの段落が来ても、下余白が入っているので、見やすくなっています。作品の説明を沢山書けますね。</p>
                </div>
            </div>
        </div>
        <h3>Sea</h3>
    </div>
</div>

CSS

/*デフォルトのスタイル*/
.modal {
    display: none;

}

.modal-wrap {
    display: flex; /*横並び*/
    flex-direction: column; /*スマホでは縦並びに変更*/
    justify-content: center; /*中央寄せ*/
    align-items: flex-start;
    height: 100%;

}

.left-content {
    width: 100%; /*横幅*/
    height: auto;
}

.right-content {
    width: 100%; /*横幅*/
    padding: 0;

    h4 {
        font-size: 22px; /*フォントサイズ*/
    }

    p {
        margin-bottom: 1em; /*段落の下余白*/
    }
}
/*PC用のスタイル*/
@media screen and (min-width: 900px) {

    /*Fancybox*/
    .modal-wrap {
        display: flex; 
        flex-direction: row; /*PCでは横並びに*/
        justify-content: center;
        align-items: flex-start;
        height: 100%;

    }

    .left-content {
        width: 50%; /*左カラムの横幅*/
        height: auto;
    }

    .right-content {
        width: 50%;/*右カラムの横幅*/
        padding: 0 0 0 30px;

        h4 {
            font-size: 22px;
        }

        p {
            margin-bottom: 1em;
        }
    }

    /* ここまで */
}

カルーセル – Swiper

カルーセルとは、複数のコンテンツをスライド形式で切り替えながら表示するWebデザインの手法です。
Swiperはレスポンシブやモバイル対応しやすいスライダー用の機能です。
オプションの指定は、JavaScriptで行います。

Swiperの組み込み

CSSとJavaScriptを読み込んでいます。
Swiperの起動は、main.jsにて設定します。

<head>
    <!-- 文字コードの設定 -->
    <meta charset="UTF-8">
    <!-- レスポンシブ用の設定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ブラウザのタブ・検索エンジン向けタイトル -->
    <title>HOME | PORTFOLIO</title>
    <!-- 検索エンジン向け -->
    <meta name="description" content="検索結果に表示されるページの説明文">
    <!-- CSS アクセシビリティプラス -->
    <link rel="stylesheet" href="css/uaplus.css">
    <!-- fancybox -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <!-- Swiper -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <!-- CSS フレーム -->
    <link rel="stylesheet" href="css/base.css">
    <!-- CSS メインコンテンツ -->
    <link rel="stylesheet" href="css/style.css">
</head>

    </footer>
    <!-- JS -->
    <!-- jQueryライブラリ -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <!-- fancybox -->
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
    <!-- Swiper -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <!-- メインコンテンツ向けJavaScript -->
    <script src="js/main.js" defer></script>
</body>

</html>

HTML

6枚の画像をimgタグで設定しています。
HTMLの構造やクラス名は、特に理由がなければそのままの形で使用しましょう。

<!-- Slider main container -->
<div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"><img src="./image/image-beach.jpg" alt="beach"></div>
        <div class="swiper-slide"><img src="./image/image-bridge.jpg" alt="bridge"></div>
        <div class="swiper-slide"><img src="./image/image-lake.jpg" alt="lake"></div>
        <div class="swiper-slide"><img src="./image/image-river.jpg" alt="river"></div>
        <div class="swiper-slide"><img src="./image/image-sea.jpg" alt="sea"></div>
        <div class="swiper-slide"><img src="./image/image-tram.jpg" alt="tram"></div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>

CSS

水色の部分は、各UIパーツの色指定です。
デザインの好みに応じてカスタマイズしましょう。

/*Swiper*/
.swiper {
    width: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center
}

.swiper-button-next,
.swiper-button-prev {
    color: #fff; /*前へ次へボタンの色*/
}

.swiper-pagination-bullet {
    background: #ffffff; /*ページネーションの小さい●の色*/
    opacity: 0.6; /*透明度60%*/
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #1078da; /*アクティブ時のページネーションの小さい●の色*/
    opacity: 1; /*透明度100%*/
}

JavaScript

表示枚数や余白、切り替える秒数などは、好みに応じて適宜修正しましょう。

/* Swiper */
const swiper = new Swiper('.swiper', {
    // Optional parameters
    slidesPerView: 1, /*スマホでは1枚表示*/
    spaceBetween: 30, /*スライドの余白*/
    loop: true, /*ループ再生する*/

    autoplay: {
        delay: 4000, /*4秒毎に切替*/
        disableOnInteraction: false,  /* ユーザー操作後に自動再生を停止しない */
    },

    breakpoints: {
        640: { /*640px以上の場合*/
            slidesPerView: 2, /*タブレットでは2枚表示*/
        },
        1024: { /*1024px以上の場合*/
            slidesPerView: 3, /*PCでは3枚表示*/
        },
    },

    // If we need pagination
    pagination: {
        el: '.swiper-pagination',　/*ページネーション要素*/
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next', /*次へボタン要素*/
        prevEl: '.swiper-button-prev', /*前へボタン要素*/
    },

    // And if we need scrollbar
    scrollbar: {
        el: '.swiper-scrollbar', /*スクロールバー要素*/
    },
});

URLをコピーしました！

この記事を書いた人

トビサワ

デジタルハリウッド（専門スクール）講師、大学非常勤講師。
Webサイトのデザイン・コーディング・PHPやJavaScriptによるプログラミング、サーバー設定などのスキルを保有し、企業や事業主からの依頼によりサイト制作を行っている。
クライアントの希望によって会社案内やパンフレットのデザイン、動画制作案件も請けている。
SIer企業でのシステムエンジニアを十数年経験後、2011年よりフリーランスへ転向。