PDFをドロワーメニューに表示する方法
PDFをドロワーメニューに表示する方法を紹介します。このサンプルでは、「PDFを表示」ボタンをクリックすると画面左側からドロワーメニューが開き、その中にPDFを表示します。PDFはiframeを使用してドロワーメニュー内へ埋め込み、ページを移動せずに資料や文書の内容を確認できる構成です。
商品マニュアルや利用規約、案内資料、カタログなど、Webページを見ながらPDFも確認してもらいたい場面に利用できます。たとえばECサイトの商品ページ、会員サイトの資料閲覧ページ、管理画面のマニュアル表示、お問い合わせ画面の案内資料などに適しています。PDFを通常のページ内へ常時表示せず、必要なときだけドロワーメニューを開いて確認できるため、ページ本体の表示領域を保ったままPDF閲覧エリアを設置できます。
HTMLではドロワーメニューのタイトルや説明文、表示するPDFのURLなどを変更でき、CSSではドロワーメニューの横幅、余白、背景色、PDF表示エリアの高さ、角丸、影、表示アニメーションなどを調整できます。JavaScriptではボタンによる開閉と背景部分をクリックしたときの閉じる処理を実装しています。ドロワーメニューは画面幅を超えないように調整されているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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-drawer-menu_wrap">
<!-- タイトル -->
<h1 class="pdf-drawer-menu_title">
PDFをドロワーメニューで表示
</h1>
<!-- 説明文 -->
<p class="pdf-drawer-menu_text">
ボタンをクリックすると、ドロワーメニュー内にPDFを表示できます。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="pdf-drawer-menu_open"
type="button"
data-drawer-open>
PDFを表示
</button>
</div>
<!-- ドロワーメニュー表示時の背景 -->
<div
class="pdf-drawer-menu_overlay"
data-drawer-overlay>
<!-- ドロワーメニュー本体 -->
<div
class="pdf-drawer-menu_drawer"
role="dialog"
aria-modal="true"
aria-labelledby="pdf-drawer-menu-title">
<!-- ドロワーメニューのタイトル -->
<div
class="pdf-drawer-menu_drawer-title"
id="pdf-drawer-menu-title">
PDF表示エリア
</div>
<!-- ドロワーメニューの説明文 -->
<p class="pdf-drawer-menu_drawer-text">
ドロワーメニュー内でPDFを確認できます。
</p>
<!-- PDF表示エリア -->
<div class="pdf-drawer-menu_pdf">
<!--
【表示するPDFの設定方法】
1. sampleフォルダの中にpdfフォルダを作成してください。
2. 表示したいPDFファイルを利用者自身で用意してください。
3. 用意したPDFファイルを
sample/pdf/ に配置してください。
4. このサンプルでは sample.pdf というファイル名で
PDFを読み込みます。
5. 別のファイル名を使用する場合は、
下記の src="pdf/sample.pdf" の sample.pdf を
配置したPDFのファイル名へ変更してください。
PDFファイル自体はサンプル一式には含まれていません。
-->
<iframe
src="pdf/sample.pdf"
title="PDF sample"
loading="lazy">
</iframe>
</div>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="pdf-drawer-menu_close"
type="button"
data-drawer-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではPDFを表示するボタン、ドロワーメニュー、PDF表示用のiframeを作成し、CSSではドロワーメニューの横幅や背景、余白、PDF表示エリア、左側から表示するアニメーションなどを設定します。JavaScriptでは「PDFを表示」ボタンと「閉じる」ボタン、背景クリックによるドロワーメニューの開閉を制御します。
表示するPDFファイルはZIPには含まれていないため、利用者自身で用意します。用意したPDFはsampleフォルダ内のfilesフォルダへ配置し、index.htmlのiframeにあるsrc="files/YOUR_PDF_FILE.pdf"のYOUR_PDF_FILE.pdfを、実際に配置したPDFのファイル名へ置き換えて使用します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはページとドロワーメニューのHTML構造を作るファイルです。「PDFを表示」ボタン、ドロワーメニューのタイトルと説明文、PDFを表示するiframe、「閉じる」ボタンが含まれています。表示するPDFの設定もこのファイルで行い、iframeのsrc="files/YOUR_PDF_FILE.pdf"を実際のPDFファイル名に合わせて変更します。
style.cssはページとドロワーメニューのデザインを設定するファイルです。デモ全体の横幅や余白、ボタンの色、背景の暗さ、ドロワーメニューの横幅、PDF表示エリアの高さ、角丸、影、左側から表示するアニメーションなどを変更できます。
script.jsはドロワーメニューの開閉を制御するファイルです。「PDFを表示」ボタンをクリックするとis-activeクラスを追加してドロワーメニューを表示し、「閉じる」ボタンまたはドロワーメニュー外側の背景をクリックするとクラスを削除して非表示にします。
設置方法・使い方
まず、sampleフォルダへindex.html・style.css・script.jsを配置します。次にsampleフォルダ内へfilesフォルダを作成し、利用者自身で用意したPDFファイルをその中へ配置してください。PDFファイルはZIPには含まれていないため、表示したいPDFを別途用意する必要があります。
例えば、表示したいPDFのファイル名がguide.pdfの場合は、sample/files/guide.pdfとなるように配置します。そのうえでindex.htmlのiframeにあるsrc="files/YOUR_PDF_FILE.pdf"をsrc="files/guide.pdf"へ変更します。YOUR_PDF_FILE.pdfは実際のPDFファイルではなく、利用者自身が用意したPDFのファイル名へ置き換えるためのプレースホルダーです。
設定後にsample/index.htmlをブラウザで開きます。「PDFを表示」ボタンをクリックすると画面左側からドロワーメニューが表示され、設定したPDFをiframe内で確認できます。「閉じる」ボタン、またはドロワーメニュー外側の暗くなった背景をクリックするとドロワーメニューが閉じます。
カスタマイズできる内容
index.htmlではページタイトル、「PDFをドロワーメニューで表示」のタイトル、説明文、「PDFを表示」ボタンの文章、ドロワーメニュー内のタイトルと説明文、「閉じる」ボタンの文章を変更できます。iframeのsrcを変更すると、ドロワーメニュー内へ表示するPDFを変更できます。
style.cssではデモ全体やドロワーメニューの横幅、余白、背景色、ボタンの色、角丸、背景の暗さ、影、PDF表示エリアの高さ、アニメーション時間などを変更できます。
数値調整
style.css
max-width:700px;
デモ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
デモ全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
デモ全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
デモ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
padding:12px 24px;
「PDFを表示」ボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。
border-radius:8px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
background:rgba(0,0,0,.5);
ドロワーメニュー表示中の背景の暗さです。.5の値を大きくすると背景が濃くなり、小さくすると薄くなります。
width:420px;
ドロワーメニュー本体の横幅です。値を大きくすると横に広がり、小さくすると狭くなります。
max-width:90%;
ドロワーメニューが画面幅に対して広がる最大範囲です。小さい画面でドロワーメニューが画面幅を超えないように調整します。
padding:28px;
ドロワーメニュー本体の内側余白です。値を大きくすると内容と端の間隔が広がり、小さくすると狭くなります。
height:520px;
PDF表示エリアの高さです。値を大きくするとPDFの表示領域が高くなり、小さくすると低くなります。
border-radius:12px;
PDF表示用iframeの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
animation:pdf-drawer-menu_slide .35s ease forwards;
ドロワーメニューが左側から表示されるアニメーション時間です。.35sは0.35秒を表し、値を大きくするとゆっくり、小さくすると速く表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのドロワーメニュー本体にwidth:420px;とmax-width:90%;を設定しているため、画面が狭い場合は画面幅に合わせてドロワーメニューが縮小されます。PDF表示用iframeもwidth:100%;とheight:100%;でPDF表示エリアに合わせて表示されます。
また、画面幅640px以下ではドロワーメニュー本体の内側余白をpadding:24px 20px;へ変更し、PDF表示エリアの高さを420pxへ調整します。これにより、スマートフォン・タブレット・PCで利用できます。
コメント