【JavaScript&CSS】ボタンを押したらメッセージを表示する方法4選

2023年8月16日

【メイン画像】JavaScriptとCSSを使って、クリックでメッセージを表示する方法4選

以下のような、ボタンクリック(タップ)でメッセージを表示する方法を紹介します。

アラート

OKボタン付きのダイアログボックスを表示。

実装方法はこちら

アコーディオン

ボタン下にメッセージを表示。
もう一度ボタンをクリックすると消える。

実装方法はこちら

モーダルウィンドウ

ボタンをクリックすると画面が暗くなり、画面中央にメッセージを表示。
暗い部分をクリックすると元の画面に戻る。

実装方法はこちら

ポップアップメッセージ

ボタンをクリックすると、画面下からフワッとメッセージが表示される。
メッセージは3秒後に消える。

実装方法はこちら

【ボタン１】アラートを表示させる実装コード

JavaScriptの標準機能であるalert()関数を使うことで、指定したテキストとOKボタンをもつ警告ダイアログを表示できる。
4つの中ではもっとも簡単に実装できる。

alert()について

alert(表示させたい内容)と記述することで、画面上部にポップアップを表示させる。
表示させたい内容が文字列の場合、”で囲むことを忘れないように。

JavaScriptには、alert()関数以外にダイアログボックスを表示する関数が2つ用意されています。

「OK」「キャンセル」を選択できるconfirm()関数
テキストを入力できるprompt()関数

詳しくは以下記事で、実装例やコードを公開しています。

【JavaScript】ダイアログボックス表示方法まとめ

HTML / CSS / JavaScript コード

<div class="btn-container">
  <button id="btn1">ボタン１</button>
</div>

.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;

  /* ボタンにカーソルを当てると、カーソルがポインターに変わる */
  cursor: pointer;
}

/* ボタンにカーソルを当てたとき、ボタンを半透明にする */
button:hover {
 opacity: 0.7;
}

const btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
  alert('ボタン１がクリックされました！');
});

【ボタン２】ボタン下にメッセージを表示させる実装コード（アコーディオン or インページ通知）

ボタン下にあらかじめテキストを配置しておき、ボタンのクリックで表示・非表示を切り替える。
この方法を応用し、『アコーディオンメニュー』を作ることも可能。

アコーディオン（インページ通知）表示の仕組み

HTMLに表示内容をすべて記述しておく。隠しておきたい内容には適当なclassやidを付けておく。
付けたclassやidに対し、CSSでdisplay: none;を記述して表示を隠す。
JavaScriptで、クリックされたときにそのclassやidを付け外しする。

「もっと見る」などのよく見るUIも、同様の方法で実装できます。

【JavaScript】「もっと見る」ボタンの実装方法（アコーディオン）

【CSS】「もっと見る」ボタンの実装方法

HTML / CSS / JavaScript コード

<div class="btn-container">
  <button id="btn2">ボタン２</button>

  <!-- クリックで表示させるテキストにはhiddenクラスを付ける -->
  <p id="btn2-text" class="hidden">ボタン２がクリックされました！</p>
</div>

.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;

  /* ボタンにカーソルを当てると、カーソルがポインターに変わる */
  cursor: pointer;
}

/* ボタンにカーソルを当てたとき、ボタンを半透明にする */
button:hover {
 opacity: 0.7;
}

/* クリックで表示させるテキストを隠す */
.hidden {
  display: none;
}

#btn2-text{
  margin: 16px 0;
  font-size: 14px;
  color: red;
}

const btn2 = document.getElementById('btn2');
const btn2Text = document.getElementById('btn2-text');

btn2.addEventListener('click', () => {
  // ボタンクリックでhiddenクラスを付け外しする
  btn2Text.classList.toggle('hidden');
});

【ボタン３】画面中央にメッセージを表示させる実装コード（モーダルウィンドウ）

ボタンに加え、画面を暗くするためのマスクとメッセージウィンドウを用意しておき、ボタンのクリックでそれらを表示させる。
一般的に『モーダルウィンドウ』と呼ばれる方法。

モーダルウィンドウの仕組み

HTMLに、画面を暗くするマスクとメッセージウィンドウの2つのレイヤーを用意しておき、それらに適当なclassやidを付けておく。
付けたclassやidに対し、CSSでdisplay: none;を記述して表示を隠す。
JavaScriptで、クリックされたときにそのclassやidが付け外しされるようにする。

基本的な仕組みは、先述のアコーディオン（インページ通知）と同じです。

HTML / CSS / JavaScript コード

<div class="btn-container">
  <button id="btn3">ボタン３</button>
</div>
<div id="mask" class="hidden"></div>
<section id="modal" class="hidden">
  <p>ボタン３がクリックされました！</p>
</section>

画面を暗くするmaskとメッセージウィンドウであるmodalを記述しておき、それぞれにクラス属性(hidden)を付けておく。

.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;

  /* ボタンにカーソルを当てると、カーソルがポインターに変わる */
  cursor: pointer;
}

/* ボタンにカーソルを当てたとき、ボタンを半透明にする */
button:hover {
 opacity: 0.7;
}

.hidden {
  display: none;
}

#mask {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
  background: #fff;
  width: 50%;
  padding: 24px;
  border-radius: 4px;
  color: red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: 0 auto;
  z-index: 2;
}

#maskはposition: fixed;とし、 top・bottom・right・leftをすべて0にすると、マスクの領域（暗い部分）が画面全体に広がる。
#modalもposition: fixed;とし、表示位置をtop・right・leftで画面中央にくるよう調整。
また、z-indexを一番大きい値（ここでは2）とすることで、メッセージウィンドウが画面の前面にくるようになる。

const btn3 = document.getElementById('btn3');
const mask = document.getElementById('mask');
const modal = document.getElementById('modal');

btn3.addEventListener('click', () => {
  mask.classList.remove('hidden');
  modal.classList.remove('hidden');
});

mask.addEventListener('click', () => {
  mask.classList.add('hidden');
  modal.classList.add('hidden');
});

ボタンをクリックすると、マスクとメッセージウィンドウからhiddenクラスが外れて画面に表示される。
マスク部分（暗い部分）をクリックすると、逆にマスクとメッセージウィンドウにhiddenクラスが追加され、非表示になる。

【ボタン４】画面下からフワッとメッセージを表示させる実装コード（ポップアップメッセージ）

画面下にあらかじめメッセージボックスを配置しておき、ボタンクリックでメッセージボックスの表示＆アニメーションを作動させる。

ポップアップメッセージの仕組み

ポップアップ表示のような複雑なアニメーションには、CSSプロパティの@keyframesを使う。
キーフレーム毎に適用したいCSSプロパティを指定することで、連続したアニメーションを設定できる。

詳細は以下記事で紹介しています。

【Javascript&CSS】ポップアップメッセージの作り方

HTML / CSS / JavaScript コード

<div class="btn-container">
  <button id="btn4">ボタン４</button>
</div>
<p id="btn4-text" class="hidden">ボタン４がクリックされました！</p>

.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;

  /* ボタンにカーソルを当てると、カーソルがポインターに変わる */
  cursor: pointer;
}

/* ボタンにカーソルを当てたとき、ボタンを半透明にする */
button:hover {
 opacity: 0.7;
}

/* ポップアップメッセージを隠す */
.hidden {
  display: none;
}

/* ポップアップメッセージを画面右下に配置 */
#btn4-text {
  height: 72px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #ddd;
  font-weight: bold;
  text-align: center;
  line-height: 72px;
  position: fixed;
  right: 5%;
  bottom: 10%;
}

/* ポップアップアニメーションを3秒かけて実行 */
.popup-message {
  animation: popup 3s forwards;
}

@keyframes popup {
  0% {
    transform: translateY(15%);
    opacity: 0;
  }
  10%, 90% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(15%);
    opacity: 0;
    pointer-events: none;
  }
}

@keyframesでpopupというアニメーションを設定。
- 最初(0%)はtransform: translateY(15%);で画面下側に配置しておく。
- transform: none;で元の位置に戻してしばらくそのまま（10〜90%）。
- 最後(100%)は再びtransform: translateY(15%);で画面下側に戻す。
  - opacityもいっしょに設定しておくことで、下からフワッと出て再びフワッと下に消えるようなアニメーションになる。
JavaScriptで、このアニメーションを設定したクラス（popup-message）をボタンクリックで付け外しする。

const btn4Text = document.getElementById('btn4-text');
const btn4 = document.getElementById('btn4');

btn4.addEventListener('click', () => {
  btn4Text.classList.remove('hidden');
  btn4Text.classList.add('popup-message');
});

btn4Text.addEventListener('animationend', () => {
  btn4Text.classList.remove('popup-message');
  btn4Text.classList.add('hidden');
});

まとめ

以上、ボタンをクリックすることでメッセージを表示させる具体的な方法を4つ紹介しました。

本記事ではメッセージ（文字列）を出したり消したりする実装でしたが、同じ方法で画像などの要素にも対応できます。
ぜひ、ご自身で応用してみてください！

【発展】ボタンを立体的にする方法

思わずクリックしたくなるような、ちょっとしたアニメーション付きのボタンをCSSで実装できます。

コードは以下記事で公開していますので、本記事と合わせてご覧ください。

【CSS】押し込まれるような立体的なボタンを作る

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。