PDFをドロワーメニューで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

PDFをドロワーメニューで表示する方法

PDFをドロワーメニューで表示する方法を紹介します。PDFをページ内へ埋め込むことで、利用者は別のページへ移動したりファイルをダウンロードしたりせずに、資料の内容を確認できます。本記事では、HTML・CSS・JavaScriptだけを使い、ボタンをクリックすると画面左側からドロワーメニューが開き、その中へPDFを表示する仕組みを実装します。

サンプルコードでは、「PDFを表示」ボタンをクリックすると背景オーバーレイとドロワーメニューが表示され、iframe内でPDFを確認できます。「閉じる」ボタンまたはドロワーメニュー外側の背景をクリックすると閉じられます。iframeのsrc属性を書き換えることで、表示するPDFファイルを変更できます。

会社案内、利用規約、商品カタログ、操作マニュアル、申込書などを、企業サイトや会員サイト、ECサイト、管理画面から確認できるようにしたい場合に利用できます。HTMLではPDFファイルのURLや表示文言を変更でき、CSSではドロワーメニューの幅、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-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
          src属性へ表示したいPDFファイルのURLを指定する。

          PDFファイルは各自で用意し、
          WebサーバーへアップロードしたPDFのURLを設定する。
        -->
        <iframe
          src=""
          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>

/* ページ全体 */
body{
  margin:0; /* 外側の余白 */
  padding:40px 20px; /* 内側の余白 */
  background:#ffffff; /* 背景色 */
  font-family:sans-serif; /* フォント */
}

/* デモ全体 */
.pdf-drawer-menu_wrap{
  max-width:700px; /* 最大横幅：変更するとデモ全体の幅が変わる */
  margin:40px auto; /* 上下余白・中央配置 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:18px; /* 角丸 */
  background:#f8fafc; /* 背景色 */
  text-align:center; /* 中央揃え */
  box-sizing:border-box; /* paddingを幅に含める */
}

/* タイトル */
.pdf-drawer-menu_title{
  margin:0 0 12px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* 説明文 */
.pdf-drawer-menu_text{
  margin:0 0 24px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間：値を大きくすると行間が広がる */
}

/* PDFを表示するボタン */
.pdf-drawer-menu_open{
  padding:12px 24px; /* 内側余白 */
  border:none; /* 枠線なし */
  border-radius:8px; /* 角丸 */
  background:#0b6bff; /* 背景色 */
  color:#ffffff; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスカーソル */
}

/* ドロワーメニュー表示時の背景 */
.pdf-drawer-menu_overlay{
  display:none; /* 初期状態は非表示 */
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 全画面表示 */
  z-index:9999; /* 最前面へ配置 */
  align-items:stretch; /* 高さを画面全体へ広げる */
  justify-content:flex-start; /* 左側へ配置 */
  background:rgba(0,0,0,.5); /* 背景の暗さ：.5を大きくすると濃くなる */
}

/* ドロワーメニュー表示時 */
.pdf-drawer-menu_overlay.is-active{
  display:flex; /* 背景とドロワーメニューを表示 */
}

/* ドロワーメニュー本体 */
.pdf-drawer-menu_drawer{
  width:420px; /* 横幅：変更するとドロワーメニューの幅が変わる */
  max-width:90%; /* 小さい画面で画面幅を超えないようにする */
  height:100%; /* 画面の高さに合わせる */
  padding:28px; /* 内側余白 */
  overflow-y:auto; /* 内容が多い場合に縦スクロール */
  background:#ffffff; /* 背景色 */
  box-sizing:border-box; /* paddingを幅に含める */
  box-shadow:10px 0 40px rgba(0,0,0,.2); /* 右側の影 */
  animation:pdf-drawer-menu_slide .35s ease forwards; /* 0.35秒で左側から表示。値を大きくするとゆっくり動く */
}

/* ドロワーメニューのタイトル */
.pdf-drawer-menu_drawer-title{
  margin:0 0 16px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* ドロワーメニューの説明文 */
.pdf-drawer-menu_drawer-text{
  margin:0 0 20px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間：値を大きくすると行間が広がる */
}

/* PDF表示エリア */
.pdf-drawer-menu_pdf{
  width:100%; /* 横幅いっぱい */
  height:520px; /* 高さ：変更するとPDF表示領域の高さが変わる */
  margin-bottom:24px; /* 下余白 */
}

/* PDF表示用iframe */
.pdf-drawer-menu_pdf iframe{
  display:block; /* 余分な隙間を防ぐ */
  width:100%; /* 表示エリアの横幅に合わせる */
  height:100%; /* 表示エリアの高さに合わせる */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:12px; /* 角丸 */
  box-sizing:border-box; /* 枠線を幅に含める */
}

/* 閉じるボタン */
.pdf-drawer-menu_close{
  padding:10px 20px; /* 内側余白 */
  border:none; /* 枠線なし */
  border-radius:8px; /* 角丸 */
  background:#111827; /* 背景色 */
  color:#ffffff; /* 文字色 */
  font-size:15px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスカーソル */
}

/* 左側から表示するアニメーション */
@keyframes pdf-drawer-menu_slide{

  /* アニメーション開始時 */
  from{
    opacity:0; /* 透明な状態 */
    transform:translateX(-100%); /* 画面左側へ隠す */
  }

  /* アニメーション終了時 */
  to{
    opacity:1; /* 不透明な状態 */
    transform:translateX(0); /* 元の位置へ移動 */
  }

}

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

  /* デモ全体 */
  .pdf-drawer-menu_wrap{
    padding:24px 18px; /* 小さい画面で内側余白を狭くする */
  }

  /* ドロワーメニュー本体 */
  .pdf-drawer-menu_drawer{
    padding:24px 20px; /* 小さい画面で内側余白を狭くする */
  }

  /* PDF表示エリア */
  .pdf-drawer-menu_pdf{
    height:420px; /* 小さい画面でPDF表示領域の高さを調整 */
  }

}

// ドロワーメニューを開くボタンを取得
const drawerOpen=document.querySelector("[data-drawer-open]");

// ドロワーメニューを閉じるボタンを取得
const drawerClose=document.querySelector("[data-drawer-close]");

// ドロワーメニュー表示時の背景を取得
const drawerOverlay=document.querySelector("[data-drawer-overlay]");

// 開くボタンをクリックした時
drawerOpen.addEventListener("click",function(){

  // ドロワーメニューを表示
  drawerOverlay.classList.add("is-active");

});

// 閉じるボタンをクリックした時
drawerClose.addEventListener("click",function(){

  // ドロワーメニューを非表示
  drawerOverlay.classList.remove("is-active");

});

// 背景をクリックした時
drawerOverlay.addEventListener("click",function(event){

  // ドロワーメニュー本体以外の背景がクリックされた場合
  if(event.target===drawerOverlay){

    // ドロワーメニューを非表示
    drawerOverlay.classList.remove("is-active");

  }

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでドロワーメニュー、PDF表示用のiframe、開くボタン、閉じるボタンを作成し、CSSでドロワーメニューの配置やサイズ、背景オーバーレイ、PDF表示領域を設定します。JavaScriptでは、ボタン操作と背景クリックによるドロワーメニューの開閉を行います。

表示するPDFファイルは利用者が各自で用意します。用意したPDFをWebサーバーやWordPressのメディアライブラリへアップロードし、取得したPDFファイルのURLをindex.html内にあるiframeのsrc属性へ設定します。src属性が空の状態ではPDFは表示されません。

各ファイルを同じsampleフォルダへ配置し、PDFのURLを設定したあとにindex.htmlをブラウザで開くと動作を確認できます。特別な外部ライブラリやサーバー側の処理は使用せず、HTML・CSS・JavaScriptだけで実装できます。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.html
ドロワーメニュー本体、PDFを表示するiframe、開くボタン、閉じるボタンを記述します。iframeのsrc属性へPDFファイルのURLを指定すると、ドロワーメニュー内にPDFが表示されます。iframeのtitle属性も、表示するPDFの内容に合わせて変更できます。

style.css
ドロワーメニューの横幅、背景色、余白、影、背景オーバーレイ、PDF表示領域の高さ、枠線、角丸、表示アニメーションを設定します。

script.js
「PDFを表示」ボタンでドロワーメニューを開き、「閉じる」ボタンまたは背景部分のクリックで閉じる処理を記述します。

設置方法・使い方
① sampleフォルダを作成します。
② sampleフォルダ内へindex.html・style.css・script.jsを配置します。
③ 表示したいPDFファイルを用意します。
④ PDFファイルをWebサーバーまたはWordPressのメディアライブラリへアップロードします。
⑤ アップロードしたPDFファイルのURLを取得します。
⑥ index.html内のPDF表示用iframeにあるsrc属性へ、取得したPDFのURLを貼り付けます。
⑦ iframeのtitle属性を、表示するPDFの内容が分かる文字へ変更します。
⑧ sample/index.htmlをブラウザで開きます。
⑨ 「PDFを表示」ボタンをクリックすると、指定したPDFがドロワーメニュー内に表示されます。
⑩ 「閉じる」ボタンまたは背景部分をクリックするとドロワーメニューが閉じます。

カスタマイズできる内容
・index.htmlのiframeにあるsrc属性を変更すると、表示するPDFファイルを変更できます。
・index.htmlでは、タイトル、説明文、「PDFを表示」「閉じる」のボタン文字を変更できます。
・index.htmlのiframeにあるtitle属性は、表示するPDFの内容に合わせて変更できます。
・style.cssでは、ドロワーメニューの横幅、背景色、文字色、余白、影、PDF表示領域の高さ、枠線、角丸を変更できます。
・script.jsでは、開くボタン、閉じるボタン、背景クリックによる開閉処理を管理しています。

数値調整
・style.cssの「width:420px;」はドロワーメニューの横幅です。値を大きくすると広く、小さくすると狭くなります。
・style.cssの「height:520px;」はPDF表示領域の高さです。値を大きくするとPDFの表示領域が高くなり、小さくすると低くなります。
・style.cssの「animation:pdf-drawer-menu_slide .35s ease forwards;」にある「.35s」は、ドロワーメニューが左側から表示されるまでの時間です。値を大きくするとゆっくり、小さくすると速く表示されます。
・style.cssの「background:rgba(0,0,0,.5);」にある「.5」は背景オーバーレイの透明度です。値を1へ近づけると暗くなり、0へ近づけると明るくなります。
・640px以下の画面に指定している「height:420px;」を変更すると、スマートフォン表示時のPDF表示領域の高さが変わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでドロワーメニューに「max-width:90%;」、PDF表示用iframeに「width:100%;」と「height:100%;」を指定しているため、画面幅に合わせて表示サイズが調整されます。また、640px以下ではメディアクエリによってドロワーメニューの余白とPDF表示領域の高さを調整しています。スマートフォン・タブレット・PCで利用できます。