どのように作成するか：Snackbar / Toast

CSSとJavaScriptを使用してSnackbar/Toastを作成する方法を学びます。

Snackbarを作成

第1ステップ - HTMLを追加：

<!-- ボタンでsnackbarを開く -->
<button onclick="myFunction()">Snackbarを表示</button>
<!-- 実際のsnackbar -->
<div id="snackbar">Some text some message..</div>

第2ステップ - CSSを追加：

snackbarのスタイルを設定し、アニメーションを追加：

/* snackbar - スクリーン底部と中央に配置 */
#snackbar {
  visibility: hidden; /* デフォルトで非表示、クリックで表示 */
  min-width: 250px; /* デフォルトの最小幅を設定 */
  margin-left: -125px; /* min-widthの値を2で割る */
  background-color: #333; /* 黒色背景色 */
  color: #fff; /* 白色テキスト色 */
  text-align: center; /* テキスト中央寄せ */
  border-radius: 2px; /* 角丸境界線 */
  padding: 16px; /* 内側マージン */
  position: fixed; /* スクリーンの上部に固定 */
  z-index: 1; /* 必要であればz-indexを追加 */
  left: 50%; /* スネイバーを中央に配置 */
  bottom: 30px; /* 底部から30px離れて */
}
/* ボタンをクリックしたときにスネイバーを表示（JavaScriptで追加されたクラスを使用） */
#snackbar.show {
  visibility: visible; /* スネイバーを表示 */
  /* アニメーションを追加：0.5秒でスネイバーを淡入および淡出します。ただし、淡出プロセスを2.5秒遅延します。 */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* 淡入および淡出スネイバーのアニメーション */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

第3ステップ - JavaScriptを追加：

JavaScriptを使用して、ボタンをクリックするとsnackbarコンテナに「show」クラスを追加します：

function myFunction() {
  // snackbar DIVを取得
  var x = document.getElementById("snackbar");
  // DIVに「show」クラスを追加
  x.className = "show";
  // 3秒後、DIVから「show」クラスを削除
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

自分で試してみる