立体的なトーストを表示する方法
立体的なトーストを表示する方法を紹介します。このサンプルでは、ボタンをクリックすると画面右下へトーストを表示し、一定時間が経過すると自動で閉じる通知を作成します。トースト本体にはグラデーションや影を組み合わせ、通常の平面的な通知よりも厚みが感じられる立体的なデザインにしています。
トーストが表示されるときは、下側から少し浮き上がるように移動しながら現れます。表示されたトーストには下方向へ厚みを表現する濃い部分と影を付けることで、画面から手前へ浮き上がっているように見せています。JavaScriptではボタンのクリックを検知して表示用のクラスを追加し、3秒後にそのクラスを削除することで自動的に非表示へ戻します。
HTMLではボタンやトーストに表示する文章を変更でき、CSSではトーストの背景色、サイズ、角丸、厚み、影、表示位置などを調整できます。また、JavaScriptの待機時間を変更すれば、トーストが自動で閉じるまでの時間も変更できます。保存完了や送信完了など、一時的なメッセージを目立たせて表示したい場面に利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックすると、厚みと影を付けた立体的なトーストが画面右下へ表示されます。
トーストは下から浮き上がるように表示され、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="three-dimensional-toast_wrap">
<!-- タイトル -->
<div class="three-dimensional-toast_title">
立体的なトースト
</div>
<!-- 説明文 -->
<p class="three-dimensional-toast_text">
ボタンをクリックすると、厚みと影を付けた立体的なトーストが画面右下へ表示されます。
</p>
<!-- 表示ボタン -->
<button
type="button"
class="three-dimensional-toast_button"
data-three-dimensional-toast-open="">
トーストを表示
</button>
</div>
<!-- トーストメッセージ -->
<div
class="three-dimensional-toast_message"
data-three-dimensional-toast="">
保存しました
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトーストを表示するボタンと通知メッセージを配置し、CSSではグラデーション、下方向の厚み、外側の影を組み合わせて立体的なトーストを作ります。JavaScriptではボタンのクリックを検知してトーストを表示し、3秒後に自動で非表示へ戻します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはトーストを表示するためのHTMLを構成するファイルです。「トーストを表示」のボタンと、画面右下へ表示される「保存しました」のメッセージを変更できます。style.cssとscript.jsを読み込み、トーストの見た目と表示処理を組み合わせます。
style.cssはトースト全体のデザインを設定するファイルです。トーストの表示位置、背景色、グラデーション、枠線、角丸、下側の厚み、外側の影、表示前後の位置や大きさを変更できます。box-shadowで下方向の厚みと影を作り、linear-gradient()で上側を明るく下側を濃くすることで立体感を付けています。
script.jsはトーストの表示と自動非表示を制御するファイルです。ボタンをクリックするとis-showクラスを追加し、トーストを表示します。その後、setTimeout()によって3000ミリ秒後にis-showクラスを削除し、自動で非表示にします。連続してボタンをクリックした場合はclearTimeout()で以前のタイマーを解除してから、新しいタイマーを開始します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「トーストを表示」ボタンをクリックすると、画面右下へ立体的なトーストが表示されます。表示されたトーストは3秒後に自動で非表示になります。
カスタマイズできる内容
index.htmlでは「立体的なトースト」のタイトル、説明文、「トーストを表示」のボタン文字、「保存しました」の通知メッセージを変更できます。保存完了、送信完了、コピー完了など、用途に合わせた内容へ変更できます。
style.cssではトーストの背景色、文字色、枠線、角丸、内側余白、表示位置、グラデーション、厚み、影を変更できます。特にbackground:linear-gradient(...)、box-shadowを調整すると、立体感の強さを変更できます。また、非表示時のtranslateY(24px) scale(.92)を変更すると、表示するときの移動距離や大きさの変化も調整できます。
script.jsではsetTimeout()の3000を変更することで、トーストが自動で閉じるまでの表示時間を変更できます。
数値調整
style.css
max-width:700px;
トーストを表示するサンプル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:36px 32px 42px;
サンプル全体の内側余白です。36pxが上、32pxが左右、42pxが下の余白です。それぞれの値を変更すると内容と外枠との間隔を調整できます。
border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
right:24px;
トーストと画面右端との間隔です。値を大きくすると左方向へ移動し、小さくすると右端へ近づきます。
bottom:32px;
トーストと画面下端との間隔です。値を大きくすると上方向へ移動し、小さくすると画面下端へ近づきます。
padding:16px 22px;
トーストの内側余白です。16pxが上下、22pxが左右の余白です。値を大きくするとトーストが大きくなり、文字と外枠との間隔も広がります。
border:1px solid #60a5fa;
トーストを囲む枠線です。1pxを大きくすると枠線が太くなります。#60a5faを変更すると枠線の色を調整できます。
border-radius:12px;
トーストの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
background:linear-gradient(to bottom, #3b82f6 0%, #2563eb 100%);
トースト表面のグラデーションです。上側を明るい#3b82f6、下側を濃い#2563ebにすることで、表面に立体感を付けています。2色の明暗差を大きくすると立体感を強調でき、近い色にするとフラットな見た目へ近づきます。
box-shadow:0 8px 0 #1e40af, 0 18px 28px rgba(30,64,175,.28);
トーストの立体感を作る重要な設定です。最初の0 8px 0 #1e40afは下方向へ8pxの濃い部分を作り、トースト本体に厚みがあるように見せています。8pxを大きくすると厚みが増し、小さくすると薄く見えます。
2つ目の0 18px 28px rgba(30,64,175,.28)はトーストの外側へ落ちる影です。18pxは影を下方向へ移動させる距離、28pxは影のぼかしです。値を大きくすると影が広がり、背景から離れて浮いている印象を強くできます。
translateY(24px)
非表示時のトーストを通常位置より24px下へ移動します。値を大きくすると表示時の移動距離が大きくなり、小さくすると移動が控えめになります。
scale(.92)
非表示時のトーストを本来の92％の大きさにします。値を小さくすると表示時の拡大変化が強くなり、1へ近づけると大きさの変化が小さくなります。
transition:opacity .3s ease, visibility .3s ease, transform .35s ease, box-shadow .35s ease;
トーストの表示切り替え時間です。.3sは透明度と表示状態、.35sは位置・大きさ・影の変化時間です。値を大きくするとゆっくり変化し、小さくすると速く変化します。
box-shadow:0 8px 0 #1e40af, 0 22px 32px rgba(30,64,175,.32);
トーストが表示された状態の影です。下側の8pxの厚みを残しながら、外側の影を22px下へ移動して32pxぼかすことで、表示後の浮き上がった印象を強調します。
立体感を強くする場合
box-shadowの0 8px 0 #1e40afにある8pxを大きくすると、トースト下側の厚みが増します。さらにグラデーションの上側と下側の色の明暗差を大きくし、外側の影の移動距離やぼかしを大きくすると、より立体的な見た目になります。
立体感を弱くする場合
8pxの厚みを小さくし、グラデーションの2色を近い色へ変更すると立体感が弱くなります。外側の影も小さくすると、よりフラットなトーストへ近づきます。このサンプルでは「表面のグラデーション」「下側の厚み」「外側の影」の3つを中心に調整すると、立体感を変更しやすくなります。
script.js
3000
トーストを表示してから自動で閉じるまでの時間です。3000ミリ秒は3秒です。5000に変更すると5秒、2000に変更すると2秒で自動的に非表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてサンプル全体が縮小されます。画面幅640px以下ではpadding:28px 18px 34px;へ変更し、スマートフォンで左右の余白が広くなりすぎないようにしています。
トースト本体は画面幅640px以下でright:16px;とleft:16px;を指定し、画面の左右に16pxずつ余白を確保します。また、bottom:24px;によって画面下端との間隔も調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント