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

ボタンを押したらメッセージが表示される3つの方法

alertやアコーディオン、モーダルウィンドウを使って、ボタンを押したらメッセージを表示する方法を3つ紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います!

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例とコード

画面にアラートを表示。

実装方法はこちら

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

実装方法はこちら

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

実装方法はこちら

【おまけ】画面下からフワッとメッセージを表示

ポップアップメッセージ。
ボタンをクリックすると、画面下からフワッとメッセージが表示され、3秒ほど停止して再び消えます。

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

【おまけ】ボタンを立体的にする方法

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

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

【ボタン1】アラートを表示させる実装方法

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

alert()について

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

HTML / CSS / JavaScript コードはこちら
<div class="btn-container">
  <button id="btn1">ボタン1</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;
}
  • ボタンをクリックできることが直感的にわかるよう、ボタンにカーソルを持っていくとポインターに変わり、ボタン全体が半透明になるCSS。
const btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
  alert('ボタン1がクリックされました!');
});
  • ボタンをクリック(click)するとalert()が起動し、alertの(”)で囲まれたテキストが表示される。
【おまけ】alert()以外にも特殊なウィンドウを表示できる

confirm()

「OK」と「Cancel」を選ぶウィンドウを表示

JavaScript コードはこちら
const btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
  confirm('ボタン「Confirm」がクリックされました!');
});

HTMLとCSSはalert()と同じです。

prompt()

テキストを入力できるウィンドウを表示

JavaScript コードはこちら
const btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
  prompt('好きな文章を入力できます!');
});

HTMLとCSSはalert()と同じです。


【ボタン2】ボタン下にメッセージを表示させる実装方法(アコーディオン)

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

アコーディオン表示の仕組み
  1. HTMLに表示内容をすべて記述しておく。隠しておきたい内容には適当なclassやidを付けておく。
  2. 付けたclassやidに対し、CSSで「display: none;」を記述して表示を隠す。
  3. JavaScriptで、クリックされたときにそのclassやidを付け外しする。

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

HTML / CSS / JavaScript コードはこちら
<div class="btn-container">
  <button id="btn2">ボタン2</button>
  <p id="btn2-text" class="hidden">ボタン2がクリックされました!</p>
</div>
  • 事前に表示したいメッセージも記述しておき、クラス属性(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;
}

#btn2-text{
  margin: 16px 0;
  font-size: 14px;
  color: red;
}
  • ボタンをクリックできることが直感的にわかるよう、ボタンにカーソルを持っていくとポインターに変わりボタン全体が半透明になるCSS。
  • hiddenクラスを『display: none;』としておくことで、hiddenクラスが付いた要素は非表示になる。JavaScriptでこのクラスを付け外しすることで、表示・非表示を切り替える。
const btn2 = document.getElementById('btn2');
const btn2Text = document.getElementById('btn2-text');

btn2.addEventListener('click', () => {
  btn2Text.classList.toggle('hidden');
});
  • ボタンをクリックすると、テキストにhiddenクラスが付いていればhiddenクラスが外れ、付いていなければ付くようになる。
  • 条件分岐でclassList.addとclassList.removeを使ってもOKだが、単にクラスを付け外しするだけならtoggleの方が簡単。

【ボタン3】画面中央にメッセージを表示させる実装方法(モーダルウィンドウ)

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

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

基本的な仕組みは、先述のアコーディオン表示と同じですね。

HTML / CSS / JavaScript コードはこちら
<div class="btn-container">
  <button id="btn3">ボタン3</button>
</div>
<div id="mask" class="hidden"></div>
<section id="modal" class="hidden">
  <p>ボタン3がクリックされました!</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: 10%;
  right: 10%;
  text-align: center;
  margin: 0 auto;
  z-index: 2;
}
  • ボタンをクリックできることが直感的にわかるよう、ボタンにカーソルを持っていくとポインターに変わり、ボタン全体が半透明になるCSS。
  • hiddenクラスを『display: none;』としておくことで、hiddenクラスが付いた要素は非表示になる。JavaScriptでこのクラスを付け外しすることで、表示・非表示を切り替える。
  • #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クラスが追加され、非表示になる。

まとめ

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次