JavaScriptも不要！HTMLとCSSで簡単実装！ユーザーに優しいホバーテキスト

2024-05-14

HTMLとCSSだけでホバーテキストを実装する方法（ユーザーの評判のように）

必要なもの

HTMLファイル
CSSファイル

手順

HTMLでホバー対象要素を定義する

ホバーテキストを表示したい要素をHTMLで定義します。この例では、<span>要素を使用します。

<span class="hover-target">ホバーするとテキストが表示されます</span>

CSSでホバーテキストをスタイリングする

以下のCSSコードをCSSファイルに記述します。このコードは、ホバーテキストの外観を定義します。

.hover-target {
  position: relative; /* ホバーテキストを要素内に配置するために必要 */
}

.hover-target:hover {
  /* マウスカーソルが要素の上をホババーしているとき */
  cursor: pointer; /* カーソルをポインタに変更 */
}

.hover-text {
  display: none; /* 初期状態ではホバーテキストを非表示にする */
  position: absolute; /* 要素内での配置を自由に変更できるようにする */
  background-color: #FFFF00; /* 背景色を黄色に設定 */
  color: black; /* テキストの色を黒に設定 */
  padding: 5px; /* テキスト周りの余白を設定 */
  border: 1px solid black; /* 境界線を追加 */
  z-index: 100; /* 他の要素の上に表示されるようにする */
}

.hover-target:hover .hover-text {
  display: block; /* マウスカーソルが要素の上をホババーしているときホバーテキストを表示 */
}

ホバーテキストの内容を追加する

以下のコードのように、<span>要素内にホバーテキストの内容を追加します。

<span class="hover-target">ホバーするとテキストが表示されます
  <span class="hover-text">これはホバーテキストです</span>
</span>

説明

最初のCSSコードブロックは、ホバー対象要素の位置をrelativeに設定します。これは、ホバーテキストを要素内に配置するために必要です。
2番目のCSSコードブロックは、マウスカーソルが要素の上をホババーしているときのスタイルを定義します。この例では、カーソルをポインタに変更しています。
3番目のCSSコードブロックは、ホバーテキストのスタイルを定義します。この例では、背景色を黄色、テキストの色を黒、余白を5px、境界線を1pxの黒線に設定しています。また、z-indexプロパティを使用して、他の要素の上にホバーテキストが表示されるようにしています。
4番目のCSSコードブロックは、マウスカーソルが要素の上をホババーしているときにのみホバーテキストを表示するようにします。

補足

ホバーテキストの位置やスタイルは、CSSコードを編集することで自由にカスタマイズできます。
より複雑なホバーテキストを作成するには、JavaScriptを使用する必要があります。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ホバーテキスト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <span class="hover-target">ホバーするとテキストが表示されます</span>
  <script src="script.js"></script>
</body>
</html>

CSSファイル (style.css)

.hover-target {
  position: relative;
}

.hover-target:hover {
  cursor: pointer;
}

.hover-text {
  display: none;
  position: absolute;
  background-color: #FFFF00;
  color: black;
  padding: 5px;
  border: 1px solid black;
  z-index: 100;
}

.hover-target:hover .hover-text {
  display: block;
}

JavaScriptファイル (script.js)

// JavaScriptコードがあればここに記述

HTMLファイル:
- <span class="hover-target">ホバーするとテキストが表示されます</span>: ホバー対象要素を定義します。
- <link rel="stylesheet" href="style.css">: CSSファイルをインポートします。
- <script src="script.js"></script>: JavaScriptファイルをインポートします。(JavaScriptが必要な場合)
CSSファイル:
- .hover-target: ホバー対象要素のスタイルを定義します。
- .hover-target:hover: マウスカーソルが要素の上をホババーしているときのスタイルを定義します。
JavaScriptファイル:

このサンプルコードをどのように使用するか

上記のコードを3つの異なるファイル (index.html、style.css、script.js) に保存します。
ブラウザで index.html ファイルを開きます。
マウスカーソルを「ホバーするとテキストが表示されます」というテキストの上に移動すると、ホバーテキストが表示されます。

カスタマイズ

このサンプルコードは、ニーズに合わせて自由にカスタマイズできます。

ホバーテキストの色、フォント、サイズを変更するには、CSSコードを編集します。
ホバーテキストの内容を動的に変更するには、JavaScriptコードを追加します。
ホバーテキストを表示するタイミングを制御するには、CSSセレクタと擬似クラスを使用します。

ホバーテキストを実装するその他の方法

前述の方法では、CSSのみを使用してホバーテキストを実装する方法を紹介しました。しかし、JavaScriptを使用すると、より高度なホバーテキストを作成することができます。

例:

<div class="hover-container">
  <span class="hover-target">ホバーするとテキストが表示されます</span>
  <span class="hover-text">これはホバーテキストです</span>
</div>

.hover-container {
  position: relative;
}

.hover-target {
  display: inline-block;
}

.hover-text {
  display: none;
  position: absolute;
  background-color: #FFFF00;
  color: black;
  padding: 5px;
  border: 1px solid black;
  z-index: 100;
}

.hover-container:hover .hover-text {
  display: block;
}

const hoverTarget = document.querySelector('.hover-target');
const hoverText = document.querySelector('.hover-text');

hoverTarget.addEventListener('mouseover', () => {
  hoverText.style.display = 'block';
});

hoverTarget.addEventListener('mouseout', () => {
  hoverText.style.display = 'none';
});

この方法の利点:

ホバーテキストの内容を動的に変更できます。
アニメーションなどの高度なエフェクトを追加できます。

JavaScriptを使用する必要があるため、難易度が高くなります。
コードが冗長になる可能性があります。

ツールチップライブラリを使用する方法

ホバーテキストを実装するためのもう1つの方法は、ツールチップライブラリを使用することです。ツールチップライブラリは、ホバーテキストの作成と管理を容易にする多くの機能を提供します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ホバーテキスト</title>
  <link rel="stylesheet" href="https://unpkg.com/tippy.js/dist/tippy.css">
  <script src="https://unpkg.com/tippy.js/dist/tippy.min.js"></script>
</head>
<body>
  <span data-tippy="これはホバーテキストです">ホバーするとテキストが表示されます</span>
  <script>
    tippy('[data-tippy]');
  </script>
</body>
</html>