ボタンでメッセージ表示 デザイン見本
ボタンクリックでメッセージを表示する代表的な5つの方法（ダイアログ・アコーディオン・モーダル・ポップアップ・トースト通知）をまとめて解説。それぞれの仕組みと、コピーしてすぐ使えるHTML・CSS・JSコードを掲載しています。
HTML・CSS・JSコードプレビューツール にて実装確認ができます。
5つの方式をひと目で比較
| 方式 | 背面の操作 | 画面占有度 | 自動で消える | 向いている用途 |
|---|---|---|---|---|
| ① ダイアログ | 遮断する | 小 | いいえ | 手軽なエラー通知・簡易確認 |
| ② アコーディオン | 遮断しない | 小（インライン） | いいえ | 省スペースの補足・FAQ |
| ③ モーダル | 遮断する | 大（画面中央） | いいえ | 注目させたい重要な確認 |
| ④ ポップアップ | 遮断しない | 中（画面下） | はい | 送信完了などの一時通知 |
| ⑤ トースト通知 | 遮断しない | 小（画面隅） | はい | 控えめな結果フィードバック |
※「背面の操作」は、メッセージ表示中に背後のページを操作できるかどうか。ダイアログとモーダルは背面を遮断する。さらにダイアログ（alert()）だけは、閉じるまでJavaScriptの処理そのものも止まる点が他の4方式と異なる。
どれを使えばいい？ 3つの質問で選ぶ
① ダイアログ — alert() で最も手軽に表示
<div class="alert-btn-wrap">
<button id="alert-btn">メッセージを表示</button>
</div>.alert-btn-wrap {
display: flex;
justify-content: center;
}
#alert-btn {
padding: 12px 28px;
border: none;
border-radius: 8px;
background: #3b82f6;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}var btn = document.getElementById('alert-btn');
btn.addEventListener('click', function() {
alert('ボタンがクリックされました！');
});JavaScript標準の alert() 関数に表示したい文字列を渡すだけで、OKボタン付きのダイアログを表示できます。5つの中でもっとも手軽ですが、見た目はカスタマイズできず、ブラウザの操作を一時的にブロックします。簡単な通知やエラー表示向きです。一方、複数箇所で多用するとユーザーの操作を都度止めてしまうため、日常的な通知の連発には不向きです。
② アコーディオン — ボタン下にメッセージを表示
ボタンがクリックされました！
<div class="btn-wrap">
<button id="toggle-btn">ボタン</button>
<p id="toggle-text" class="hidden">ボタンがクリックされました！</p>
</div>.btn-wrap {
text-align: center;
}
#toggle-btn {
padding: 12px 28px;
border: none;
border-radius: 8px;
background: #3b82f6;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.hidden {
display: none;
}
#toggle-text {
margin: 16px 0 0;
font-size: 14px;
color: #e11d48;
}var btn = document.getElementById('toggle-btn');
var text = document.getElementById('toggle-text');
btn.addEventListener('click', function() {
text.classList.toggle('hidden');
});表示したいテキストを最初から書いておき、CSS の display: none で隠します。ボタンのクリックで .hidden クラスを付け外しすることで表示・非表示を切り替えます。ページ内のスペースを節約でき、「もっと見る」やFAQなどに応用できます。もう一度押すとメッセージは消えます。逆に、必ず目立たせたい緊急性の高い通知には不向きです（ユーザーがボタンを押さない限り気づけません）。
③ モーダルウィンドウ — 画面中央に集中表示
ボタンがクリックされました！
<div id="modal-btn-container">
<button id="modal-btn">モーダルを表示</button>
</div>
<div id="mask"></div>
<div id="modal">
<p id="modal-txt">ボタンがクリックされました！</p>
<div id="modal-close-wrap">
<button id="modal-close">閉じる</button>
</div>
</div>#modal-btn-container {
display: flex;
justify-content: center;
}
#modal-btn {
padding: 12px 28px;
border-radius: 8px;
background: #3b82f6;
border: none;
color: #fff;
cursor: pointer;
}
#mask {
display: none;
}
#mask.appear {
display: block;
background: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
}
#modal {
display: none;
}
#modal.appear {
display: block;
background: #fff;
width: 50%;
max-width: 420px;
padding: 24px;
border-radius: 8px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
#modal-txt {
margin: 0 0 20px;
font-size: 15px;
color: #1e293b;
}
#modal-close-wrap {
display: flex;
justify-content: flex-end;
}
#modal-close {
padding: 8px 16px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #f8fafc;
cursor: pointer;
}
@media (max-width: 768px) {
#modal.appear {
width: 78%;
}
}var mask = document.getElementById('mask');
var modal = document.getElementById('modal');
var modalBtn = document.getElementById('modal-btn');
var modalClose = document.getElementById('modal-close');
function showModal() {
mask.classList.add('appear');
modal.classList.add('appear');
}
function hideModal() {
mask.classList.remove('appear');
modal.classList.remove('appear');
}
modalBtn.addEventListener('click', showModal);
mask.addEventListener('click', hideModal);
modalClose.addEventListener('click', hideModal);
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
hideModal();
}
});画面全体を覆う半透明のマスクと、メッセージ本体の2要素を用意します。マスクは position: fixed で四辺を0にして全面を暗くし、本体は top: 50%; left: 50%; transform: translate(-50%, -50%); で中央に固定します。マスクをクリックすると閉じる動きも実装でき、ユーザーの注意を引きたい確認メッセージ向きです。一方、頻繁に表示する軽い通知や、操作を止めたくない場面には不向きです（毎回ユーザーの作業を中断させてしまいます）。
④ ポップアップ — 画面下からフワッと自動表示
ボタンを押すと画面下にメッセージが現れ、自動で消えます
送信が完了しました
下からフワッと現れて自動で消えます。
<div class="pp-btn-wrap">
<button id="pp-btn">ポップアップ表示</button>
</div>
<div id="pp-popup" class="pp-popup">
<p class="pp-headline">送信が完了しました</p>
<p class="pp-body">下からフワッと現れて自動で消えます。</p>
</div>.pp-btn-wrap {
display: flex;
justify-content: center;
}
#pp-btn {
padding: 12px 28px;
border: none;
border-radius: 8px;
background: #3b82f6;
color: #fff;
cursor: pointer;
}
.pp-popup {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 9999;
opacity: 0;
visibility: hidden;
background: #fff;
border: 2px solid #3b82f6;
border-radius: 12px;
padding: 16px 28px;
min-width: 260px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}
.pp-popup.pp-active {
visibility: visible;
animation: popup 3s ease forwards;
}
.pp-headline {
margin: 0 0 4px;
font-size: 1rem;
font-weight: 700;
color: #1e40af;
}
.pp-body {
margin: 0;
font-size: 0.83rem;
color: #555;
}
@keyframes popup {
0% {
transform: translateX(-50%) translateY(20px);
opacity: 0;
}
15%, 80% {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(20px);
opacity: 0;
}
}var ppBtn = document.getElementById('pp-btn');
var ppPopup = document.getElementById('pp-popup');
ppBtn.addEventListener('click', function() {
ppPopup.className = 'pp-popup';
void ppPopup.offsetWidth;
ppPopup.className = 'pp-popup pp-active';
});
ppPopup.addEventListener('animationend', function() {
ppPopup.className = 'pp-popup';
});@keyframes でアニメーション（下から現れて一定時間後に下へ消える動き）を定義し、ボタンクリックで .pp-active クラスを付与します。forwards で終了状態を維持し、animationend イベントでクラスを外すことで、次のクリックでも同じ動きを再生できます。送信成功などの一時的な通知向きです。中央下に大きく表示されるため、複数の通知を同時に積み重ねたい場面には不向きです。なお、表示中にもう一度ボタンを押しても、すでに同じクラスが付いているためアニメーションは再生されません。上のコードのように、いったんクラスを外して offsetWidth を読み（ブラウザに今の状態を確定させる操作です）、そのうえで付け直すと最初から再生し直せます。
⑤ トースト通知 — 画面隅に控えめに一時表示
ボタンを押すと画面右上にメッセージが現れ、自動で消えます
<div class="ts-btn-wrap">
<button id="ts-btn">トースト通知を表示</button>
</div>
<div id="ts-toast" class="ts-toast">
<span class="ts-icon">✓</span>
<span class="ts-text">保存しました</span>
</div>.ts-btn-wrap {
display: flex;
justify-content: center;
}
#ts-btn {
padding: 12px 28px;
border: none;
border-radius: 8px;
background: #3b82f6;
color: #fff;
cursor: pointer;
}
.ts-toast {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
align-items: center;
gap: 8px;
opacity: 0;
visibility: hidden;
background: #22c55e;
color: #fff;
border-radius: 8px;
padding: 12px 18px;
font-size: 0.88rem;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.ts-toast.ts-active {
visibility: visible;
animation: ts-anim 3s ease forwards;
}
.ts-icon {
font-weight: 700;
}
@keyframes ts-anim {
0% {
transform: translateX(30px);
opacity: 0;
}
15%, 80% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(30px);
opacity: 0;
}
}var tsBtn = document.getElementById('ts-btn');
var tsToast = document.getElementById('ts-toast');
tsBtn.addEventListener('click', function() {
tsToast.className = 'ts-toast';
void tsToast.offsetWidth;
tsToast.className = 'ts-toast ts-active';
});
tsToast.addEventListener('animationend', function() {
tsToast.className = 'ts-toast';
});position: fixed; top: 20px; right: 20px; で画面右上に固定し、ポップアップと同じ「@keyframesで自動的に消える」仕組みを使いますが、画面中央下ではなく隅に小さく表示するのが特徴です。ユーザーの操作をまったく遮らないため、「保存しました」「コピーしました」のような結果通知に向いています。こうした用途では短い間隔で何度も呼ばれるため、上のコードのように「クラスを外す → offsetWidth を読む → 付け直す」の手順を踏んで、表示中の連打でもアニメーションを再生し直せるようにしておくのが実用的です。複数のトーストを同時に積み重ねて表示したい場合は、document.createElement() で通知のたびに要素を生成する実装に切り替えます。一方、必ず読んでほしい重要な確認には不向きです（自動で消えるため見逃される可能性があります）。
よくある質問
alert() の見た目やボタンの文言は変えられますか？
変えられません。① の alert()（および confirm()・prompt()）はブラウザ自身が描画するUIで、CSSは一切効きません。ボタンの文言（OK・キャンセル）も、表示位置も、ブラウザやOSごとに決まっていて指定できません。見た目を作り込みたい場合は、②〜⑤ のようにHTMLとCSSを自分で書く方式に切り替えてください。
「モーダル」と「ダイアログ」は何が違うのですか？
ダイアログは「ユーザーに尋ねる・知らせる小さなウィンドウ」そのものを指す言葉で、モーダルは「閉じるまで背面を操作できない」という状態を指す言葉です。つまり ① の alert() も ③ の自作ウィンドウも、どちらも「モーダルなダイアログ」にあたります。背面を操作できるものはモードレスと呼びます。なお、HTMLには標準の dialog 要素があり、showModal() で開くとマスクの自作なしにモーダル表示・Escキーで閉じる・背面へのフォーカス移動の抑止までまとめて手に入ります。
トースト通知を同時に何個も表示するにはどうすればいいですか？
⑤ のコードはHTML要素を1つだけ用意して使い回しているため、2件目は1件目を上書きしてしまいます。積み重ねて表示したい場合は、画面隅に空のコンテナを1つ置いておき、通知が発生するたびに document.createElement() で要素を作ってコンテナに追加し、animationend で自分自身を取り除く形にします。
メッセージ表示中に、背面のページがスクロールしてしまいます
マスクは画面を覆っているだけで、スクロール自体は止めません。③ のモーダルを開くときに document.body.style.overflow に ‘hidden’ を入れ、閉じるときに空文字へ戻すとスクロールを固定できます。④・⑤ のように操作を妨げないことが目的の方式では、これは行わないでください。
同じボタンを連打しても、2回目のメッセージが表示されません
④・⑤ のようにCSSアニメーションで表示する方式で起きる、よくあるつまずきです。すでに同じクラスが付いている要素に同じクラスを指定し直しても、ブラウザから見ると何も変わっていないため、アニメーションは最初から再生されません。いったんクラスを外し、その要素の offsetWidth を読んで現在の状態を確定させてから、あらためてクラスを付け直します。本ページのコピペ用コードはこの対策を済ませてあります。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
