読み込み中...

JavaScriptを使ってマウスオーバーでテキスト表示！初心者向け8つのステップ

JavaScriptを使ったマウスオーバーでテキスト表示のサンプルコード JS
2023.04.19
この記事は約13分で読めます。

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

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

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

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

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

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

はじめに

この記事を読めば、JavaScriptを使ってマウスオーバー時にテキストを表示する方法が身につくでしょう。

JavaScriptが初めての方でも、わかりやすく解説しているので安心してください。

●JavaScriptとは

JavaScriptは、Webページに動的な要素を追加するためのプログラミング言語です。

これを使うことで、マウスオーバーやクリックなどのイベントに応じてテキストを表示・非表示にすることができます。

●マウスオーバーでテキスト表示の基本

まずは、マウスオーバーでテキスト表示を実装するために必要な基本要素を理解しましょう。

○HTMLの構造

HTML（HyperText Markup Language）は、ウェブページの構造を定義するマークアップ言語です。

HTMLでは、要素（タグ）を使ってコンテンツを構造化します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>マウスオーバーでテキスト表示</title>
</head>
<body>
    <h1>マウスオーバーでテキスト表示</h1>
    <!-- マウスオーバー対象の要素 -->
    <div id="target">マウスオーバーしてください</div>
    <!-- テキスト表示用の要素 -->
    <div id="text" style="display:none;">こんにちは！</div>
</body>
</html>

このコードでは、<div>タグを使って2つの要素を作成しています。1つ目の要素はマウスオーバー対象で、2つ目の要素は表示するテキストです。

style="display:none;"と記述することで、最初は非表示にしています。

○CSSの基本

CSS（Cascading Style Sheets）は、ウェブページのデザインを制御するための言語です。

HTMLとCSSを組み合わせることで、ウェブページの見た目を整えることができます。

/* マウスオーバー対象の要素のスタイル */
#target {
    border: 1px solid black;
    padding: 10px;
    cursor: pointer;
}

/* テキスト表示用の要素のスタイル */
#text {
    color: red;
    font-size: 18px;
}

このCSSファイルでは、#targetと#textに対してスタイルを定義しています。

#記号は、HTML要素のID属性に対してスタイルを適用することを意味します。

○JavaScriptの基本

JavaScriptは、ウェブページに動的な機能を追加するためのプログラミング言語です。

HTMLとCSSでデザインしたウェブページに、イベント（クリックやマウスオーバーなど）に応じた動作を追加することができます。

// マウスオーバー時にテキストを表示する関数
function showText() {
    var textElement = document.getElementById("text");
    textElement.style.display = "block";
}

// マウスアウト時にテキストを非表示にする関数
function hideText() {
    var textElement = document.getElementById("text");
    textElement.style.display = "none";
}

●マウスオーバーでテキスト表示の実装

このチュートリアルでは、マウスオーバー時にテキストを表示し、マウスアウト時に非表示にする機能を実装します。

○ステップ1：HTMLファイルの準備

最初に、次のHTMLコードを使用して、マウスオーバー対象の要素とテキスト表示用の要素を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>マウスオーバーでテキスト表示</title>
</head>
<body>
    <h1>マウスオーバーでテキスト表示</h1>
    <!-- マウスオーバー対象の要素 -->
    <div id="target">マウスオーバーしてください</div>
    <!-- テキスト表示用の要素 -->
    <div id="text" style="display:none;">こんにちは！</div>
</body>
</html>

○ステップ2：CSSファイルの準備

次に、次のCSSコードを使用して、マウスオーバー対象の要素とテキスト表示用の要素のスタイルを設定します。

/* マウスオーバー対象の要素のスタイル */
#target {
    border: 1px solid black;
    padding: 10px;
    cursor: pointer;
}

/* テキスト表示用の要素のスタイル */
#text {
    color: red;
    font-size: 18px;
}

○ステップ3：JavaScriptファイルの準備

次のJavaScriptコードを使用して、マウスオーバー時とマウスアウト時の関数を作成します。

// マウスオーバー時にテキストを表示する関数
function showText() {
    var textElement = document.getElementById("text");
    textElement.style.display = "block";
}

// マウスアウト時にテキストを非表示にする関数
function hideText() {
    var textElement = document.getElementById("text");
    textElement.style.display = "none";
}

○ステップ4：マウスオーバー時にテキストを表示する関数の作成

次のJavaScriptコードを使用して、マウスオーバー時にテキストを表示する関数showTextを作成します。

// マウスオーバー時にテキストを表示する関数
function showText() {
    // テキスト表示用の要素を取得
    var textElement = document.getElementById("text");
    // 要素を表示するために、displayプロパティをblockに設定
    textElement.style.display = "block";
}

この関数では、getElementByIdメソッドを使用してテキスト表示用の要素（id="text"）を取得し、style.displayプロパティを”block”に設定して表示します。

○ステップ5：マウスアウト時にテキストを非表示にする関数の作成

次のJavaScriptコードを使用して、マウスアウト時にテキストを非表示にする関数hideTextを作成します。

// マウスアウト時にテキストを非表示にする関数
function hideText() {
    // テキスト表示用の要素を取得
    var textElement = document.getElementById("text");
    // 要素を非表示にするために、displayプロパティをnoneに設定
    textElement.style.display = "none";
}

この関数では、getElementByIdメソッドを使用してテキスト表示用の要素（id="text"）を取得し、style.displayプロパティを”none”に設定して非表示にします。

○ステップ6：イベントリスナーの設定

次のJavaScriptコードを使用して、マウスオーバー対象の要素にイベントリスナーを設定します。

// マウスオーバー対象の要素を取得
var targetElement = document.getElementById("target");

// マウスオーバーイベントのリスナーを設定
targetElement.addEventListener("mouseover", showText);

// マウスアウトイベントのリスナーを設定
targetElement.addEventListener("mouseout", hideText);

○ステップ7：HTMLにイベントを追加

ステップ6で作成したイベントリスナーをHTMLファイルに追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>マウスオーバーでテキスト表示</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <h1>マウスオーバーでテキスト表示</h1>
    <!-- マウスオーバー対象の要素 -->
    <div id="target">マウスオーバーしてください</div>
    <!-- テキスト表示用の要素 -->
    <div id="text" style="display: none;">テキストが表示されました！</div>
</body>
</html>

ここでは、<div id="target">マウスオーバーしてください</div>がマウスオーバー対象の要素であり、<div id="text" style="display: none;">テキストが表示されました！</div>が表示・非表示を切り替えるテキスト要素です。

○ステップ8：テスト

これで実装が完了しました。ブラウザでHTMLファイルを開いて動作を確認しましょう。

マウスオーバー時にテキストが表示され、マウスアウト時に非表示になることを確認してください。

●カスタマイズ例とサンプルコード

下記の例では、さらにカスタマイズを行う方法をご紹介します。

○例1：テキストのデザイン変更

テキストのデザインを変更するには、style.cssでテキスト表示用の要素（#text）に対してスタイルを指定します。

#text {
    font-size: 24px;
    color: red;
    font-weight: bold;
}

○例2：テキスト表示位置の調整

テキスト表示用の要素の位置を調整するには、style.cssでpositionプロパティやtop、leftプロパティを使用して指定します。

#text {
    position: absolute;
    top: 50px;
    left: 50px;
}

○例3：テキスト表示のアニメーション追加

テキスト表示にアニメーションを追加するには、style.cssでtransitionプロパティを指定します。

#text {
    opacity: 0;
    transition: opacity 0.5s;
}

#text.visible {
    opacity: 1;
}

これに伴い、JavaScriptコードも少し修正する必要があります。

// script.js
function showText() {
    var textElement = document.getElementById("text");
    textElement.classList.add("visible");
}

function hideText() {
    var textElement = document.getElementById("text");
    textElement.classList.remove("visible");
}

○例4：テキスト内容の動的変更

異なる要素にマウスオーバーしたときに、表示されるテキスト内容を動的に変更することもできます。

<!-- HTML -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>マウスオーバーでテキスト表示</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <h1>マウスオーバーでテキスト表示</h1>
    <!-- マウスオーバー対象の要素 -->
    <div class="target" data-text="テキスト1">マウスオーバーしてください（テキスト1）</div>
    <div class="target" data-text="テキスト2">マウスオーバーしてください（テキスト2）</div>
    <!-- テキスト表示用の要素 -->
    <div id="text" style="display: none;"></div>
</body>
</html>
// script.js
function showText(event) {
    var textElement = document.getElementById("text");
    textElement.textContent = event.target.dataset.text;
    textElement.style.display = "block";
}

function hideText() {
    var textElement = document.getElementById("text");
    textElement.style.display = "none";
}

var targetElements = document.getElementsByClassName("target");

for (var i = 0; i < targetElements.length; i++) {
    targetElements[i].addEventListener("mouseover", showText);
    targetElements[i].addEventListener("mouseout", hideText);
}

このように、data-text属性を使用して、マウスオーバー対象の要素に表示するテキスト内容を指定します。

●注意点

  • マウスオーバー時にテキストがすぐに消えてしまう場合は、マウスアウトイベントが誤って発火している可能性があります。
    イベントリスナーの設定を見直してください。
  • テキスト表示のアニメーションがうまく動作しない場合は、CSSのtransitionプロパティの指定やJavaScriptのコードを確認してください。

まとめ

マウスオーバーでテキスト表示の実装は、HTML、CSS、およびJavaScriptを組み合わせて行います。

注意点と対処法を確認し、実装の改善やトラブルシューティングを行うことができます。

このチュートリアルを参考に、マウスオーバーでテキスト表示機能を自分のプロジェクトに適用してみてください。