閉じるボタンで閉じられるトーストの作り方
閉じるボタンで閉じられるトーストの作り方を紹介します。このサンプルでは、「トーストを表示」ボタンをクリックすると画面右下へ通知が表示され、トースト内の「閉じる」ボタンをクリックすると非表示になります。HTML・CSS・JavaScriptのみで実装でき、外部ライブラリは使用しません。
保存完了、送信完了、設定変更、エラー通知など、利用者へ短いメッセージを伝えたい場面で活用できます。自動で消えるトーストとは異なり、利用者自身が内容を確認してから閉じられるため、重要な通知や見落としてほしくないメッセージにも適しています。
通知文やボタンの文字はHTMLから変更でき、CSSではトーストの位置、背景色、文字色、余白、角丸、影などを調整できます。JavaScriptでは表示ボタンと閉じるボタンによる表示切り替えを行っています。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>閉じるボタンで閉じられるトースト</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- トースト表示エリア -->
<div class="close-button-toast_wrap">
<!-- タイトル -->
<div class="close-button-toast_title">
閉じるボタンで閉じられるトースト
</div>
<!-- 説明文 -->
<p class="close-button-toast_text">
ボタンをクリックすると画面右下へトーストが表示されます。
</p>
<!-- トースト表示ボタン -->
<button type="button" class="close-button-toast_open">
トーストを表示
</button>
</div>
<!-- トースト本体 -->
<div class="close-button-toast_message">
<!-- 通知内容 -->
<div class="close-button-toast_content">
保存しました
</div>
<!-- 閉じるボタン -->
<button type="button" class="close-button-toast_close">
閉じる
</button>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトーストを表示するボタンと通知本体を配置し、CSSでは画面右下へ表示するレイアウトや色、余白、表示アニメーションを設定します。JavaScriptでは「トーストを表示」ボタンをクリックしたときに通知を表示し、「閉じる」ボタンを押したときに非表示へ切り替える処理を行います。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはトーストのレイアウトを作成するファイルです。タイトル、説明文、表示ボタン、通知メッセージ、閉じるボタンの文字などを変更できます。
style.cssはトーストのデザインを設定するファイルです。表示位置、背景色、文字色、余白、角丸、影、ボタンのデザイン、表示アニメーションなどを変更できます。
script.jsはトーストの表示・非表示を制御するファイルです。表示ボタンを押すとトーストを表示し、閉じるボタンを押すと非表示になります。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「トーストを表示」をクリックすると画面右下へ通知が表示され、「閉じる」ボタンをクリックするとトーストを閉じられます。
カスタマイズできる内容
index.htmlではタイトル、説明文、表示ボタンの文字、通知メッセージ、閉じるボタンの文字を自由に変更できます。保存完了や送信完了、お知らせなど用途に合わせた内容へ変更できます。
style.cssではトーストの表示位置、背景色、文字色、ボタン色、余白、角丸、影、横幅、アニメーション時間を変更できます。サイトデザインに合わせて見た目を調整できます。
script.jsでは表示・非表示の処理を変更できます。必要に応じて表示条件を追加したり、他のボタンから表示するよう変更することもできます。
数値調整
style.css
max-width:700px;
サンプル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル全体の上下余白です。値を大きくすると上下の間隔が広がります。
padding:32px;
サンプル全体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。
border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなります。
padding:12px 24px;
表示ボタンの内側余白です。値を大きくするとボタン全体が大きく表示されます。
right:24px;
トーストを画面右端から配置する位置です。値を変更すると左右位置が変わります。
bottom:24px;
トーストを画面下端から配置する位置です。値を変更すると上下位置が変わります。
gap:18px;
通知メッセージと閉じるボタンの間隔です。値を大きくすると余白が広がります。
padding:14px 16px 14px 18px;
トースト本体の内側余白です。値を変更すると通知全体の大きさが変わります。
border-radius:10px;
トースト本体の角丸です。値を大きくすると丸みが強くなります。
transform:translateY(12px);
非表示時の開始位置です。12pxを大きくすると下から移動する距離が長くなります。
transition:.3s;
表示・非表示のアニメーション時間です。0.3秒で切り替わります。値を大きくするとゆっくり、小さくすると速く切り替わります。
padding:8px 14px;
閉じるボタンの内側余白です。値を変更するとボタンサイズが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅へ合わせてレイアウトが縮小されます。また、640px以下ではpadding:24px 18px;へ変更し、トーストはleft:18px;とright:18px;を使用してスマートフォン・タブレット・PCでも見やすく表示されます。
コメント