画像付きトーストを作る方法
画像付きトーストを作る方法を紹介します。このサンプルでは、通知メッセージだけでなく画像も一緒に表示できるトーストをHTML・CSS・JavaScriptで作成します。「トーストを表示」ボタンをクリックすると画面右下に通知が表示され、画像、タイトル、メッセージをまとめて確認できます。
ECサイトで商品画像と一緒にカート追加を知らせる場合や、会員サイトでプロフィール画像付きの通知を表示する場合、管理画面でサムネイルと処理結果を知らせる場合などに利用できます。文字だけのトーストでは内容を判別しにくい場面でも、関連する画像を加えることで、何についての通知なのかを視覚的に伝えやすくなります。
トースト内の画像、タイトル、メッセージはHTMLから変更でき、CSSでは画像サイズ、トーストの横幅、余白、背景色、角丸、影などを調整できます。JavaScriptではボタンをクリックしたときにトーストを表示し、一定時間が経過すると自動で非表示にします。画面幅が狭い場合は左右の余白を確保しながら表示されるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックすると、画像付きの通知を表示します。
商品をカートへ追加しました。
「トーストを表示」をクリックすると、画面右下に画像付きトーストが表示され、3秒後に自動で非表示になります。
コードをコピーして使おう！
<!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="image-toast_demo">
<!-- タイトル -->
<div class="image-toast_title">
画像付きトースト
</div>
<!-- 説明文 -->
<p class="image-toast_text">
ボタンをクリックすると、画像付きの通知を表示します。
</p>
<!-- トースト表示ボタン -->
<button
class="image-toast_button"
id="image-toast-button"
type="button">
トーストを表示
</button>
</div>
<!-- 画像付きトースト -->
<div
class="image-toast_notice"
id="image-toast"
role="status"
aria-live="polite">
<!--
トーストに表示する画像
sample/images/ フォルダへ画像を配置し、
下記を実際の画像ファイル名へ変更してください。
-->
<img
class="image-toast_image"
src="images/image1.png"
alt="通知に表示する画像">
<!-- 通知内容 -->
<div class="image-toast_content">
<!-- 通知タイトル -->
<div class="image-toast_notice-title">
商品を追加しました
</div>
<!-- 通知メッセージ -->
<p class="image-toast_message">
商品をカートへ追加しました。
</p>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、トースト内に表示する1枚の画像で構成されています。HTMLでは画像付きトースト、通知タイトル、メッセージ、表示ボタンを配置します。CSSではトーストの位置、横幅、画像サイズ、余白、角丸、影、表示・非表示のアニメーションなどを設定し、JavaScriptではボタンをクリックしたときにトーストを表示して3秒後に自動で非表示にします。
sample/
├── index.html
├── style.css
├── script.js
└── images/
└── image1.png
各ファイルの役割
index.htmlは画像付きトースト全体を構成するファイルです。「画像付きトースト」のタイトル、説明文、「トーストを表示」のボタン、トースト内の画像、通知タイトル、通知メッセージを変更できます。画像はimages/image1.pngを読み込む構成です。
style.cssはトーストの表示位置やデザインを設定するファイルです。トーストの横幅、画面右端・下端からの位置、画像サイズ、画像と文章の間隔、背景色、枠線、角丸、影、表示時の移動量やアニメーション時間などを変更できます。
script.jsはトーストの表示・非表示を制御するファイルです。「トーストを表示」ボタンをクリックするとis-showクラスを追加し、トーストを表示します。その後、setTimeoutを使って3秒後にクラスを削除し、自動で非表示にします。
imagesフォルダにはトースト内へ表示する画像を配置します。このサンプルではimage1.pngを使用します。画像ファイル自体は利用者側で用意してください。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中にimagesフォルダを作成します。トーストへ表示する画像をimage1.pngのファイル名でimagesフォルダへ配置してください。別の画像ファイル名を使用する場合は、index.htmlのsrc="images/image1.png"も実際のファイル名へ変更します。
配置が完了したらsample/index.htmlをブラウザで開きます。「トーストを表示」ボタンをクリックすると、画面右下へ画像・通知タイトル・通知メッセージを含むトーストが表示されます。表示後は3秒経過すると自動で非表示になります。表示中にもう一度ボタンをクリックした場合は、タイマーを解除して3秒間の表示時間を最初から数え直します。
カスタマイズできる内容
index.htmlではトースト内の画像、通知タイトル、通知メッセージを変更できます。src="images/image1.png"を書き換えると表示画像を変更でき、altも画像内容に合わせて変更できます。「商品を追加しました」の部分を書き換えると通知タイトルを変更でき、「商品をカートへ追加しました。」の部分を書き換えると通知メッセージを変更できます。
「トーストを表示」のボタン文字や、デモ上部の「画像付きトースト」「ボタンをクリックすると、画像付きの通知を表示します。」の文章もindex.htmlから変更できます。ECサイトの商品追加通知だけでなく、会員サイトや管理画面など、用途に合わせた通知内容へ変更できます。
style.cssではトーストの横幅、表示位置、画像サイズ、画像と文章の間隔、内側余白、背景色、枠線、角丸、影、表示開始位置、アニメーション時間などを変更できます。script.jsでは3000の数値を変更することで、自動で非表示になるまでの時間を調整できます。
数値調整
style.css
max-width:700px;
デモ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
デモ全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
デモ全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
デモ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:12px 24px;
トースト表示ボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。
right:24px;
トーストと画面右端の間隔です。値を大きくすると左側へ移動します。
bottom:24px;
トーストと画面下端の間隔です。値を大きくすると上側へ移動します。
gap:14px;
トースト内の画像と通知内容の間隔です。値を大きくすると左右の間隔が広がります。
width:360px;
トーストの横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:14px;
トースト内側の余白です。値を大きくすると画像や文章と外枠の間隔が広がります。
border-radius:14px;
トーストの角丸です。値を大きくすると丸みが強くなります。
box-shadow:0 12px 30px rgba(15,23,42,.16);
トーストの影です。12pxや30pxを変更すると、影の位置や広がりを調整できます。
transform:translateY(20px);
非表示時のトーストの縦位置です。20pxを大きくすると、表示開始位置がさらに下側になります。
transition:0.3s;
トーストの透明度と位置が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速くなります。
width:72px;・height:72px;
トースト内へ表示する画像の大きさです。値を大きくすると画像が大きく表示されます。
border-radius:10px;
トースト画像の角丸です。値を大きくすると丸みが強くなります。
font-size:16px;
通知タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
font-size:14px;
通知メッセージの文字サイズです。値を大きくするとメッセージが大きく表示されます。
script.js
3000
トーストを表示してから自動で非表示にするまでの時間です。3000は3秒を表します。値を大きくすると表示時間が長くなり、小さくすると短くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。通常時はトーストをwidth:360px;で画面右下へ表示し、max-width:calc(100% - 48px);によって画面からはみ出さないようにしています。画面幅640px以下ではright:16px、bottom:16px、width:calc(100% - 32px)へ変更し、左右16pxの余白を確保した状態で表示します。また、デモ全体の内側余白も24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント