jQuery
jQuery｜4章：モーダルとパネル実装
INDEX
目次
前の章に戻る 次の章に進む

4章：モーダルとパネル実装

この教材の学習時間:130分

サンプルコード
 本教材で使用するzipファイルです。ダウンロード済みの方は不要です。
zipファイル
サンプルコードの使い方
  • materials
    • materialsフォルダには、教材内で解説しているサンプルコードが含まれています。
    • 例えば、「【2-1】トグルメニューの実装」を学ぶ際は、02-1_toggle-menuフォルダ内のコードを確認しながら進めてください。
    • ※ 【1-1】、【1-2】に関してはサンプルコードはありません。
  • exercises
    • exercisesフォルダには、各章末の演習課題に取り組むためのコードが用意されています。
    • 演習に取り組む際は、XX_start フォルダ内のコードを使って作業を始めましょう。
    • 作業後に答え合わせをする場合は、XX_end フォルダ内の解答例コードを参照してください。
この章では、jQueryを使ったモーダルとパネルの実装方法を学びます。

具体的には、
===
  • ライトボックス風モーダルウィンドウ
  • アコーディオンパネル
  • 画像ビューアー
===
を作成し、それぞれのHTML、CSS、jQueryでの実装方法を解説します。

【4-1】ライトボックス風モーダルウィンドウ

目安の学習時間:25分

(13971)

ライトボックス風のモーダルウィンドウとは、Webページ上の画像をクリックした際に、画像を拡大して表示する際に使用される一般的なUIパターンです。

HTML/CSS構造

モーダルウィンドウのHTMLを作成する
<div class="container">
    <img src="image1.jpg" class="thumbnail" alt="Image 1">
    <img src="image2.jpg" class="thumbnail" alt="Image 2">
</div>

<div id="modal" class="modal">
    <span class="close">×</span>
    <img class="modal-content" id="modal-img">
</div>
サンプルコード
  • モーダルウィンドウ全体を囲むdiv要素を作成し、idをmodalとします。
CSSでモーダルウィンドウのスタイルを整える
.modal {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 700px;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.thumbnail {
     width: 150px;
     height: auto;
     cursor: pointer;
     margin: 10px;
     border: 2px solid #ccc;
     transition: 0.3s;
 }
 .thumbnail:hover {
     border: 2px solid #777;
 }
サンプルコード
  • .modalにdisplay: none;を指定し、初期状態では非表示にする。

jQueryの実装

処理の流れ
  • 初期状態：
    • モーダルウィンドウはCSSによって非表示になっています（display: none;）。
  • イベント監視：
    • jQueryは、.thumbnail（サムネイル画像）と.close（閉じるボタン）のクリックイベントを監視します。
  • クリックイベント発生：
    1. サムネイル画像クリック：
      • クリックされたサムネイル画像の src 属性の値を取得します。
      • #modal-img（モーダルウィンドウ内の画像要素）の src 属性に、取得した画像の値を設定します。
      • #modal（モーダルウィンドウ）を表示します。
    2. 閉じるボタンクリック：
      • #modal（モーダルウィンドウ）を非表示にします。
  • 結果：
    • サムネイル画像をクリックすると、その画像が拡大されてモーダルウィンドウに表示されます。
    • 閉じるボタンをクリックすると、モーダルウィンドウが閉じます。
「モーダルの表示/非表示を制御」と「画像を表示」するための基本的な機能を実装します。
$(document).ready(function() {
    $(".thumbnail").click(function() {
        let imageSrc = $(this).attr("src");
        $("#modal-img").attr("src", imageSrc);
        $("#modal").fadeIn();
    });

    $(".close").click(function() {
        $("#modal").fadeOut();
    });
});
サンプルコード
コード 各コードの機能
$(document).ready(function() {...}) ページの読み込みが完了したらスクリプトを実行
$(".thumbnail").click(function() {...}) サムネイル画像をクリックした時の処理
let imageSrc = $(this).attr("src"); クリックされた画像の src 属性を取得
$("#modal-img").attr("src", imageSrc); モーダル内の画像要素の src 属性を、クリックされた画像の src 属性に設定
$("#modal").fadeIn(); モーダルウィンドウをフェードイン
$(".close").click(function() {...}) モーダルウィンドウの閉じるボタンをクリックした時の処理
$("#modal").fadeOut(); モーダルウィンドウをフェードアウト
.attr()メソッドについて
 .attr(attributeName, value) は、jQueryでHTML要素の属性を取得または設定するために使用されるメソッドです。
  • attributeName: 取得または設定する属性の名前（例："src", "id", "class"）。
  • - value: 設定する属性の新しい値。属性の値を取得する場合は、value引数を省略します。
上記の例では、クリックされたサムネイル画像のsrc属性を取得し、それをモーダルウィンドウ内の画像要素のsrc属性に設定するために使用されています。

【4-2】アコーディオンパネルの実装

目安の学習時間:30分

(13987)

アコーディオンパネルとは、複数のコンテンツ領域を縦に並べ、クリックすることで開閉できるUIコンポーネントです。よくFAQや詳細情報の表示に使用されます。

HTML/CSS構造

アコーディオンパネルのHTMLを作成する
<div class="accordion">
  <div class="accordion-header">セクション1</div>
  <div class="accordion-content">セクション1の内容</div>
  <div class="accordion-header">セクション2</div>
  <div class="accordion-content">セクション2の内容</div>
</div>
サンプルコード
  • accordion-headerクラスを持つdiv要素と、accordion-contentクラスを持つdiv要素を組み合わせて作成。 
.accordion {
  width: 80%;
  max-width: 600px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}
.accordion-content {
  display: none;
  padding: 15px;
  border: 1px solid #ccc;
}
.accordion-header {
  background-color: #f0f0f0;
  padding: 15px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  transition: background 0.3s;
}
.accordion-header.active {
  background-color: #d0d0d0;
}
サンプルコード
  • .accordion-contentにdisplay: none;を指定し、アコーディオンのコンテンツは初期状態では非表示。

jQueryの実装

処理の流れ
  1. 初期状態：
    • アコーディオンのコンテンツはCSSによって非表示になっています（display: none;）。
  2. イベント監視：
    • jQueryは、.accordion-header（アコーディオンのヘッダー）のクリックイベントを監視します。
  3. クリックイベント発生：
    • 現在開いているアコーディオンコンテンツをすべてスライドアップで閉じます。
    • クリックされたヘッダーに対応するコンテンツが非表示かどうかを判定します。
      • 非表示の場合：
        • そのコンテンツをスライドダウンで表示します。
        • すべてのヘッダーから active クラスを削除します。
        • クリックされたヘッダーに active クラスを追加します。
      • 表示されている場合：
        • そのコンテンツをスライドアップで閉じます。
        • クリックされたヘッダーから active クラスを削除します。
  4. 結果：
    • クリックされたヘッダーに対応するコンテンツが表示・非表示に切り替わり、他のコンテンツは閉じられます。
$(document).ready(function() {
    $(".accordion-header").click(function() {
        $(".accordion-content").slideUp(); // 他の開いているパネルを閉じる
        
        if ($(this).next(".accordion-content").is(":hidden")) {
        
                    $(this).next(".accordion-content").slideDown();
                    $(".accordion-header").removeClass("active");
                    $(this).addClass("active");
        
        } 
        
        else {
             $(this).next(".accordion-content").slideUp();
             $(this).removeClass("active");
        }
    });
});
サンプルコード
コード 各コードの機能
$(document).ready(function() {...}) ページの読み込みが完了したらスクリプトを実行
$(".accordion-header").click(function() {...}) アコーディオンヘッダーをクリックした時の処理
$(".accordion-content").slideUp(); 他のアコーディオンコンテンツを閉じる
if もし
$(this).next(".accordion-content").is(":hidden") クリックされたヘッダーの次の要素（コンテンツ）が非表示であるならば、以下を実行
$(this).next(".accordion-content").slideDown(); クリックされたヘッダーの次の要素（コンテンツ）をスライド表示
$(".accordion-header").removeClass("active"); すべてのアコーディオンヘッダーから active クラスを削除
$(this).addClass("active"); クリックされたアコーディオンヘッダーに active クラスを追加
else if の条件に当てはまらない場合の処理
$(this).next(".accordion-content").slideUp(); クリックされたヘッダーの次の要素（コンテンツ）を閉じる
$(this).removeClass("active"); クリックされたアコーディオンヘッダーから active クラスを削除
(14000)

.slideToggle() と .slideUp()、.slideDown() について
  • .slideToggle() は、要素をスライドアップまたはスライドダウンさせて表示・非表示を切り替えるメソッドです。
  • .slideUp() は、要素をスライドアップさせて非表示にするメソッドです。
  • .slideDown() は、要素をスライドダウンさせて表示するメソッドです。
    • これらのメソッドは、アニメーション効果を伴って要素の表示状態を変化させるため、WebページのUIをよりインタラクティブで魅力的なものにすることができます。

    【4-3】画像ビューアーの実装

    目安の学習時間:15分

    (14004)

    画像ビューアーとは、複数の画像を一覧表示し、選択した画像をメイン表示領域に表示するUIです。製品紹介やポートフォリオサイトなどでよく利用されます。

    HTML/CSS構造

    画像ビューアーのHTMLを作成する
    <div id="viewer">
  <img id="main-image" src="image1.jpg" alt="Main Image">
  <div id="thumbnails">
    <img src="image1.jpg" class="thumbnail" alt="Thumbnail 1">
    <img src="image2.jpg" class="thumbnail" alt="Thumbnail 2">
    <img src="image3.jpg" class="thumbnail" alt="Thumbnail 3">
  </div>
</div>
    サンプルコード
    • #main-imageは、メインで表示される画像の領域を定義。
    • #thumbnailsは、クリック可能なサムネイル画像を含む領域を定義。
    CSSで画像ビューアーのスタイルを整える
    #viewer {
  margin: 20px auto;
  max-width: 500px;
}
#main-image {
  width: 100%;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
 }
#thumbnails {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.thumbnail {
  width: 100px;
  height: auto;
  cursor: pointer;
  border: 2px solid #ccc;
  border-radius: 5px;
  transition: 0.3s;
 }
.thumbnail:hover {
  border: 2px solid #777;
}
    サンプルコード
    • cursor: pointer;でカーソルをポインタに変更し、クリックできることを示す。

    jQueryの実装

    処理の流れ
    1. 初期状態：
      • メイン画像領域には、初期画像が表示されています。
    2. イベント監視：
      • jQueryは、.thumbnail（サムネイル画像）のクリックイベントを監視します。
    3. クリックイベント発生：
      • クリックされたサムネイル画像のsrc属性の値を取得します。
      • #main-image（メイン画像）のsrc属性に、取得したサムネイル画像のsrc属性の値を設定します。
    4. 結果：
      • メイン画像が、クリックされたサムネイル画像に切り替わります。
    jQueryを使用して画像切替を実装する
    サムネイル画像をクリックするとメイン画像が切り替わる仕組みを実装します。
    #該当コードのみ記載
$(document).ready(function() {
  $(".thumbnail").click(function() {
    let imageSrc = $(this).attr("src");
    $("#main-image").attr("src", imageSrc);
  });
});
    サンプルコード
    コード 各コードの機能
    $(document).ready(function() {...}) ページの読み込みが完了したらスクリプトを実行
    $(".thumbnail").click(function() {...}) サムネイル画像をクリックした時の処理
    let imageSrc = $(this).attr("src"); クリックされたサムネイル画像のsrc属性を取得
    $("#main-image").attr("src", imageSrc); メイン画像のsrc属性を、クリックされたサムネイル画像のsrc属性に設定
    .attr("src", value)について
     .attr("src", imageSrc) は、jQueryでHTML要素のsrc属性に新しい値を設定するために使用されます。
    src属性は、画像を表示するために必要な画像のURLを指定する属性です。
    上記の例では、クリックされたサムネイル画像のURLをimageSrc変数に格納し、それをメイン画像要素のsrc属性に設定することで、メイン画像を新しい画像に切り替えています。

    【4-4】演習課題

    目安の学習時間:60分

    演習課題05 ：アコーディオン内のビューアー実装

    演習課題05

    演習課題05
    演習課題の詳細
    • 課題概要
      • アコーディオンパネル内に画像ビューアーを実装し、サムネイルをクリックするとメイン画像が切り替わる仕組みを作ります。
      • アコーディオンの開閉時に画像ビューアーの表示・非表示が連動します。
    • 要件（実装する内容）
      • アコーディオンパネルの中に画像ビューアーを組み込む
      • アコーディオンパネルを開閉すると、画像ビューアーも表示・非表示になる
      • 画像ビューアーのサムネイルをクリックすると、メイン画像が切り替わる
    • 自由部分（設定自由な内容）
      • アコーディオンパネルのデザインやアニメーション、サムネイルのサイズや配置は自由にカスタマイズできます。
      • 画像ビューアーのデザインや切り替えアニメーションなども調整可能です。
    • ヒント
      • アコーディオンパネルのHTML構造に画像ビューアーのHTML構造を組み込む
      • アコーディオンパネルの開閉処理（.click()など）と、画像切り替え処理（.attr()や.fadeIn()/.fadeOut()など）を実装
      • サムネイルをクリックすることで、メイン画像を動的に変更する処理を実装
    途中で躓いたら、教材を振り返りながら進めてみましょう。
    解き終わったら、05_endフォルダ内の解答例と見比べて、自分の実装を確認してみましょう。

    演習課題06：モーダル表示の拡張

    演習課題06

    演習課題06
    演習課題の詳細
    • 課題概要
      • 画像ビューアー内のメイン画像をクリックすると、モーダルウィンドウでその画像が拡大表示される機能を追加します。
      • モーダルウィンドウには閉じるボタンも実装して、ユーザーが画像を簡単に閉じられるようにします。
    • 要件（実装する内容）
      • 画像ビューアーのメイン画像をクリックすると、モーダルウィンドウが表示される
      • モーダルウィンドウ内に拡大画像を表示する
      • モーダルウィンドウには閉じるボタンを実装し、クリックでモーダルを閉じる
    • 自由部分（設定自由な内容）
      • モーダルウィンドウのデザインや背景の色、表示アニメーションなどは自由にカスタマイズできます。
      • 拡大画像の表示方法や遷移アニメーションも調整可能です。
    • ヒント
      • 画像ビューアーのメイン画像にクリックイベントを追加する
      • クリックイベントでモーダルウィンドウを表示し、その中に拡大画像を表示する処理を記述
      • モーダルウィンドウ内に閉じるボタンを追加し、そのボタンをクリックすることでモーダルを非表示にする処理を記述
    途中で躓いたら、教材を振り返りながら進めてみましょう。
    解き終わったら、06_endフォルダ内の解答例と見比べて、自分の実装を確認してみましょう。
    前の章に戻る 次の章に進む
    WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
    © 2020 by WEBCOACH