HTML/CSSだけでトーストを作る方法
HTML/CSSだけでトーストを作る方法を紹介します。このサンプルでは、HTMLのチェックボックスとlabel要素、CSSの:checkedを利用して、画面右下へ通知メッセージを表示・非表示できます。JavaScriptは使用しておらず、「トーストを表示」ボタンをクリックすると通知が表示され、表示中のトーストをクリックすると閉じられるシンプルな仕組みです。時間指定による自動終了は行わず、利用者が任意のタイミングで閉じられる動作になっています。
保存完了や設定変更、お問い合わせ送信後の通知など、短いメッセージを画面へ表示したい場面で利用できます。ページ全体を切り替えたりモーダルウインドウを表示したりせず、必要な情報だけをコンパクトに伝えられるため、管理画面や会員サイト、ECサイトなど幅広いWebページへ導入できます。
表示ボタンの文字やトースト内のメッセージはHTMLから変更できます。CSSでは表示位置、背景色、文字色、余白、角丸、影、アニメーション時間などを自由に調整できるため、サイトデザインに合わせてカスタマイズできます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすいHTML/CSSだけのトーストサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックすると画面右下へトーストを表示できます。
「トーストを表示」をクリックすると通知が表示されます。自動では閉じないため、表示中のトーストをクリックすると閉じられます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>HTML/CSSだけでトースト</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- トースト表示エリア -->
<div class="html-css-toast_wrap">
<!-- タイトル -->
<div class="html-css-toast_title">
HTML/CSSだけで動くトースト
</div>
<!-- 説明文 -->
<p class="html-css-toast_text">
ボタンをクリックすると画面右下へトーストを表示できます。
</p>
<!-- トーストの表示状態を管理するチェックボックス -->
<input
class="html-css-toast_input"
type="checkbox"
id="html-css-toast-toggle">
<!-- トースト表示ボタン -->
<label
class="html-css-toast_button"
for="html-css-toast-toggle">
トーストを表示
</label>
<!-- トースト本体 -->
<label
class="html-css-toast_message"
for="html-css-toast-toggle">
保存しました
</label>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではチェックボックスとlabel要素を使用してトーストの表示状態を切り替えます。CSSではボタンやトーストのデザイン、表示位置、フェード表示・非表示のアニメーションを設定しています。JavaScriptを使用せず、HTMLとCSSだけで動作するシンプルなトーストのサンプルです。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはトースト全体を構成するファイルです。タイトル、説明文、表示ボタンの文字、トーストに表示するメッセージを変更できます。チェックボックスを利用して表示・非表示を切り替えています。
style.cssは画面全体やトーストのデザインを設定するファイルです。背景色、文字色、余白、角丸、影、表示位置、アニメーション速度などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「トーストを表示」ボタンをクリックすると画面右下へトーストが表示されます。表示されたトーストをクリックすると閉じられます。
カスタマイズできる内容
index.htmlではタイトル、説明文、表示ボタンの文字、トーストメッセージを自由に変更できます。保存完了、送信完了、削除完了など用途に合わせた通知へ変更できます。
style.cssではトースト全体の背景色、文字色、表示位置、余白、角丸、影、ボタンのデザイン、アニメーション速度などを変更できます。
数値調整
style.css
max-width:700px;
コンテンツ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
コンテンツ全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
コンテンツ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:12px 24px;
表示ボタンの内側余白です。値を変更するとボタンの大きさが変わります。
right:24px;
トーストの右側位置です。値を大きくすると画面左方向へ移動します。
bottom:24px;
トーストの下側位置です。値を大きくすると画面上方向へ移動します。
padding:14px 18px;
トースト内部の余白です。値を変更すると通知ボックスの大きさが変わります。
border-radius:10px;
トーストの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 12px 30px rgba(...)
トーストの影です。数値を大きくすると影が広がり、小さくすると控えめになります。
transform:translateY(12px);
非表示時の移動量です。値を大きくすると下方向から大きく表示され、小さくすると移動量が少なくなります。
transition:opacity .3s ease, transform .3s ease;
トーストの表示・非表示アニメーションです。0.3秒で切り替わります。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせて縮小表示されます。また、640px以下では余白やトーストの左右位置を調整し、スマートフォン・タブレット・PCで利用しやすいレイアウトになっています。
コメント