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. PDFをWeb上からアクセスできる場所へ
アップロードします。
3. アップロードしたPDFのファイルURLを取得します。
4. 下記の YOUR_PDF_URL を、
取得したPDFのURLへ置き換えてください。
例：
https://example.com/sample.pdf
WordPressの場合はメディアライブラリへPDFを
アップロードし、ファイルURLを取得できます。
PDFファイル自体はサンプル一式には含まれていません。
-->
<iframe
src="YOUR_PDF_URL"
title="PDF">
</iframe>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではtable要素で表を作成し、セル内にiframe要素を配置してPDFを表示します。CSSではテーブルの横幅やセルの余白、PDF表示エリアの大きさなどを設定します。
表示するPDFファイルはZIPには含まれていません。利用者自身でWeb上からアクセスできるPDFファイルを用意し、そのPDFのURLをindex.htmlへ設定して使用します。JavaScriptや外部ライブラリ、APIは使用しません。
PDFをテーブルのセル内へ直接表示できるため、資料一覧、マニュアル一覧、社内文書一覧など、表の情報とPDFの内容を同じ場所で確認したいページに利用できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはテーブルとPDF表示部分を構成するファイルです。テーブルの見出しや表示内容を変更でき、iframe要素のsrcへ表示したいPDFファイルのURLを設定します。コード内のYOUR_PDF_URLが、利用者自身で用意するPDFのURLを設定する場所です。
style.cssはテーブルとPDF表示エリアのデザインを設定するファイルです。テーブルの最大横幅、セルの余白、枠線、背景色、PDFを表示するiframeの横幅や高さなどを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。表示したいPDFファイルは、Webブラウザから直接アクセスできる場所へ利用者自身で用意してください。WordPressを使用する場合は、メディアライブラリへPDFをアップロードし、アップロードしたPDFのファイルURLを取得できます。
PDFのURLを取得したら、index.htmlにあるiframe要素のsrc="YOUR_PDF_URL"を、取得したPDFのURLへ置き換えます。YOUR_PDF_URLそのものを残さず、PDFへ直接アクセスできるURLを設定してください。設定後にsample/index.htmlをブラウザで開くと、テーブルのセル内へPDFが表示されます。
PDFファイル自体はサンプルZIPには含まれないため、利用者自身のWebサイトやサーバーなどへ配置したPDFを参照して使用します。
カスタマイズできる内容
index.htmlでは、テーブル内の見出し、PDFに関する文章、iframeのsrcに設定するPDFファイルのURLを変更できます。別のPDFを表示したい場合は、YOUR_PDF_URLへ設定するURLを変更します。
style.cssでは、テーブル全体の最大横幅、セルの余白、枠線、背景色、文字サイズ、PDF表示エリアの高さなどを変更できます。表示するPDFの内容やページのレイアウトに合わせて調整できます。
数値調整
style.css
max-width:900px;
テーブル全体の最大横幅です。値を大きくするとテーブルを広く表示でき、小さくするとコンパクトになります。
padding:16px;
テーブルセルの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border:1px solid #d1d5db;
テーブルとセルの枠線です。1pxを大きくすると枠線が太くなります。
height:420px;
PDFを表示するiframeの高さです。値を大きくするとPDFの表示領域が縦に広がり、小さくすると低くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでテーブルを囲む要素にwidth:100%を設定し、iframeにもwidth:100%を指定することで、利用できる横幅に合わせてPDF表示部分が縮小されます。テーブルが画面幅を超える場合は横方向へスクロールできる構成のため、スマートフォン・タブレット・PCで利用できます。
コメント