HTMLでポップアップ画像を簡単実装!使い方・カスタマイズ方法6選

HTMLで作成されたポップアップ画像のサンプル HTML
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、HTMLでポップアップ画像を作成・カスタマイズする方法が簡単に理解できます。

さらに、注意点や対処法もご紹介しますので、初心者でも安心して取り組めます。

●HTMLでポップアップ画像を作成する方法

HTMLでポップアップ画像を作成するには、あなたが思っているよりもたくさん方法があります。

下記では3つの代表的な方法を紹介します。

○方法1:シンプルなポップアップ画像

まずは、シンプルなポップアップ画像の作り方を紹介します。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<style>
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.popup .imgPopup {
  visibility: hidden;
  width: 300px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  z-index: 1;
  position: absolute;
}

.popup:hover .imgPopup {
  visibility: visible;
}
</style>
</head>
<body>

<div class="popup">
  ポップアップ画像を表示
  <span class="imgPopup">
    <img src="sample.jpg" alt="サンプル画像" width="300px">
  </span>
</div>

</body>
</html>

このコードは、テキストにマウスオーバーすると、画像がポップアップ表示される仕組みです。

CSSでポップアップ画像のスタイルを定義しています。

○方法2:クリックで表示・非表示

次に、クリックでポップアップ画像を表示・非表示にする方法です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<style>
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.popup .imgPopup {
  display: none;
  width: 300px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  z-index: 1;
  position: absolute;
}
</style>
<script>
function togglePopup() {
  var popup = document.getElementById("imgPopup");
  popup.style.display = (popup.style.display === 'none') ? 'block' : 'none';
}
</script>
</head>
<body>

<div class="popup" onclick="togglePopup()">
  ポップアップ画像を表示
  <span class="imgPopup" id="imgPopup">
    <img src="sample.jpg" alt="サンプル画像" width="300px">
  </span>
</div>

</body>
</html>

このコードでは、JavaScriptを使用してクリック時にポップアップ画像の表示・非表示を切り替えています。

○方法3:マウスオーバーで表示・非表示

最後に、マウスオーバーでポップアップ画像を表示・非表示にする方法です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<style>
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.popup .imgPopup {
  display: none;
  width: 300px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  z-index: 1;
  position: absolute;
}
</style>
<script>
function showPopup() {
  document.getElementById("imgPopup").style.display = 'block';
}

function hidePopup() {
  document.getElementById("imgPopup").style.display = 'none';
}
</script>
</head>
<body>

<div class="popup" onmouseover="showPopup()" onmouseout="hidePopup()">
  ポップアップ画像を表示
  <span class="imgPopup" id="imgPopup">
    <img src="sample.jpg" alt="サンプル画像" width="300px">
  </span>
</div>

</body>
</html>

このコードでは、マウスオーバーでポップアップ画像が表示され、マウスが外れると非表示になる仕組みを実装しています。

JavaScriptを使って、マウスオーバーとマウスアウトのイベントに対応した関数を定義しています。

●ポップアップ画像のカスタマイズ方法

次に、ポップアップ画像のカスタマイズ方法を3つ紹介します。

○カスタマイズ例1:ポップアップ画像の大きさを変更

ポップアップ画像の大きさを変更するには、CSSの.imgPopup imgセレクタのwidthプロパティを調整します。

例えば、下記のように変更すると、画像の幅が200pxになります。

.imgPopup img {
  width: 200px;
}

○カスタマイズ例2:ポップアップ画像の位置を調整

ポップアップ画像の位置を調整するには、CSSの.imgPopupセレクタのtopleftプロパティを変更します。

例えば、下記のように変更すると、画像が右側に表示されます。

.imgPopup {
  top: 0;
  left: 100%;
}

○カスタマイズ例3:ポップアップ画像の表示アニメーション

ポップアップ画像にアニメーションを追加するには、CSSのtransitionプロパティを利用します。

例えば、下記のように変更すると、画像がフェードイン・フェードアウトするようになります。

.imgPopup {
  opacity: 0;
  transition: opacity 0.3s;
}

.popup:hover .imgPopup {
  opacity: 1;
}

これらのカスタマイズ方法を組み合わせることで、より魅力的なポップアップ画像を実装できます。

ぜひ、自分のサイトに合わせて試してみてください。

まとめ

この記事では、HTMLとCSSを使ってポップアップ画像を実装する方法を紹介しました。

マウスオーバーやクリックで表示・非表示にする方法、さらにカスタマイズ方法をご紹介しました。

これで、あなたもポップアップ画像を簡単に作成できるようになりました。

ぜひ、自分のウェブサイトやブログで活用して、訪問者に素敵な体験を提供してください。