×ボタンで閉じられるトーストの作り方【HTML/CSS/JavaScript・サンプルコード付き】

トースト

×ボタンで閉じられるトーストの作り方

×ボタンで閉じられるトーストの作り方を紹介します。このサンプルでは、「トーストを表示」ボタンをクリックすると画面右下へ通知が表示され、通知内の×ボタンをクリックするとトーストを閉じられます。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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルは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で利用できます。

こちらもおすすめ

トースト
トーストのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント