PDFをテーブルに表示する方法
PDFをテーブルに表示する方法を紹介します。このサンプルでは、テーブルのセル内にiframeを配置し、PDFをそのまま表示します。PDFの名前や説明と一緒に内容を確認できるため、複数の情報を表形式で整理しながらPDFを掲載したい場合に利用できます。
商品資料、マニュアル、案内資料、利用規約などを、項目名や説明文と並べて表示したい場合に便利です。PDFを別ページで開かなくてもテーブル内で内容を確認できるため、関連する情報とPDFをまとめて掲載できます。
HTMLではテーブルの文章や表示するPDFを変更でき、CSSではテーブルの横幅、セルの余白、各列のサイズ、PDF表示エリアの高さなどを調整できます。JavaScriptは使用しません。画面幅が狭い場合はテーブル部分を横方向へスクロールできるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
テーブルのセル内にPDFを表示したサンプルです。
| 項目 | 説明 | |
|---|---|---|
| サンプルPDF | 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>
<!-- PDFテーブル全体 -->
<div class="pdf-table_wrap">
<!-- タイトル -->
<div class="pdf-table_title">
PDFをテーブルに表示
</div>
<!-- 説明文 -->
<p class="pdf-table_text">
テーブルのセル内にPDFを表示したサンプルです。
</p>
<!-- 横スクロール用エリア -->
<div class="pdf-table_scroll">
<!-- テーブル -->
<table class="pdf-table">
<!-- テーブル見出し -->
<thead>
<tr>
<th>項目</th>
<th>説明</th>
<th>PDF</th>
</tr>
</thead>
<!-- テーブル本文 -->
<tbody>
<tr>
<!-- 項目 -->
<td class="pdf-table_item">
サンプルPDF
</td>
<!-- 説明 -->
<td class="pdf-table_description">
PDFをテーブルのセル内に表示したサンプルです。
</td>
<!-- PDF表示セル -->
<td class="pdf-table_pdf">
<div class="pdf-table_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 sample">
</iframe>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSSの2ファイルと、表示するPDFファイルで構成されています。HTMLではテーブルとPDFを表示するiframeを配置し、CSSではテーブルのデザインやPDF表示領域のサイズ、画面幅が狭い場合の横スクロールを設定しています。表示するPDFは利用者自身で用意し、sample/pdf/フォルダへ配置します。
sample/
├── index.html
├── style.css
└── pdf/
└── sample.pdf
各ファイルの役割
index.htmlはテーブルとPDF表示領域を構成するファイルです。「PDFをテーブルに表示」のタイトル、説明文、テーブルの見出し、項目名、説明などを変更できます。PDFはiframeのsrcに指定したファイルを読み込みます。
style.cssはテーブル全体とPDF表示領域のデザインを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、セルのサイズ、PDF表示領域の高さなどを変更できます。また、画面幅が狭い場合にテーブルを横スクロールできるようにしています。
pdf/sample.pdfはテーブルのセル内に表示するPDFファイルです。このPDFは利用者自身で用意します。別のPDFを使用する場合は、pdfフォルダ内のPDFファイル名とindex.htmlのiframeに指定するファイル名を合わせてください。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、その中にpdfフォルダを作成します。表示したいPDFファイルをsample/pdf/へ配置してください。配布コードではsample.pdfというファイル名を読み込む設定になっています。
PDFを配置したあと、sample/index.htmlをブラウザで開きます。テーブルの「PDF」列に、配置したPDFがiframeで表示されます。JavaScriptや外部ライブラリは使用していません。
PDFファイルの配置方法・ファイル名の変更方法
表示したいPDFは、ご自身で用意してsample/pdf/フォルダへ配置します。配布コードでは、次のようにsample.pdfを読み込む設定になっています。
src="pdf/sample.pdf"
そのため、用意したPDFのファイル名をsample.pdfにしてsample/pdf/へ配置すれば、そのまま表示できます。
PDFのファイル名を変更して使用することもできます。たとえばmanual.pdfというPDFを使用する場合は、sample/pdf/manual.pdfとして配置し、index.htmlのiframeを次のように変更します。
src="pdf/manual.pdf"
PDFのファイル名とsrcに指定するファイル名が異なるとPDFを読み込めないため、必ず同じ名前を指定してください。
カスタマイズできる内容
index.htmlではタイトル、説明文、テーブルの見出し、項目名、説明、表示するPDFファイルを変更できます。別のPDFを表示するときは、sample/pdf/へPDFを配置し、必要に応じてiframeのsrcに指定するファイル名を変更してください。
style.cssでは全体の横幅や余白、背景色、枠線、角丸、テーブルの最小横幅、セルの余白、各列の横幅、PDF表示領域の高さなどを変更できます。
数値調整
style.css
max-width:900px;
PDFテーブル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
PDFテーブル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
PDFテーブル全体の内側余白です。値を大きくすると内容と外側の枠線との間隔が広がります。
border-radius:18px;
PDFテーブル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
margin:0 0 30px;
説明文の下側余白です。30pxを大きくするとテーブルとの間隔が広がり、小さくすると狭くなります。
min-width:680px;
テーブルの最小横幅です。値を大きくするとテーブルが横に広がり、表示領域より広くなった場合は横スクロールで確認できます。
padding:16px;
見出しセルと通常セルの内側余白です。値を大きくするとセル内の余白が広がり、小さくすると狭くなります。
width:160px;
項目列の横幅です。値を大きくすると項目列が広くなります。
width:320px;
PDF列の横幅です。値を大きくするとPDFを配置する列が広くなります。
height:220px;
PDF表示領域の高さです。値を大きくするとPDFの表示領域が高くなり、小さくすると低くなります。
border-radius:8px;
PDF表示部分の角丸です。値を大きくすると丸みが強くなり、小さくすると角張った表示になります。
@media (max-width:640px)
画面幅640px以下でスマートフォン向けの表示へ切り替える基準です。この幅以下ではPDFテーブル全体の内側余白をpadding:24px 18px;へ変更します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:900pxによって、PDFテーブル全体が画面幅に合わせて縮小します。テーブルにはmin-width:680pxを指定し、その外側の.pdf-table_scrollへoverflow-x:autoを設定しているため、画面幅が狭い場合はテーブルを横スクロールして確認できます。
PDFを表示するiframeにはwidth:100%とheight:100%を指定しているため、PDF表示領域のサイズに合わせて表示されます。さらに画面幅640px以下では全体の内側余白を24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント