×ボタンで閉じられるトーストの作り方
×ボタンで閉じられるトーストの作り方を紹介します。このサンプルでは、「トーストを表示」ボタンをクリックすると画面右下へ通知が表示され、通知内の×ボタンをクリックするとトーストを閉じられます。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="x-button-toast_wrap">
<!-- タイトル -->
<div class="x-button-toast_title">
×ボタンで閉じられるトースト
</div>
<!-- 説明文 -->
<p class="x-button-toast_text">
ボタンをクリックすると画面右下へトーストが表示されます。
</p>
<!-- トースト表示ボタン -->
<button type="button" class="x-button-toast_open">
トーストを表示
</button>
</div>
<!-- トースト本体 -->
<div class="x-button-toast_message">
<!-- 通知内容 -->
<div class="x-button-toast_content">
保存しました
</div>
<!-- ×ボタン -->
<button
type="button"
class="x-button-toast_close"
aria-label="トーストを閉じる">
×
</button>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルは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;
サンプル全体の最大横幅です。値を大きくすると全体が横へ広がり、小さくするとコンパクトになります。
padding:32px;
サンプル全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
right:24px;
トーストを画面右端から配置する距離です。値を変更すると左右位置が変わります。
bottom:24px;
トーストを画面下端から配置する距離です。値を変更すると上下位置が変わります。
padding:14px 14px 14px 18px;
トースト内部の余白です。値を大きくすると通知全体にゆとりが生まれます。
gap:18px;
通知メッセージと×ボタンの間隔です。値を大きくすると離れ、小さくすると近付きます。
border-radius:10px;
トースト本体の角丸です。値を大きくすると丸みが強くなります。
width:32px;
×ボタンの横幅です。値を変更するとボタンサイズが変わります。
height:32px;
×ボタンの高さです。横幅と同じ値にすると円形を維持できます。
font-size:22px;
×記号の文字サイズです。値を大きくすると押しやすく、小さくすると控えめな表示になります。
transform:translateY(12px);
非表示時に下へ移動する距離です。値を大きくすると表示アニメーションの移動量が増えます。
transition:.3s;
表示・非表示が切り替わる時間です。0.3秒でアニメーションします。値を大きくするとゆっくり、小さくすると素早く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせてレイアウトが調整されます。また、640px以下では余白やトーストの左右位置を変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント