アラートメッセージを表示する

ブラウザのアラートメッセージを表示する方法について解説します。

この記事のポイント

伝えたいメッセージを分かりやすく表示する
開発・検証時にスマホ／タブレットなどブラウザのコンソール（開発ツール）が使えないときも変数の値を確認できる

ポップアップでメッセージを表示する

ページにアクセスした人に強めに伝えたいメッセージがあるときはalertメソッドを使うとポップアップ表示することができます。

alertメソッドは次のようにテキストを渡して表示します。

CSSは次のようになります。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Test Script</title>
	<script>
		window.addEventListener('load', (event) => {
			alert("現在メンテナンス中です。\nメンテナンスは2020年4月1日 18:00に完了予定を予定しています。");
		});
	</script>
</head>
<body>
<h1>JS Test</h1>
</body>
</html>

メソッドに渡すテキストにHTMLタグは使用できないため、改行は改行コード（\n）を使います。
リンクや画像表示などもできません。

また、メッセージの表示形式はブラウザによって異なります。