HTMLでポップアップをマスター!マウスオーバー活用の8つのステップ

マウスオーバーで表示されるポップアップのサンプルイメージHTML
この記事は約10分で読めます。

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

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

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

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

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

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

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

はじめに

この記事を読めば、HTMLでマウスオーバー時にポップアップを表示させることができるようになります。

初心者でもわかりやすい解説とサンプルコードを用意していますので、ぜひ参考にしてください。

●この記事で学べること

この記事では、HTMLでマウスオーバー時にポップアップを表示させる方法を初心者目線で詳しく解説します。

また、ポップアップのカスタマイズや応用例についても紹介しますので、ぜひ参考にしてください。

●HTMLとは

HTML(Hyper Text Markup Language)は、ウェブページを作成するためのマークアップ言語です。

HTMLで書かれた文書は、ブラウザによって解釈され、ウェブページとして表示されます。

○基本構造

HTML文書は、下記のような基本構造を持っています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにコンテンツを書く -->
</body>
</html>

●ポップアップとは

ポップアップとは、ウェブページ上で一時的に表示される小さなウィンドウやメッセージボックスのことを指します。

通常、マウスオーバー(カーソルを要素の上に置く)やクリック時に表示されます。

○利点と注意点

ポップアップの利点は、情報を効果的に伝えられることです。

例えば、リンクや画像にマウスオーバーしたときに追加情報を表示させることができます。

ただし、使いすぎるとウェブページが煩雑になるため、適度に使用することが重要です。

●マウスオーバーでポップアップを表示させる方法

マウスオーバー時にポップアップを表示させる方法は、主にHTMLとCSSを使った方法とJavaScriptを使った方法の2種類があります。

○HTMLとCSSを使った実装方法

HTMLとCSSだけを使ってマウスオーバーでポップアップを表示させる方法を紹介します。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    .container {
      position: relative;
      display: inline-block;
    }
    .popup {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 10px;
      z-index: 1;
    }
    .container:hover .popup {
      display: block;
    }
  </style>
</head>
<body>
  <div class="container">
    マウスオーバーしてください
    <div class="popup">
      こんにちは!ポップアップです!
    </div>
  </div>
</body>
</html>

○JavaScriptを使った実装方法

JavaScriptを使ってマウスオーバーでポップアップを表示させる方法を紹介します。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    .popup {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 10px;
      z-index: 1;
    }
  </style>
  <script>
    function showPopup() {
      document.getElementById('popup').style.display = 'block';
    }
    function hidePopup() {
      document.getElementById('popup').style.display = 'none';
    }
  </script>
</head>
<body>
  <div onmouseover="showPopup()" onmouseout="hidePopup()">
    マウスオーバーしてください
    <div id="popup" class="popup">
      こんにちは!ポップアップです!
    </div>
  </div>
</body>
</html>

●ポップアップのカスタマイズ

ポップアップを自分の好みに合わせてカスタマイズする方法を紹介します。

デザインの変更や表示位置の調整など、様々なカスタマイズが可能です。

○デザインの変更

ポップアップのデザインは、CSSを使って変更することができます。

例えば、背景色や枠線、テキストの色やフォントなどを変更することができます。

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

<style>
  .popup {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1;
    /* 以下を追加 */
    background-color: #333;
    color: #fff;
    font-family: 'Arial', sans-serif;
    border-radius: 5px;
  }
</style>

○表示位置の調整

ポップアップの表示位置は、CSSのpositionプロパティを使って調整することができます。

例えば、要素の上や下、左や右に表示させることができます。

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

<style>
  .popup {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1;
    /* 以下を追加 */
    top: 30px; /* 要素の下に表示 */
    left: 0; /* 要素の左端に表示 */
  }
</style>

●応用例とサンプルコード

ポップアップの応用例として、ツールチップ、画像ギャラリー、FAQセクションなどがあります。

それぞれの応用例とサンプルコードを紹介します。

○ツールチップ

ツールチップは、要素にマウスオーバーすると説明文が表示されるUIです。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    .tooltip .tooltiptext {
      display: none;
      position: absolute;
      background-color: #333;
      color: #fff;
      padding: 5px;
      border-radius: 5px;
      font-size: 12px;
      z-index: 1;
    }
    .tooltip:hover .tooltiptext {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tooltip">
    マウスオーバーしてください
    <span class="tooltiptext">
      これはツールチップです!
    </span>
  </div>
</body>
</html>

○画像ギャラリー

画像ギャラリーでは、画像にマウスオーバーすると拡大表示やキャプションの表示ができます。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    .gallery {
      display: inline-block;
      position: relative;
    }
    .gallery .caption {
      display: none;
      position: absolute;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      padding: 10px;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 14px;
      text-align: center;
    }
    .gallery:hover .caption {
      display: block;
    }
  </style>
</head>
<body>
  <div class="gallery">
    <img src="example.jpg" alt="Example Image" width="300">
    <div class="caption">
      これは画像のキャプションです!
    </div>
  </div>
</body>
</html>

○FAQセクション

FAQセクションでは、質問にマウスオーバーすると回答が表示されます。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    .faq {
      display: inline-block;
      position: relative;
      cursor: pointer;
    }
    .faq .answer {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 10px;
      z-index: 1;
    }
    .faq:hover .answer {
      display: block;
    }
  </style>
</head>
<body>
  <div class="faq">
    ここに質問を書く
    <div class="answer">
      ここに回答を書く
    </div>
  </div>
</body>
</html>

まとめ

以上がマウスオーバー時にポップアップを表示するHTMLとCSSを使った実装方法、カスタマイズ方法、そして応用例とサンプルコードについての解説でした。

この記事を読めば、簡単なポップアップを作成し、それを応用してツールチップや画像ギャラリー、FAQセクションなどを実装することができるようになります。