PDF付きカードを作る方法【HTML/CSS・サンプルコード付き】

カードUI
2026.06.30
無料ツール
カードを自由に作成

タイトル・説明文・サイズ・配置・背景色・枠線・影・文字などを設定して、HTMLとCSSを自動生成できます。

カード作成ツールを使う
新しいタブで開きます

PDF付きカードを作る方法

PDF付きカードを作る方法を紹介します。カードの中にPDF表示エリア、タイトル、説明文をまとめることで、資料やパンフレット、案内文書などをWebページ上で見やすく表示できます。PDFファイルを別ページへ移動せずに確認できるため、資料紹介やダウンロード案内ページにも使いやすいレイアウトです。

このサンプルでは、HTMLとCSSだけを使用して、PDFを埋め込んだシンプルなカードを作成します。カード上部にPDFを表示し、その下にタイトルと説明文を配置する構成です。JavaScriptは使用していないため、静的なページにもそのまま導入できます。

カードの幅や余白、角丸、背景色、文字サイズ、PDF表示エリアの高さなどはCSSから変更できます。PDFのURLを差し替えるだけで別の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>

  <!-- カード表示エリア -->
  <div class="pdf-card_wrap">

    <!-- PDF付きカード -->
    <article class="pdf-card_card">

      <!-- PDF表示エリア -->
      <!-- src属性へ任意のPDFファイルのURLを指定 -->
      <div class="pdf-card_frame">
        <iframe src="https://maruhinoto.com/wp-content/uploads/2026/06/sample-blue.pdf" title="サンプルPDF"></iframe>
      </div>

      <!-- カード本文 -->
      <div class="pdf-card_body">

        <!-- タイトル -->
        <h3>PDF資料タイトル</h3>

        <!-- 説明文 -->
        <p>
          カード内にPDFを埋め込み、タイトルと説明文をまとめて表示するサンプルです。
        </p>

      </div>

    </article>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではPDFを表示するiframeと、PDF資料のタイトルや説明文をまとめたカードを作成します。CSSではカードの横幅、余白、背景色、枠線、角丸、PDF表示領域の高さ、タイトルや説明文のデザインを設定します。JavaScriptは使用しません。 

sample/
├── index.html
├── style.css
└── pdf/
    └── sample-blue.pdf

各ファイルの役割
index.htmlはPDF付きカードを構成するファイルです。iframeで表示するPDF、カードのタイトル、説明文を変更できます。PDFはiframeのsrcへ表示したいPDFファイルの場所を指定します。

style.cssはカード全体とPDF表示領域のデザインを設定するファイルです。カードの横幅、外側余白、枠線、角丸、背景色、PDF表示領域の高さ、本文の余白、タイトルの文字サイズや説明文の行間などを変更できます。

pdf/sample-blue.pdfはカード内に表示するPDFファイルです。表示したいPDFをこの場所へ配置します。別のPDFを使用する場合は、PDFファイル名とindex.htmlのiframeに指定するファイル名を合わせてください。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、その中にpdfフォルダを作成します。表示したいPDFファイルをsample/pdf/へ配置してください。ファイルを配置したあと、sample/index.htmlをブラウザで開くと、カード上部にPDFが表示され、その下にタイトルと説明文が表示されます。

PDFファイルの配置方法・表示するPDFの変更方法
表示したいPDFは、ご自身で用意してsample/pdf/フォルダへ配置します。たとえばsample-blue.pdfというPDFを表示する場合は、次の場所へ配置します。

sample/pdf/sample-blue.pdf

そのうえで、index.htmlのiframeを次のように指定します。

src="pdf/sample-blue.pdf"

別のPDFを使用する場合は、PDFファイル名とsrcを同じ名前へ変更します。たとえばmanual.pdfを使用する場合は、sample/pdf/manual.pdfとして配置し、HTML側を次のように変更します。

src="pdf/manual.pdf"

PDFファイル名とsrcに指定するファイル名が異なるとPDFを読み込めないため、必ず同じ名前にしてください。

カスタマイズできる内容
index.htmlでは表示するPDFファイル、「PDF資料タイトル」のタイトル、カード下部の説明文を変更できます。資料名、マニュアル名、商品資料名など、用途に合わせた内容へ変更できます。

style.cssではカードの横幅、外側余白、背景色、枠線、角丸、PDF表示領域の高さ、カード本文の余白、タイトルの文字サイズや色、説明文の文字色や行間を変更できます。

数値調整
style.css
padding:40px 20px;
カード表示エリアの内側余白です。上下の40pxを大きくするとカードと画面上下の間隔が広がり、左右の20pxを大きくすると画面端との間隔が広がります。

width:380px;
カード本体の横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。

border:1px solid #e5e7eb;
カード本体の枠線です。1pxを大きくすると枠線が太くなります。

border-radius:12px;
カード本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

height:360px;
PDF表示領域の高さです。値を大きくするとPDFが縦に広く表示され、小さくすると低くなります。

padding:20px;
カード本文の内側余白です。値を大きくするとタイトルや説明文とカード端との間隔が広がります。

margin:0 0 10px;
タイトル下側の余白です。10pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると狭くなります。

font-size:20px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。

レスポンシブ対応
PDFを表示するiframeにはwidth:100%を指定しているため、カードの横幅に合わせてPDF表示領域が広がります。ただし、このサンプルではカード本体にwidth:380pxを指定しており、画面幅に応じてカード自体を縮小するためのmax-widthやメディアクエリは設定していません。

コメント