トースト
コピペですぐ使えるトーストのサンプルコードを動作・特徴別にまとめています。
無料ツール
トーストを自由に作成

文章・色・サイズ・余白・画面端との距離・ボタンなどを設定して、HTML・CSS・JavaScriptを自動生成できます。

トースト作成ツールを使う
新しいタブで開きます

基本

HTML/CSSだけでトーストを作る方法
基本のトーストを作る方法

開閉

外側クリックで閉じられるトーストの作り方
ESCキーで閉じられるトーストの作り方
×ボタンで閉じられるトーストの作り方
閉じるボタンで閉じられるトーストの作り方

アニメーション

フェードイン・フェードアウトで表示するトーストの作り方
スライドイン・スライドアウトするトーストを作る方法

デザイン

立体的なトーストを表示する方法

レイアウト

複数のトーストを並べて表示する方法

自動

指定時間後にトーストを表示にする方法
指定時間後にトーストを非表示にする方法

コンテンツ

Googleマップをトーストに表示する方法
PDFをトーストに表示する方法
iframeをトーストに表示する方法
YouTube動画をトーストに表示する方法
画像付きトーストを作る方法