alertやアコーディオン、モーダルウィンドウを使って、ボタンを押したらメッセージを表示する方法を3つ紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います!
実装例とコード
【おまけ】画面下からフワッとメッセージを表示
ポップアップメッセージ。
ボタンをクリックすると、画面下からフワッとメッセージが表示され、3秒ほど停止して再び消えます。
コードは以下記事で公開していますので、本記事と合わせてご覧ください。
【おまけ】ボタンを立体的にする方法
思わずクリックしたくなるような、ちょっとしたアニメーション付きのボタンをCSSで実装できます。
コードは以下記事で公開していますので、本記事と合わせてご覧ください。
【ボタン1】アラートを表示させる実装方法
JavaScriptの標準機能であるalert()を使い、指定したテキストとOKボタンをもつ警告ダイアログを表示する。
3つの中ではもっとも簡単に実装できる。
『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】ボタン下にメッセージを表示させる実装方法(アコーディオン)
ボタン下にあらかじめテキストを配置しておき、ボタンのクリックで表示・非表示を切り替える。
この方法を応用し、『アコーディオンメニュー』を作ることも可能。
- HTMLに表示内容をすべて記述しておく。隠しておきたい内容には適当なclassやidを付けておく。
- 付けたclassやidに対し、CSSで「display: none;」を記述して表示を隠す。
- 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】画面中央にメッセージを表示させる実装方法(モーダルウィンドウ)
ボタンに加え、画面を暗くするためのマスクとメッセージウィンドウを用意しておき、ボタンのクリックでそれらを表示させる。
一般的に『モーダルウィンドウ』と呼ばれる方法。
- HTMLに、画面を暗くするマスクとメッセージウィンドウの2つのレイヤーを用意しておき、それらに適当なclassやidを付けておく。
- 付けたclassやidに対し、CSSで「display: none;」を記述して表示を隠す。
- 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つ紹介しました。
本記事ではメッセージ(文字列)を出したり消したりする実装でしたが、同じ方法で画像などの要素にも対応できます。
ぜひ、ご自身で応用してみてください!