PDFをタブ切り替えに表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

タブ項目・サイズ・色・余白・初期表示などを設定して、HTML・CSS・JavaScriptを自動生成できます。

PDFをタブ切り替えに表示する方法

PDFをタブ切り替えに表示する方法を紹介します。このサンプルでは、複数のPDFを1つの表示エリアにまとめ、「青PDF」「赤PDF」「黄色PDF」のタブをクリックすると、選択したPDFだけを表示できるようにします。PDFごとに大きな表示領域を用意する必要がないため、複数の資料を整理して掲載したい場合に使いやすい構成です。

商品資料、会社案内、マニュアル、会員向け資料、管理画面の確認用ファイルなど、複数のPDFを切り替えて見せたい場面に利用できます。JavaScriptでは、クリックしたタブと対応するPDFパネルへis-activeクラスを付け替え、選択したPDFだけを表示します。

HTMLではタブ名、PDFの表示名、各iframeへ設定するPDFファイルを変更できます。CSSでは全体の横幅、余白、タブの色、枠線、角丸、PDF表示領域の高さなどを調整できます。PDFは横幅100%で表示されるため、スマートフォン・タブレット・PCでも利用しやすい構成です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

PDFをタブ切り替えで表示

タブをクリックすると、青・赤・黄色のPDFへ切り替わります。

青バージョンPDF

赤バージョンPDF

黄色バージョン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>

  <!-- タブ切り替え全体 -->
  <div class="pdf-tab-switch_wrap">

    <!-- タイトル -->
    <div class="pdf-tab-switch_title">
      PDFをタブ切り替えで表示
    </div>

    <!-- 説明文 -->
    <p class="pdf-tab-switch_text">
      タブをクリックすると、表示するPDFを切り替えられます。
    </p>

    <!-- タブ -->
    <div class="pdf-tab-switch_tabs">

      <button
        class="pdf-tab-switch_tab is-active"
        type="button"
        data-tab="pdf1">
        PDF1
      </button>

      <button
        class="pdf-tab-switch_tab"
        type="button"
        data-tab="pdf2">
        PDF2
      </button>

      <button
        class="pdf-tab-switch_tab"
        type="button"
        data-tab="pdf3">
        PDF3
      </button>

    </div>

    <!-- PDF1 -->
    <div
      class="pdf-tab-switch_panel is-active"
      data-panel="pdf1">

      <p class="pdf-tab-switch_label">
        PDF1
      </p>

      <div class="pdf-tab-switch_frame">

        <!-- 表示したいPDFを pdf フォルダへ配置 -->
        <iframe
          src="pdf/pdf1.pdf"
          title="PDF1">
        </iframe>

      </div>

    </div>

    <!-- PDF2 -->
    <div
      class="pdf-tab-switch_panel"
      data-panel="pdf2">

      <p class="pdf-tab-switch_label">
        PDF2
      </p>

      <div class="pdf-tab-switch_frame">

        <!-- 表示したいPDFを pdf フォルダへ配置 -->
        <iframe
          src="pdf/pdf2.pdf"
          title="PDF2">
        </iframe>

      </div>

    </div>

    <!-- PDF3 -->
    <div
      class="pdf-tab-switch_panel"
      data-panel="pdf3">

      <p class="pdf-tab-switch_label">
        PDF3
      </p>

      <div class="pdf-tab-switch_frame">

        <!-- 表示したいPDFを pdf フォルダへ配置 -->
        <iframe
          src="pdf/pdf3.pdf"
          title="PDF3">
        </iframe>

      </div>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* タブ切り替え全体 */
.pdf-tab-switch_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.pdf-tab-switch_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  color:#111827; /* タイトルの文字色 */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.pdf-tab-switch_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* タブ一覧 */
.pdf-tab-switch_tabs{
  display:flex; /* タブを横並びにする */
  width:100%; /* 横幅いっぱいに表示 */
  border-bottom:1px solid #d1d5db; /* タブ下側の境界線 */
}

/* タブ */
.pdf-tab-switch_tab{
  flex:1; /* 3つのタブを均等幅にする */
  margin:0; /* 外側余白を削除 */
  padding:14px; /* 内側余白。値を大きくするとタブが高くなる */
  border:1px solid #d1d5db; /* タブの枠線 */
  border-bottom:none; /* 下側の枠線を削除 */
  border-radius:12px 12px 0 0; /* 上側のみ角丸にする */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-weight:700; /* タブ文字を太字にする */
  cursor:pointer; /* マウスポインターを指型にする */
}

/* 2つ目以降のタブ */
.pdf-tab-switch_tab + .pdf-tab-switch_tab{
  margin-left:6px; /* タブ同士の間隔。値を大きくすると間隔が広がる */
}

/* 選択中のタブ */
.pdf-tab-switch_tab.is-active{
  background:#2563eb; /* 選択中の背景色 */
  color:#ffffff; /* 選択中の文字色 */
}

/* PDFパネル */
.pdf-tab-switch_panel{
  display:none; /* 初期状態では非表示 */
  padding:18px; /* PDF周囲の内側余白 */
  border:1px solid #d1d5db; /* パネルの枠線 */
  border-top:none; /* タブとの境界部分の枠線を削除 */
  background:#ffffff; /* パネルの背景色 */
}

/* 選択中のPDFパネル */
.pdf-tab-switch_panel.is-active{
  display:block; /* 選択したPDFを表示 */
}

/* PDFラベル */
.pdf-tab-switch_label{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:18px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベルを太字にする */
  color:#111827; /* ラベルの文字色 */
}

/* PDF表示領域 */
.pdf-tab-switch_frame{
  width:100%; /* 横幅いっぱいに表示 */
  height:520px; /* PDF表示領域の高さ。値を大きくすると高くなる */
}

/* PDF */
.pdf-tab-switch_frame iframe{
  display:block; /* iframe下部の余分な隙間を防ぐ */
  width:100%; /* 表示領域の横幅いっぱいに表示 */
  height:100%; /* 表示領域の高さいっぱいに表示 */
  max-width:none; /* 最大横幅の制限を解除 */
  margin:0; /* 外側余白を削除 */
  border:1px solid #e5e7eb; /* PDF表示領域の枠線 */
  border-radius:12px; /* PDF表示領域の角丸 */
  box-sizing:border-box; /* borderを横幅と高さへ含める */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* タブ切り替え全体 */
  .pdf-tab-switch_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* タブ */
  .pdf-tab-switch_tab{
    padding:12px 8px; /* スマートフォンではタブの余白を小さくする */
  }

  /* PDF表示領域 */
  .pdf-tab-switch_frame{
    height:420px; /* スマートフォンではPDF表示領域を420pxにする */
  }

}

// すべてのタブを取得
const pdfTabSwitchTabs=
  document.querySelectorAll(".pdf-tab-switch_tab");

// すべてのPDFパネルを取得
const pdfTabSwitchPanels=
  document.querySelectorAll(".pdf-tab-switch_panel");

// 各タブへクリック処理を設定
pdfTabSwitchTabs.forEach(function(tab){

  // タブをクリックしたとき
  tab.addEventListener("click",function(){

    // クリックしたタブに設定されているPDF名を取得
    const target=tab.dataset.tab;

    // すべてのタブから選択状態を解除
    pdfTabSwitchTabs.forEach(function(item){

      item.classList.remove("is-active");

    });

    // すべてのPDFパネルを非表示状態にする
    pdfTabSwitchPanels.forEach(function(panel){

      panel.classList.remove("is-active");

    });

    // クリックしたタブを選択状態にする
    tab.classList.add("is-active");

    // 対応するPDFパネルを表示する
    document.querySelector(
      '.pdf-tab-switch_panel[data-panel="'+target+'"]'
    ).classList.add("is-active");

  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルと、表示するPDFファイルで構成されています。HTMLでは3つのタブと、それぞれのタブに対応するPDF表示エリアを作成し、iframeを使ってPDFを表示します。CSSではタブやPDF表示エリアのデザインを設定し、JavaScriptではクリックしたタブに対応するPDFへ表示を切り替えます。

sample/
├── index.html
├── style.css
├── script.js
└── pdf/
    ├── pdf1.pdf
    ├── pdf2.pdf
    └── pdf3.pdf

各ファイルの役割
index.htmlはタブとPDF表示エリアを構成するファイルです。「PDF1」「PDF2」「PDF3」のタブ名やPDFのラベルを変更できます。各iframeのsrcを変更すると、タブごとに表示するPDFファイルを変更できます。

style.cssはタブ切り替え全体のデザインを設定するファイルです。全体の横幅や余白、背景色、枠線、角丸、タブの色、PDF表示エリアの高さなどを変更できます。

script.jsはタブをクリックしたときの切り替え処理を行うファイルです。クリックされたタブのdata-tabを取得し、同じ値をdata-panelに持つPDFパネルだけを表示します。

pdf/pdf1.pdf・pdf/pdf2.pdf・pdf/pdf3.pdfは、各タブで実際に表示するPDFファイルです。別のPDFを利用する場合は、PDFファイルをこのフォルダへ配置し、index.htmlのiframeに指定しているsrcを配置したファイル名に合わせて変更します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中にpdfフォルダを作成してpdf1.pdf、pdf2.pdf、pdf3.pdfを配置します。ファイルを配置したあと、sample/index.htmlをブラウザで開いてください。最初は「PDF1」が選択された状態でpdf1.pdfが表示されます。「PDF2」「PDF3」をクリックすると、それぞれ対応するPDFへ表示が切り替わります。

カスタマイズできる内容
index.htmlではタブに表示する「PDF1」「PDF2」「PDF3」の文章、PDF上部のラベル、iframeのsrcとtitleを変更できます。別のPDFを表示したい場合は、pdfフォルダへPDFファイルを配置してsrc="pdf/pdf1.pdf"などの指定を変更します。

style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、タブの背景色や文字色、PDF表示領域の高さなどを変更できます。選択中のタブは.pdf-tab-switch_tab.is-activeで設定しているため、通常のタブとは別に色を調整できます。

数値調整
style.css
max-width:700px;
タブ切り替え全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
全体の内側余白です。値を大きくすると内容と外側の枠線との間隔が広がります。

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

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

padding:14px;
各タブの内側余白です。値を大きくするとタブが高くなり、小さくするとコンパクトになります。

border-radius:12px 12px 0 0;
タブ上部の角丸です。12pxを大きくすると上側の丸みが強くなります。

margin-left:6px;
2つ目以降のタブとの間隔です。値を大きくするとタブ同士の間隔が広がります。

padding:18px;
PDFパネル内側の余白です。値を大きくするとPDFとパネルの枠線との間隔が広がります。

font-size:18px;
PDF上部に表示するラベルの文字サイズです。値を大きくすると文字が大きくなります。

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

@media (max-width:640px)
画面幅が640px以下になった場合にスマートフォン向けの設定へ切り替える基準です。

height:420px;
画面幅640px以下で使用するPDF表示領域の高さです。値を変更するとスマートフォン表示時のPDF領域の高さが変わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてタブ切り替え全体が縮小されます。PDFを表示するiframeにもwidth:100%を指定しているため、親要素の横幅に合わせて表示されます。さらに画面幅640px以下では全体の余白をpadding:24px 18px;、タブの余白をpadding:12px 8px;、PDF表示領域をheight:420px;へ変更しているため、スマートフォン・タブレット・PCで利用できます。