iframeでGoogleマップ・YouTube・PDF・Webページをタブ切り替えで表示する方法

タブ切り替え
2025.10.03
無料ツール
タブ切り替えを自由に作成

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

タブ切り替え作成ツールを使う
新しいタブで開きます

iframeを使って、Googleマップ・YouTube動画・PDF・Webページをタブで切り替えて表示する方法を紹介します。4種類のコンテンツを1つの表示エリアにまとめ、タブをクリックすると選択したコンテンツだけが表示される仕組みです。

今回のデモでは、「Googleマップ」「YouTube」「PDF」「Webページ」の4つのタブを用意しています。最初は東京駅のGoogleマップが表示され、「YouTube」をクリックすると動画、「PDF」をクリックするとサンプル文書、「Webページ」をクリックすると別のWebページへ切り替わります。

選択中のタブは青色で表示され、ほかのタブをクリックすると選択状態も切り替わります。各コンテンツはiframe内に表示され、GoogleマップやPDFは縦長の表示領域、YouTube動画は16:9の比率で表示する構成です。

スマートフォンでは4つのタブが2列に並び、画面幅に合わせて表示領域の高さや余白も変わります。タブの切り替えにはJavaScriptを使用し、ページ全体を再読み込みせずに表示内容を変更できます。

デモ

iframeでコンテンツを切り替え表示

タブをクリックすると、Googleマップ・YouTube動画・PDF・Webページを切り替えて表示できます。

東京駅のGoogleマップ

4つのタブをクリックすると、iframe内に表示するコンテンツが切り替わります。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <meta charset="UTF-8">
  <!-- スマートフォンなどの画面幅に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ページタイトル -->
  <title>iframeでコンテンツをタブ切り替え表示</title>
  <!-- タブとiframeのCSSを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

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

    <!-- タイトル -->
    <div class="iframe-tab-content-switch_title">
      iframeでコンテンツを切り替え表示
    </div>

    <!-- 説明文 -->
    <p class="iframe-tab-content-switch_text">
      タブをクリックすると、Googleマップ・YouTube動画・PDF・Webページを切り替えて表示できます。
    </p>

    <!-- 4種類のコンテンツを切り替えるタブ -->
    <div class="iframe-tab-content-switch_tabs" role="tablist" aria-label="コンテンツの種類">

      <button
        class="iframe-tab-content-switch_tab is-active"
        type="button"
        role="tab"
        id="iframe-tab-content-switch-tab-map"
        aria-controls="iframe-tab-content-switch-panel-map"
        aria-selected="true"
        data-tab="map">
        Googleマップ
      </button>

      <button
        class="iframe-tab-content-switch_tab"
        type="button"
        role="tab"
        id="iframe-tab-content-switch-tab-video"
        aria-controls="iframe-tab-content-switch-panel-video"
        aria-selected="false"
        data-tab="video">
        YouTube
      </button>

      <button
        class="iframe-tab-content-switch_tab"
        type="button"
        role="tab"
        id="iframe-tab-content-switch-tab-pdf"
        aria-controls="iframe-tab-content-switch-panel-pdf"
        aria-selected="false"
        data-tab="pdf">
        PDF
      </button>

      <button
        class="iframe-tab-content-switch_tab"
        type="button"
        role="tab"
        id="iframe-tab-content-switch-tab-page"
        aria-controls="iframe-tab-content-switch-panel-page"
        aria-selected="false"
        data-tab="page">
        Webページ
      </button>

    </div>

    <!-- Googleマップ -->
    <div
      class="iframe-tab-content-switch_panel is-active"
      id="iframe-tab-content-switch-panel-map"
      role="tabpanel"
      aria-labelledby="iframe-tab-content-switch-tab-map"
      data-panel="map">

      <p class="iframe-tab-content-switch_label">
        Googleマップ
      </p>

      <div class="iframe-tab-content-switch_frame">

        <!--
          Googleマップの埋め込みURLを設定します。

          1. Googleマップで表示したい場所を検索します。
          2. 「共有」から「地図を埋め込む」を選択します。
          3. 「HTMLをコピー」をクリックします。
          4. コピーしたiframeコードのsrc属性からURLを取得します。
          5. YOUR_GOOGLE_MAP_EMBED_URLを取得したURLに置き換えます。

          Google Maps JavaScript APIやAPIキーは不要です。
        -->
        <iframe
          src="YOUR_GOOGLE_MAP_EMBED_URL"
          title="Googleマップ"
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"
          allowfullscreen>
        </iframe>

      </div>

    </div>

    <!-- YouTube動画 -->
    <div
      class="iframe-tab-content-switch_panel"
      id="iframe-tab-content-switch-panel-video"
      role="tabpanel"
      aria-labelledby="iframe-tab-content-switch-tab-video"
      data-panel="video"
      hidden>

      <p class="iframe-tab-content-switch_label">
        YouTube動画
      </p>

      <div class="iframe-tab-content-switch_frame is-video">

        <!--
          YouTube動画の埋め込みURLを設定します。

          1. YouTubeで表示したい動画を開きます。
          2. 「共有」から「埋め込む」を選択します。
          3. 表示されたiframeコードのsrc属性からURLを取得します。
          4. YOUR_YOUTUBE_EMBED_URLを取得したURLに置き換えます。

          通常の動画ページURLではなく、埋め込み用URLを使用します。
          例：https://www.youtube.com/embed/動画ID
        -->
        <iframe
          src="YOUR_YOUTUBE_EMBED_URL"
          title="YouTube動画"
          loading="lazy"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerpolicy="strict-origin-when-cross-origin"
          allowfullscreen>
        </iframe>

      </div>

    </div>

    <!-- PDF -->
    <div
      class="iframe-tab-content-switch_panel"
      id="iframe-tab-content-switch-panel-pdf"
      role="tabpanel"
      aria-labelledby="iframe-tab-content-switch-tab-pdf"
      data-panel="pdf"
      hidden>

      <p class="iframe-tab-content-switch_label">
        PDF
      </p>

      <div class="iframe-tab-content-switch_frame is-pdf">

        <!--
          PDFファイルのURLを設定します。

          1. 表示したいPDFファイルを用意します。
          2. PDFをWebサーバーへアップロードします。
          3. ブラウザからアクセスできるPDFのURLを取得します。
          4. YOUR_PDF_URLを取得したURLに置き換えます。

          例：https://example.com/documents/sample.pdf
        -->
        <iframe
          src="YOUR_PDF_URL"
          title="PDF文書"
          loading="lazy">
        </iframe>

      </div>

    </div>

    <!-- Webページ -->
    <div
      class="iframe-tab-content-switch_panel"
      id="iframe-tab-content-switch-panel-page"
      role="tabpanel"
      aria-labelledby="iframe-tab-content-switch-tab-page"
      data-panel="page"
      hidden>

      <p class="iframe-tab-content-switch_label">
        Webページ
      </p>

      <div class="iframe-tab-content-switch_frame is-page">

        <!--
          iframeで表示したいWebページのURLを設定します。

          1. 表示したいWebページをブラウザで開きます。
          2. アドレスバーからページのURLをコピーします。
          3. YOUR_WEB_PAGE_URLを取得したURLに置き換えます。

          例：https://example.com/sample/

          注意：
          iframeへの埋め込みを禁止しているWebページは表示できません。
          自分で管理しているページなど、埋め込み可能なURLを指定してください。
        -->
        <iframe
          src="YOUR_WEB_PAGE_URL"
          title="Webページ"
          loading="lazy">
        </iframe>

      </div>

    </div>

  </div>

  <!-- タブ切り替え用のJavaScriptを読み込む -->
  <script src="script.js"></script>
</body>
</html>

各iframeのsrc属性を変更すると、表示するGoogleマップ・YouTube動画・PDF・Webページを差し替えられます。埋め込みURLの取得方法や設定手順は、下記の「ファイル構成と設置方法」で説明します。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

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

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

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

  1. ① InfinityFreeの無料サーバー準備
  2. ② File Managerでアップロード・公開

ファイル構成と設置方法

今回のサンプルでは、4つのタブと、それぞれに対応するiframeを使用しています。 HTMLでGoogleマップ・YouTube動画・PDF・Webページの表示先を指定し、CSSでタブやiframeの外観を設定します。 JavaScriptでは、クリックされたタブに対応するコンテンツだけを表示する処理を行っています。 実際に使用する場合は、4種類のコンテンツのURLを利用者自身で用意してください。 

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

各ファイルの役割
index.htmlには、4つのタブと、それぞれに対応する表示パネルを配置しています。 各パネルにはiframeがあり、src属性に表示するコンテンツのURLを設定します。 タブの文字やiframeのタイトルも、このファイルで変更できます。

style.cssでは、タブの配置・背景色・枠線・選択状態のデザインや、各iframeの表示サイズを設定しています。 Googleマップ・PDF・Webページはそれぞれ高さを指定し、YouTube動画は16:9の比率で表示します。

script.jsでは、クリックされたタブの識別子を取得し、対応するパネルの表示状態を切り替えています。 選択中のタブにはis-activeクラスを付け、ほかのタブからは取り除きます。

設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。 sampleフォルダ内にあるindex.html・style.css・script.jsを同じ階層に配置します。

index.htmlに記述されている4つのiframeのURLを、表示したいコンテンツのURLへ変更してください。 変更後にindex.htmlをブラウザで開くと、最初はGoogleマップのタブが選択された状態で表示されます。 ほかのタブをクリックすると、対応するコンテンツへ切り替わります。

Googleマップ・YouTube動画・外部Webページを表示するには、インターネット接続が必要です。 PDFについても外部サーバー上のファイルを指定した場合は、ネットワーク接続が必要になります。

タブと表示パネルを対応させる仕組み
各タブにはdata-tab属性、各表示パネルにはdata-panel属性を設定しています。 この2つの値を一致させることで、クリックされたタブに対応するコンテンツを特定します。

例えば、Googleマップのタブにはdata-tab="map"を設定し、Googleマップの表示パネルにはdata-panel="map"を設定しています。 

<!-- Googleマップのタブ -->
<button
  class="iframe-tab-content-switch_tab is-active"
  type="button"
  role="tab"
  id="iframe-tab-content-switch-tab-map"
  aria-controls="iframe-tab-content-switch-panel-map"
  aria-selected="true"
  data-tab="map">
  Googleマップ
</button>
<!-- Googleマップの表示パネル -->
<div
  class="iframe-tab-content-switch_panel is-active"
  id="iframe-tab-content-switch-panel-map"
  role="tabpanel"
  aria-labelledby="iframe-tab-content-switch-tab-map"
  data-panel="map">

YouTubeではvideo、PDFではpdf、Webページではpageを使用しています。 タブの識別子を変更する場合は、対応するパネルの値も同じ文字列に変更してください。

また、aria-controlsには対応するパネルのIDを指定し、パネル側のaria-labelledbyにはタブのIDを指定しています。 これらの属性によって、タブと表示パネルの関係を示しています。

JavaScriptによるタブ切り替え処理
script.jsでは、各タブにクリックイベントを登録しています。 タブがクリックされるとdata-tabの値を取得し、対応する表示パネルを探します。 

// クリックされたタブの識別子を取得する
const target = tab.dataset.tab;

取得した値は変数targetに入ります。 例えば「PDF」のタブをクリックすると、targetには"pdf"が入ります。

続いて、すべてのタブの選択状態を更新します。 

// すべてのタブの選択状態を更新する
tabs.forEach(function(item) {

  // クリックされたタブかどうかを判定する
  const isActive = item === tab;

  // 選択中のタブだけis-activeを付ける
  item.classList.toggle("is-active", isActive);

  // 選択状態を更新する
  item.setAttribute("aria-selected", String(isActive));

});

is-activeクラスが付いたタブは、CSSによって青い背景と白い文字で表示されます。 aria-selected属性も更新し、選択中のタブをtrue、それ以外をfalseにします。

表示パネルについても、同じ識別子を持つパネルだけを表示します。 

// すべてのパネルの表示状態を更新する
panels.forEach(function(panel) {

  // 選択したタブに対応するパネルかどうかを判定する
  const isActive = panel.dataset.panel === target;

  // 対応するパネルだけis-activeを付ける
  panel.classList.toggle("is-active", isActive);

  // 対応しないパネルを非表示にする
  panel.hidden = !isActive;

});

data-panelとtargetが一致したパネルだけにis-activeクラスが付きます。 それ以外のパネルにはhidden属性が設定され、非表示になります。

CSSにも.iframe-tab-content-switch_panel[hidden]を指定しているため、選択されていないパネルは表示されません。 なお、タブを切り替えてもiframe自体は削除されないため、再生中のYouTube動画がそのまま再生される場合があります。

Googleマップの埋め込みURLを取得する方法
Googleマップを表示するには、通常の地図ページのURLではなく、iframe用の埋め込みURLを使用します。

まず、Googleマップで表示したい場所を検索してください。 対象の場所を表示したら「共有」をクリックし、「地図を埋め込む」を選択します。 続いて「HTMLをコピー」をクリックすると、iframeの埋め込みコードを取得できます。

コピーしたコードには、次のようなsrc属性が含まれています。 

<iframe
  src="Googleマップの埋め込みURL"
></iframe>

src属性に指定されているURLだけをコピーし、index.htmlのYOUR_GOOGLE_MAP_EMBED_URLへ設定してください。

変更する場所は次の部分です。 

<iframe
  src="YOUR_GOOGLE_MAP_EMBED_URL"
  title="Googleマップ"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allowfullscreen>
</iframe>

YOUR_GOOGLE_MAP_EMBED_URLを、取得した埋め込みURLに置き換えます。 URLに&が含まれる場合は、HTMLの属性値では&amp;と記述してください。

今回はGoogle Maps JavaScript APIを使用していないため、APIキーやMap IDを取得する必要はありません。

YouTube動画の埋め込みURLを取得する方法
YouTube動画を表示する場合も、iframe用の埋め込みURLを使用します。

YouTubeで表示したい動画を開き、「共有」から「埋め込む」を選択してください。 表示されたiframeコードのsrc属性に、動画の埋め込みURLが記述されています。

YouTubeの埋め込みURLは、次の形式です。 

https://www.youtube.com/embed/動画ID

動画IDは動画ごとに異なる文字列です。 通常の動画ページURLから確認することもできます。 例えば、次のURLの場合はv=の後ろにある文字列が動画IDです。 

https://www.youtube.com/watch?v=aqz-KE-bpKQ

この動画のIDはaqz-KE-bpKQなので、埋め込みURLは次のようになります。 

https://www.youtube.com/embed/aqz-KE-bpKQ

取得したURLを、index.htmlのYOUR_YOUTUBE_EMBED_URLへ設定してください。 

<iframe
  src="YOUR_YOUTUBE_EMBED_URL"
  title="YouTube動画"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

設定後に「YouTube」タブをクリックすると、指定した動画のプレーヤーが表示されます。 動画は自動再生されないため、再生する場合はプレーヤーの再生ボタンをクリックしてください。

なお、動画の投稿者が外部サイトへの埋め込みを禁止している場合は表示できません。 また、埋め込み動画の再生にはインターネット接続が必要です。

PDFファイルを用意して表示する方法
PDFを表示するには、ブラウザからアクセスできるPDFファイルのURLが必要です。 自分で作成したPDFをWebサーバーへアップロードし、そのファイルのURLを取得してください。

WordPressを使用している場合は、管理画面の「メディア」からPDFファイルをアップロードできます。 アップロード後に表示されるファイルのURLをコピーしてください。

PDFのURLは、例えば次のような形式です。 

https://example.com/documents/sample.pdf

取得したURLを、index.htmlのYOUR_PDF_URLへ設定します。 

<iframe
  src="YOUR_PDF_URL"
  title="PDF文書"
  loading="lazy">
</iframe>

PDFを自分のサーバーに配置している場合は、同じサイト内のファイルを指定することもできます。

設定後に「PDF」タブをクリックすると、ブラウザのPDF表示機能を使用して文書が表示されます。 PDFの拡大・縮小、印刷、ダウンロードなどの操作方法は、ブラウザや端末によって異なります。 環境によってはiframe内にPDFが表示されず、ダウンロードなどの動作になる場合もあります。

Webページをiframeで表示する方法
Webページを表示する場合は、表示したいページのURLをiframeのsrc属性に指定します。

まず、ブラウザで対象のWebページを開き、アドレスバーからURLをコピーしてください。 例えば、次のようなURLです。 

https://example.com/sample/

取得したURLを、index.htmlのYOUR_WEB_PAGE_URLへ設定します。 

<iframe
  src="YOUR_WEB_PAGE_URL"
  title="Webページ"
  loading="lazy">
</iframe>

設定後に「Webページ」タブをクリックすると、指定したページがiframe内に表示されます。

ただし、すべてのWebページをiframeで表示できるわけではありません。 表示先のWebサイトがX-Frame-OptionsやContent-Security-Policyなどで埋め込みを制限している場合は、URLが正しくても表示できません。

自分で管理しているWebページなど、iframeへの埋め込みが許可されているページを指定してください。 また、iframe内のWebページは、そのページ自身のレイアウトで表示されるため、横幅によってはスクロールが必要になる場合があります。

iframeの表示サイズを変更する方法
style.cssでは、コンテンツの種類ごとにiframeの表示高さを設定しています。

Googleマップは.iframe-tab-content-switch_frameで高さを指定しています。 

/* Googleマップの表示領域 */
.iframe-tab-content-switch_frame {
  width: 100%; /* パネルの横幅に合わせる */
  height: 420px; /* Googleマップの表示高さ */
}

height: 420px;を大きくすると地図の表示領域が縦に広がり、小さくすると低くなります。

PDFとWebページは、それぞれ専用のクラスで高さを指定しています。 

/* PDFの表示領域 */
.iframe-tab-content-switch_frame.is-pdf {
  height: 520px; /* PDFの表示高さ */
}

/* Webページの表示領域 */
.iframe-tab-content-switch_frame.is-page {
  height: 500px; /* Webページの表示高さ */
}

PDFの520px、Webページの500pxを変更すると、それぞれの表示領域の高さを調整できます。

YouTube動画には固定の高さを指定せず、aspect-ratioを使用しています。 

/* YouTube動画の表示領域 */
.iframe-tab-content-switch_frame.is-video {
  height: auto; /* 高さの固定を解除する */
  aspect-ratio: 16 / 9; /* 動画を16:9の比率で表示する */
}

aspect-ratio: 16 / 9;によって、横幅に合わせて高さが自動的に決まります。 そのため、PCとスマートフォンのどちらでも16:9の比率を維持して動画を表示できます。

タブのデザインと全体の横幅を変更する方法
タブの背景色や文字色は、style.cssの.iframe-tab-content-switch_tabで設定しています。 選択中のタブは.iframe-tab-content-switch_tab.is-activeで指定します。 

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

backgroundを変更すると選択中のタブの背景色、colorを変更すると文字色を調整できます。

タブを含む全体の横幅は、.iframe-tab-content-switch_wrapのmax-width: 700px;で設定しています。 値を大きくすると表示領域が横に広がり、小さくするとコンパクトになります。

また、padding: 32px;を変更すると、外枠と内部コンテンツとの間隔を調整できます。

レスポンシブ対応
style.cssでは、全体の横幅にwidth: 100%;とmax-width: 700px;を設定しています。 広い画面では最大700pxまで表示し、狭い画面では設置先の横幅に合わせて縮小します。

画面幅が640px以下になると、4つのタブを2列に配置します。 タブの内側余白や文字サイズも小さくし、スマートフォンで操作しやすい配置に切り替えています。 

/* タブを2列に配置する */
.iframe-tab-content-switch_tabs {
  flex-wrap: wrap; /* タブの折り返しを許可する */
  gap: 6px; /* タブ同士の間隔 */
  border-bottom: none; /* 下部の区切り線をなくす */
}

/* スマートフォン用のタブ */
.iframe-tab-content-switch_tab {
  flex: 1 1 calc(50% - 3px); /* 2列に並べる */
  padding: 12px 6px; /* タブ内側の余白 */
  border: 1px solid #d1d5db; /* 四辺に枠線を付ける */
  border-radius: 8px; /* 四隅を角丸にする */
  font-size: 13px; /* 文字サイズ */
}

Googleマップの表示高さは420pxから320px、PDFは520pxから420px、Webページは500pxから360pxに変更しています。 YouTube動画は16:9の比率を維持するため、スマートフォンでも横幅に合わせて表示されます。

タブの列数やiframeの高さを変更したい場合は、@media (max-width: 640px)内の設定を調整してください。

この記事の動作・特徴

コンテンツ

画像・YouTube・PDF・Googleマップ・iframe・MP3・MP4などのコンテンツをUI内に追加する記事。

その他のコードを探す

こちらもおすすめ

タブ切り替え
タブ切り替えのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント