ESCキーで閉じられるトーストの作り方
ESCキーで閉じられるトーストを作る方法を紹介します。このサンプルでは、ボタンをクリックすると画面右下へトースト通知を表示し、キーボードのESCキーを押すことで通知を閉じられる機能を実装します。マウスで閉じるボタンを押す必要がなく、キーボード操作だけで素早く通知を非表示にできるため、作業を中断せずに利用しやすいトーストを作成できます。
保存完了や更新完了、送信完了などの通知を表示する管理画面、ECサイトの商品登録画面、会員サイトのプロフィール編集、お問い合わせフォームなど、さまざまなWebサイトで利用できます。通知内容を確認したあと、ESCキーを押すだけで閉じられるため、マウス操作を減らしたい場面にも適しています。トーストは画面右下へ表示されるため、ページ全体のレイアウトを崩さず自然に通知できます。
タイトルや説明文、表示ボタン、通知メッセージはHTMLから変更でき、CSSでは表示位置、背景色、文字色、余白、角丸、影、アニメーションなどを自由に調整できます。JavaScriptではESCキーを押したときだけ通知を閉じるシンプルな処理を実装しているため、初心者でも仕組みを理解しやすく、用途に合わせてカスタマイズしやすいサンプルです。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックするとトーストが表示されます。表示中にESCキーを押すと閉じられます。
「トーストを表示」をクリックすると画面右下へ通知が表示されます。表示中にESCキーを押すとトーストが閉じる動作を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>ESCキーで閉じられるトースト</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 全体 -->
<div class="esc-close-toast_wrap">
<!-- タイトル -->
<div class="esc-close-toast_title">
ESCキーで閉じられるトースト
</div>
<!-- 説明文 -->
<p class="esc-close-toast_text">
ボタンをクリックするとトーストが表示されます。表示中にESCキーを押すと閉じられます。
</p>
<!-- 表示ボタン -->
<button class="esc-close-toast_button" type="button">
トーストを表示
</button>
</div>
<!-- トースト -->
<div class="esc-close-toast_message">
保存しました
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトーストの表示領域と表示ボタンを配置し、CSSではトーストのデザインや表示位置、表示・非表示時のアニメーションを設定しています。JavaScriptではトーストの表示処理と、ESCキーを押したときにトーストを閉じる処理を実装しています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはトーストの表示ボタンと通知メッセージを配置するファイルです。タイトル、説明文、ボタン名、トーストへ表示するメッセージを変更できます。
style.cssはレイアウトやボタン、トーストのデザインを設定するファイルです。背景色、文字色、表示位置、余白、角丸、影、表示アニメーションなどを変更できます。
script.jsはボタンをクリックしたときにトーストを表示し、ESCキーが押されたときにトーストを閉じる処理を行います。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置してください。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開くと利用できます。「トーストを表示」をクリックすると通知が表示され、表示中にESCキーを押すとトーストが閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、表示ボタンの文字、トーストの通知メッセージを変更できます。用途に合わせて「保存しました」「送信しました」「削除しました」など自由な内容へ変更できます。
style.cssではトーストの背景色、文字色、角丸、余白、影、表示位置、ボタンのデザインなどを変更できます。script.jsではESCキーで閉じる動作を自由に編集できるため、用途に合わせたキーボード操作へ変更することもできます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。値を変更すると画面上下の余白が変わります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広くなります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなります。
font-size:22px;
タイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。
padding:12px 24px;
ボタンの内側余白です。値を変更するとボタン全体の大きさが変わります。
right:24px;
トーストを画面右端から表示する位置です。値を大きくすると左側へ移動します。
bottom:24px;
トーストを画面下端から表示する位置です。値を大きくすると上側へ移動します。
padding:14px 18px;
トーストの内側余白です。値を変更すると通知全体のサイズが変わります。
border-radius:10px;
トーストの角丸です。値を大きくすると丸みが強くなります。
box-shadow:0 12px 30px ...
トーストの影です。12pxや30pxを変更すると影の広がりや濃さが変わります。
transform:translateY(12px);
表示前に下へ移動している距離です。値を大きくすると表示開始位置がさらに下になります。
transition:.3s;
表示・非表示が切り替わる時間です。0.3秒で切り替わります。値を大きくするとゆっくり、小さくすると素早く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって画面幅に合わせて縮小表示されます。また、640px以下ではpadding:24px 18px;へ変更することでスマートフォンでも見やすいレイアウトになります。トーストは固定表示のため、スマートフォン・タブレット・PCで同じ操作感で利用できます。
コメント