PDFをトーストに表示する方法
PDFをトーストに表示する方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、「PDFを表示」ボタンをクリックすると画面右下にトーストが表示され、その中へPDFをiframeで埋め込みます。通常の短いメッセージを表示するトーストとは異なり、PDFの内容をページ上から離れずに確認できる構成です。
資料、マニュアル、利用規約、案内書などのPDFを補助的に確認してもらいたい場面で利用できます。たとえば、会員サイトで操作マニュアルを表示したり、管理画面で資料を確認したり、ECサイトで商品に関するPDFを表示したりする用途に適しています。トースト右上の「×」ボタンをクリックすると閉じることができ、必要なときだけPDFを画面上へ表示できます。
HTMLでは表示するPDFのURLやタイトルを変更でき、CSSではトーストの横幅、高さ、位置、背景色、角丸、影などを調整できます。PDF表示部分は画面幅に合わせて縮小され、スマートフォンではトーストを画面左右の余白に合わせて表示するため、スマートフォン・タブレット・PCで利用できます。JavaScriptはバニラJavaScriptのみを使用しているため、外部ライブラリを追加せず導入できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックすると、画面右下のトースト内にPDFを表示します。
「PDFを表示」をクリックすると画面右下のトースト内にPDFが表示されます。「×」をクリックすると閉じます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>PDFをトーストに表示</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 操作エリア全体 -->
<div class="pdf-toast_wrap">
<!-- タイトル -->
<div class="pdf-toast_title">
PDFをトーストに表示
</div>
<!-- 説明文 -->
<p class="pdf-toast_text">
ボタンをクリックすると、画面右下のトースト内にPDFを表示します。
</p>
<!-- トーストを表示するボタン -->
<button
type="button"
class="pdf-toast_button"
data-pdf-toast-open="">
PDFを表示
</button>
</div>
<!-- PDFを表示するトースト -->
<div class="pdf-toast_message" data-pdf-toast="">
<!-- トースト上部 -->
<div class="pdf-toast_header">
<!-- PDFタイトル -->
<div class="pdf-toast_heading">
PDF資料
</div>
<!-- 閉じるボタン -->
<button
type="button"
class="pdf-toast_close"
data-pdf-toast-close=""
aria-label="PDFを閉じる">
×
</button>
</div>
<!-- PDF表示エリア -->
<div class="pdf-toast_frame">
<!--
【表示するPDFの設定方法】
1. 表示したいPDFファイルを用意してください。
2. sampleフォルダ内にpdfフォルダを作成してください。
3. 用意したPDFファイルを
sample/pdf/ へ配置してください。
4. このサンプルでは sample.pdf という
ファイル名でPDFを読み込みます。
5. 別のファイル名を使用する場合は、
下記の src="pdf/sample.pdf" の
sample.pdf を実際のファイル名へ
変更してください。
PDFファイル自体はサンプル一式には
含まれていません。
-->
<iframe
src="pdf/sample.pdf"
title="PDF資料">
</iframe>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、表示するPDFファイルで構成されています。HTMLではPDFを表示するボタン、画面右下へ表示するトースト、PDFを読み込むiframeを配置します。CSSでは操作エリア、トースト、閉じるボタン、PDF表示領域のサイズや位置を設定し、JavaScriptでは「PDFを表示」と「×」をクリックしたときにトーストの表示・非表示を切り替えます。
表示するPDFファイルはサンプル一式には含まれていません。利用者自身でPDFファイルを用意し、sampleフォルダ内へpdfフォルダを作成して、その中へ配置します。このサンプルではsample.pdfというファイル名を使用し、index.htmlからpdf/sample.pdfを読み込む構成です。
PDFファイルを配置したあとにsample/index.htmlをブラウザで開きます。「PDFを表示」をクリックすると、画面右下へトーストが表示され、その中でPDFを確認できます。「×」をクリックするとトーストが閉じます。
sample/
├── index.html
├── style.css
├── script.js
└── pdf/
└── sample.pdf
各ファイルの役割
index.htmlはPDFトースト全体を構成するファイルです。「PDFをトーストに表示」のタイトル、説明文、「PDFを表示」のボタン文字、トースト内の「PDF資料」という表示名を変更できます。また、PDFを読み込むiframeのsrcに指定するファイル名もindex.htmlで変更します。
style.cssは操作エリアとPDFトーストのデザインを設定するファイルです。操作エリアの最大横幅、余白、角丸、ボタンの色やサイズ、トーストの位置、横幅、影、PDF表示領域の高さなどを変更できます。is-showクラスが付いたときに、トーストが表示されるように設定しています。
script.jsはPDFトーストを開閉するファイルです。「PDFを表示」をクリックするとトーストへis-showクラスを追加し、「×」をクリックするとis-showクラスを削除します。
pdf/sample.pdfはトースト内へ表示するPDFファイルです。このPDFは利用者自身で用意します。別のファイル名を使用する場合は、PDFファイルの名前とindex.htmlのiframeに指定するsrcを一致させてください。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中へpdfフォルダを作成します。次に、表示したいPDFファイルをsample/pdf/へ配置してください。
配布コードではpdf/sample.pdfを読み込む設定になっています。そのため、用意したPDFのファイル名をsample.pdfにして配置する場合は、index.htmlを変更する必要はありません。
PDFのファイル名を変更して使用する場合は、index.htmlのiframeにあるsrcも変更します。たとえばmanual.pdfというPDFを使用する場合は、sample/pdf/manual.pdfとして配置し、iframeをsrc="pdf/manual.pdf"へ変更してください。PDFの実際のファイル名とsrcに指定する名前は必ず一致させます。
ファイルを配置したらsample/index.htmlをブラウザで開きます。「PDFを表示」をクリックすると画面右下へトーストが表示され、PDFを確認できます。「×」をクリックするとトーストが閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、表示ボタンの文字、トースト内のPDFタイトル、表示するPDFファイルを変更できます。別のPDFを表示するときはsample/pdf/へPDFを配置し、必要に応じてiframeのsrcに指定するファイル名を変更してください。
style.cssでは、操作エリアの横幅、余白、背景色、角丸、表示ボタンの背景色、トーストの表示位置、横幅、内側余白、角丸、影、閉じるボタンのサイズ、PDF表示領域の高さなどを変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がります。
max-width:700px;
操作エリア全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
操作エリア全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置されます。
padding:32px;
操作エリア全体の内側余白です。値を大きくすると内容と外側の枠線との間隔が広がります。
border-radius:18px;
操作エリア全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると表示ボタンとの間隔が広がります。
padding:12px 24px;
「PDFを表示」ボタンの内側余白です。12pxは上下、24pxは左右の余白を表します。
right:24px;
トーストを画面右端から24px離して表示する設定です。値を大きくすると右端からの間隔が広がります。
bottom:24px;
トーストを画面下端から24px離して表示する設定です。値を大きくすると下端からの間隔が広がります。
width:min(520px,calc(100vw - 48px));
トーストの横幅です。最大520pxで表示し、画面が狭い場合は画面幅から48pxを引いたサイズまで縮小します。
padding:18px;
トーストの内側余白です。値を大きくすると内容とトースト外側との間隔が広がります。
border-radius:12px;
トースト本体の角丸です。値を大きくすると丸みが強くなります。
box-shadow:0 12px 30px rgba(0,0,0,.18);
トーストへ付ける影です。12pxは縦方向の位置、30pxはぼかしの広がりに関係します。値を変更すると影の見え方が変わります。
transform:translateY(12px);
非表示時のトーストを通常位置より12px下へ移動する設定です。値を大きくすると表示時の移動距離が大きくなります。
transition:.3s;
トーストの表示状態が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
gap:16px;
トースト上部にあるPDFタイトルと閉じるボタンの間隔です。値を大きくすると間隔が広がります。
margin:0 0 14px;
トースト上部とPDF表示領域の間隔です。14pxを大きくすると上下の間隔が広がります。
width:36px;
閉じるボタンの横幅です。値を大きくするとボタンが横に広がります。
height:36px;
閉じるボタンの高さです。値を大きくするとボタンが高くなります。
font-size:22px;
閉じるボタンの「×」の文字サイズです。値を大きくすると「×」が大きくなります。
height:360px;
通常時のPDF表示領域の高さです。値を大きくするとPDFを表示する領域が高くなり、小さくすると低くなります。
@media (max-width:640px)
画面幅640px以下でスマートフォン向けの表示へ切り替えるブレークポイントです。
height:300px;
画面幅640px以下で使用するPDF表示領域の高さです。値を変更するとスマートフォンでのPDF表示領域の高さが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって操作エリア全体が画面幅に合わせて縮小します。トーストにはwidth:min(520px,calc(100vw - 48px))を指定しているため、PCでは最大520px、画面が狭い場合は画面幅に合わせて縮小します。
画面幅640px以下では@media (max-width:640px)が適用され、操作エリアの内側余白を24px 18pxへ変更します。トーストは右端・下端から16px離し、横幅をcalc(100vw - 32px)へ変更します。PDF表示領域の高さも360pxから300pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント