Bootstrapモーダルで画像ビューアギャラリーを作る方法を完全解説！初心者向け比率とスワイプ対応ガイド

1. Bootstrapモーダルと画像ビューアの基本とは

1. Bootstrapモーダルと画像ビューアの基本とは

Bootstrapモーダルとは、画面の上にふわっと表示されるウィンドウのことです。背景を暗くして、その上にコンテンツを表示します。画像ビューアや画像ギャラリーを作るときによく使われます。

画像ビューアとは、サムネイルと呼ばれる小さな画像をクリックすると、大きな画像を表示する仕組みのことです。ネットショップの商品ページや写真サイトでよく見かけます。

Bootstrap5では、特別な難しい設定をしなくても、クラスという決められた名前を指定するだけでモーダルが動きます。クラスとは、見た目や動きをまとめたラベルのようなものです。

これから、初心者向けに画像ギャラリーの作り方、比率の保ち方、スマホスワイプ対応まで順番に説明します。

2. 基本の画像ギャラリーをモーダルで作る方法

2. 基本の画像ギャラリーをモーダルで作る方法

まずは、シンプルな画像ギャラリーを作ります。小さな画像をクリックするとモーダルが開き、大きな画像が表示される仕組みです。

<!-- サムネイル画像 -->
<img src="/img/sample150-100.jpg" class="img-thumbnail" data-bs-toggle="modal" data-bs-target="#imageModal">

<!-- モーダル -->
<div class="modal fade" id="imageModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<img src="/img/sample150-100.jpg" class="img-fluid">
</div>
</div>
</div>
</div>

img-fluidは、画像を画面サイズに合わせて自動で縮小するクラスです。これを指定しないと、画像がはみ出すことがあります。

modal-dialog-centeredは、モーダルを画面の中央に表示するための設定です。

3. 画像の縦横比を保つ方法と比率の考え方

3. 画像の縦横比を保つ方法と比率の考え方

画像の比率とは、横と縦の長さのバランスのことです。たとえば横長の写真を無理やり縦に伸ばすと、顔が細長くなってしまいます。

Bootstrap5にはratioクラスがあり、特定の縦横比を保つことができます。

<div class="ratio ratio-16x9">
<img src="/img/sample150-100.jpg" class="img-fluid object-fit-cover">
</div>

ratio-16x9は、横十六に対して縦九の比率を保つ指定です。動画サイトでよく使われる比率です。

object-fit-coverは、画像を枠いっぱいに表示しつつ、比率を保つための指定です。これにより、画像が自然に見えます。

4. 複数画像のギャラリー切り替え機能

4. 複数画像のギャラリー切り替え機能

複数の画像を表示したい場合は、クリックした画像をモーダル内に差し替える方法を使います。

<!-- サムネイル -->
<img src="/img/sample150-100.jpg" class="img-thumbnail gallery-img">
<img src="/img/sample120-120.jpg" class="img-thumbnail gallery-img">

<!-- モーダル -->
<div class="modal fade" id="galleryModal" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<img id="modalImage" class="img-fluid">
</div>
</div>
</div>
</div>

<script>
document.querySelectorAll('.gallery-img').forEach(function(img){
img.addEventListener('click', function(){
document.getElementById('modalImage').src = this.src;
var modal = new bootstrap.Modal(document.getElementById('galleryModal'));
modal.show();
});
});
</script>

この仕組みにより、どの画像をクリックしても同じモーダルを使い回すことができます。無駄がなく、管理もしやすくなります。

5. スマホスワイプ対応の考え方

5. スマホスワイプ対応の考え方

スワイプとは、指で画面を横に動かす操作のことです。スマートフォンでは一般的な操作方法です。

スワイプ対応をするには、タッチイベントという仕組みを使います。イベントとは、クリックやタッチなどの動作をきっかけに処理を行う仕組みです。

<script>
let startX = 0;
let endX = 0;
const modalImg = document.getElementById('modalImage');

modalImg.addEventListener('touchstart', function(e){
startX = e.changedTouches[0].screenX;
});

modalImg.addEventListener('touchend', function(e){
endX = e.changedTouches[0].screenX;
if(endX - startX > 50){
alert('前の画像へ');
}
if(startX - endX > 50){
alert('次の画像へ');
}
});
</script>

左右の動きの差が一定以上になったときに、次の画像や前の画像に切り替える処理を書きます。これにより、モバイル対応画像ギャラリーになります。

6. レスポンシブ対応と画面サイズへの配慮

6. レスポンシブ対応と画面サイズへの配慮

レスポンシブとは、画面サイズに応じて表示が変わる仕組みのことです。パソコン、タブレット、スマートフォンで見やすくするために重要です。

Bootstrap5は最初からレスポンシブ設計です。modal-lgを使えば大きめ表示、modal-fullscreenを使えばスマホで全画面表示にできます。

<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-body">
<img src="/img/sample150-100.jpg" class="img-fluid">
</div>
</div>
</div>

modal-fullscreen-sm-downは、小さい画面のときだけ全画面にする指定です。スマホユーザーの体験を高めることができます。

7. SEO対策と画像最適化の基本

7. SEO対策と画像最適化の基本

画像ギャラリーを作るときは、検索エンジン最適化も重要です。画像にalt属性を設定すると、検索エンジンが内容を理解しやすくなります。

alt属性とは、画像が表示できないときに代わりに表示される説明文です。Bootstrapモーダルであっても必ず設定しましょう。

また、ファイル名もimage1よりproduct-cameraのように意味のある名前にするとSEO効果が高まります。

Bootstrapモーダル画像ビューアギャラリーを作るときは、表示速度、比率維持、レスポンシブ対応、スワイプ対応、alt属性設定を意識することが大切です。

まとめ

まとめ

今回はBootstrapモーダルを活用した画像ビューアギャラリーの作り方について、初心者向けに基礎から応用まで詳しく解説しました。Bootstrap5のモーダル機能を使えば、特別な難しい設定をしなくても、シンプルで見やすい画像ギャラリーを構築できます。画像サムネイルをクリックして拡大表示する仕組み、imgfluidによるレスポンシブ対応、ratioクラスによる縦横比の維持、objectfitcoverによる自然な表示制御など、実践的なテクニックを理解することで、実務でも使えるモーダル画像ビューアを実装できます。

また、複数画像を一つのモーダルで切り替える方法では、JavaScriptを活用してsrc属性を動的に変更する方法を紹介しました。これにより、効率的で保守性の高い画像ギャラリーが完成します。スマホ対応としては、タッチイベントを利用したスワイプ操作の基本的な考え方も重要です。touchstartとtouchendを活用することで、モバイルフレンドリーな画像スライダーやモーダルギャラリーを構築できます。

さらに、レスポンシブデザインを意識したmodalfullscreenやmodaldialogcenteredの使い分けも重要です。パソコン、タブレット、スマートフォンそれぞれで快適に閲覧できる設計は、ユーザー体験向上につながります。画像最適化の観点では、alt属性の設定、意味のあるファイル名、画像サイズの最適化などを徹底することで、検索エンジンからの評価も高まりやすくなります。

Bootstrapモーダル画像ギャラリーは、ポートフォリオサイト、商品紹介ページ、ブログ記事、写真ギャラリーサイトなど幅広い用途に活用できます。初心者でも理解できる基本構造を押さえつつ、応用的なカスタマイズを加えることで、実用的で見栄えの良いWebデザインが実現できます。

サンプルプログラムの総復習

<!-- サムネイル画像 -->
<img src="/img/sample150-100.jpg" class="img-thumbnail gallery-img" alt="ギャラリー画像一">
<img src="/img/sample120-120.jpg" class="img-thumbnail gallery-img" alt="ギャラリー画像二">

<!-- モーダル -->
<div class="modal fade" id="reviewModal" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<div class="ratio ratio-16x9">
<img id="reviewImage" class="img-fluid object-fit-cover" alt="拡大画像表示">
</div>
</div>
</div>
</div>
</div>

<script>
document.querySelectorAll('.gallery-img').forEach(function(img){
img.addEventListener('click', function(){
document.getElementById('reviewImage').src = this.src;
var modal = new bootstrap.Modal(document.getElementById('reviewModal'));
modal.show();
});
});
</script>

このように、Bootstrapモーダルと画像ギャラリーを組み合わせることで、拡張性の高いレスポンシブ対応画像ビューアが完成します。画像の縦横比維持、スマホスワイプ対応、JavaScriptによる動的切り替え、alt属性設定などを意識することが、実践的なWeb制作では重要です。