ウェブサイトを作成する際、ユーザーの視覚的な体験を高めるのはとても大切ですよね。
特に、画像を扱う場合、その画像をクリックしたときに拡大表示できると、より詳細に見ることができるので、訪問者にとって嬉しい機能となります。
そこで今回、HTMLとCSSを使って、初めての方でも簡単にモーダルの画像を拡大表示する方法をご紹介します。
ぜひ、ご自身のウェブサイトにも活用してみてくださいね。
モーダルの基礎知識
モーダルとは？
モーダルとは、ウェブサイトやアプリケーションで使用されるポップアップウィンドウの一種で、ユーザーの操作を一時的に中断させて特定の情報を表示するために利用されます。
モーダルウィンドウは、通常、画面の中央に浮かび上がる形で表示され、背景を暗くすることで、モーダル内のコンテンツに注目を集める効果があります。
モーダルの特徴
①ユーザーの注意を引く
モーダルはページの他の部分を覆って表示されるため、ユーザーの視線を集中させる効果があります。
重要な情報や操作を促したいときに使われ、ユーザーが他の操作に気を取られないようにします。
②シンプルなデザイン
通常、モーダルはシンプルなレイアウトで、必要な情報やアクションボタンだけを表示します。
これにより、ユーザーは迷うことなく目的の操作を行えます。
③再利用性
一度作成したモーダルは、さまざまな場面で再利用することができ、効率的なコーディングが可能に◎
モーダルの使い方
モーダルは、以下のようなシーンでよく使用されます。
画像の拡大表示
確認ダイアログ
フォーム入力
メッセージ通知
特に、画像拡大表示のモーダルは、ギャラリー機能や製品詳細ページでのユーザー体験を向上させるために非常に効果的です。
モーダルを活用することで、ユーザーは視覚的に情報を確認しやすくなり、サイト全体の使いやすさが向上します。
モーダルの基本的な理解を深めたところで、次に具体的な実装方法に移りましょう。
画像拡大用モーダルを簡単に作成する
【サンプル】画像をクリックして拡大表示
これから紹介するソースコードを使うと以下の実装ができます。
クリックして挙動を確認してみてください。
コピペで使えるコード
See the Pen モーダルで画像を拡大表示 by Ariii (@ariii-cdp) on CodePen.
HTML・CSS・JavaScriptでの実装＆解説
HTMLの基本構造
まずは、モーダルを表示するための基本的なHTML構造を作成します。
以下のコードを参考にしてください。
<!-- 画像のグリッド -->
<div class="image-grid">
<img
class="thumbnail"
src="https://plus.unsplash.com/premium_photo-1680172800933-ae8462274162?q=80&w=300&h=300&auto=format&fit=crop"
alt="画像1"
/>
<img
class="thumbnail"
src="https://plus.unsplash.com/premium_photo-1722686461601-b2a018a4213b?q=80&w=300&h=300&auto=format&fit=crop"
alt="画像2"
/>
<img
class="thumbnail"
src="https://images.unsplash.com/photo-1495147466023-ac5c588e2e94?q=80&w=300&h=300&auto=format&fit=crop"
alt="画像3"
/>
</div>
<!-- モーダル -->
<div id="myModal" class="modal">
<span class="close">×</span> <!-- 閉じるボタン -->
<img class="modal-content" id="js-modal-img" /> <!-- 拡大画像 -->
<div id="caption"></div> <!-- 画像のキャプション -->
</div>【HTMLの各部分の解説】
画像グリッド<div class="image-grid">
画像を並べるためのコンテナです。ここにサムネイル画像を格納します。<img class="thumbnail" ...>
サムネイル画像です。
src属性には表示したい画像のURLが入ります。
alt属性は画像の説明です。
モーダル<div id="myModal" class="modal">
モーダルのコンテナです。ここに拡大画像と閉じるボタンが含まれています。×
HTMLの文字参照で、“×”（バツ）を表します。
これは主に、モーダルウィンドウやポップアップなどを閉じるためのボタンとして使用されます。<img class="modal-content" id="js-modal-img" />
拡大表示する画像です。この画像はクリックしたサムネイルに基づいて変更されます。<div id="caption"></div>
画像に関連するキャプション（説明文）を表示する場所です。
CSSでスタイルの設定
次に、モーダルの見た目を整えるためのCSSを作成します。
以下のCSSを使用します。
画像をグリッド形式で表示し、モーダルをきれいに見せることができます。
/* グリッドスタイル */
.image-grid {
display: flex; /* フレックスボックスを使用して画像を横並びに */
justify-content: space-around; /* 画像間のスペースを均等に */
gap: 20px; /* 画像間の余白 */
}
/* サムネイル画像のスタイル */
.thumbnail {
width: 100%; /* 幅を100%に設定 */
cursor: pointer; /* カーソルをポインターにしてクリック可能に */
transition: transform 0.3s; /* ホバー時の変化を滑らかに */
}
.thumbnail:hover {
transform: scale(1.05); /* ホバー時に少し拡大 */
}
/* モーダルのスタイル */
.modal {
display: none; /* 初期状態は非表示 */
position: fixed; /* スクロールしても位置が固定 */
z-index: 1; /* 他の要素の上に表示 */
left: 0;
top: 0;
width: 100%; /* 幅は全体 */
height: 100%; /* 高さも全体 */
overflow: auto; /* コンテンツが多い場合はスクロール */
background-color: rgba(0, 0, 0, 0.7); /* 背景の透明度 */
}
.modal-content {
margin: 15% auto; /* 中央寄せ */
display: block; /* ブロック要素 */
width: 80%; /* 幅は80% */
max-width: 700px; /* 最大幅を設定 */
}
.close {
position: absolute; /* 絶対位置に配置 */
top: 10px; /* 上から10pxの位置 */
right: 25px; /* 右から25pxの位置 */
color: white; /* 色を白に */
font-size: 35px; /* フォントサイズを35pxに */
font-weight: bold; /* 太字 */
cursor: pointer; /* カーソルをポインターにしてクリック可能に */
}このCSSでは、モーダルの背景を半透明にし、画像のサイズを調整しています。
また、サムネイル画像にホバー効果を追加して、ユーザーがクリックしたくなるようにデザインしています。
JavaScriptで動作を実装
モーダルを表示したり、閉じたりするためのJavaScriptコードを追加します。
以下のコードを「script.js」に書き込みましょう。
// モーダルの取得
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("js-modal-img");
var captionText = document.getElementById("caption");
// サムネイル画像をクリックしたときの処理
var images = document.querySelectorAll(".thumbnail");
images.forEach(function(img) {
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src; // クリックした画像をモーダルに表示
captionText.innerHTML = this.alt; // キャプションを設定
}
});
// 閉じるボタンをクリックしたときにモーダルを閉じる
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
// モーダル外をクリックしたときにモーダルを閉じる
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}画像をクリックすると、モーダルが表示され、選択した画像がモーダル内に表示されます。
閉じるボタンをクリックすると、モーダルが非表示になります。
JavaScriptコード各部分の機能を解説します。
1. モーダルの要素を取得する
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");modal
モーダルウィンドウ全体を表すHTML要素（<div>）を取得します。この要素には画像とキャプションが含まれています。modalImg
モーダル内で拡大表示する画像を表すHTML要素（<img>）を取得します。
captionText
モーダル内で画像に関連するキャプションを表示するための要素を取得します。
2. サムネイル画像をクリックしたときの処理
var images = document.querySelectorAll(".thumbnail");
images.forEach(function(img) {
img.onclick = function() {
modal.style.display = "block"; // モーダルを表示
modalImg.src = this.src; // クリックした画像をモーダルに表示
captionText.innerHTML = this.alt; // キャプションを設定
}
});images
クラス名がthumbnailのすべての画像要素を取得します。
これは、画像のサムネイルをクリックしたときにモーダルを開くためのリストです。images.forEach(function(img) {...})
取得したすべてのサムネイル画像に対してループ処理を行います。img.onclick
各画像がクリックされたときに実行される関数を設定します。modal.style.display = "block"
モーダルを表示します。modalImg.src = this.src
クリックしたサムネイル画像のsrc属性を取得し、それをモーダル内の画像に設定します。
このthisは、クリックされた画像を指します。
captionText.innerHTML = this.alt
クリックされた画像のalt属性を取得し、それをモーダル内のキャプションに設定します。
このalt属性には、画像の説明が含まれていることが一般的です。
3. 閉じるボタンをクリックしたときにモーダルを閉じる
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none"; // モーダルを非表示にする
}span
クラス名がcloseの最初の要素を取得します。
これはモーダルを閉じるためのボタン（×マーク）です。span.onclick
閉じるボタンがクリックされたときに実行される関数を設定します。modal.style.display = "none"
モーダルを非表示にします。これにより、モーダルが閉じられます。
4. モーダル外をクリックしたときにモーダルを閉じる
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none"; // モーダルを非表示にする
}
}window.onclick
ウィンドウ全体でクリックイベントが発生したときに実行される関数を設定します。if (event.target == modal)
クリックされた対象（event.target）がモーダル自体であるかを確認します。modal.style.display = "none"
クリックされた対象がモーダルの場合、モーダルを非表示にします。
これにより、モーダルの外側をクリックしたときにもモーダルが閉じられます。
このJavaScriptコードは、モーダルウィンドウを操作するための基本的な機能です。
サムネイルをクリックすることでモーダルが開き、拡大画像とキャプションが表示されます。
また、閉じるボタンやモーダルの外側をクリックすることで、モーダルを簡単に閉じることができるようになっています。
まとめ
本記事では、モーダルの基本概念から画像拡大の実装方法までを解説しました。
モーダルは、ウェブサイトをより魅力的にするための強力なツールです。
HTML、CSS、JavaScriptを使って簡単に作成できるため、初心者でも挑戦しやすいスキルですね！
