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

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

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

iframeをタブ切り替えに表示する方法を紹介します。このサンプルでは、3つのタブを用意し、クリックしたタブに対応するWebページだけをiframe内へ表示します。複数のWebページを同じ場所で切り替えて見せられるため、ページごとにiframeを縦へ並べる必要がなく、表示エリアをコンパクトにまとめられます。

サービス紹介ページや管理画面、会員サイト、Webサイト内の案内ページなど、複数のWebページを1つの表示エリアへまとめたい場合に利用できます。初期状態では「ページ1」を表示し、「ページ2」「ページ3」のタブをクリックするとJavaScriptで表示対象を切り替えます。選択中のタブは青色になるため、現在どのページを表示しているのかも確認しやすい構成です。

HTMLではタブ名、iframeのURL、表示するページ数を変更でき、CSSでは全体の横幅、余白、タブの色、角丸、iframeの高さなどを調整できます。iframeは横幅100%で表示されるため画面幅に合わせて縮小でき、スマートフォン・タブレット・PCで利用できます。HTML・CSS・バニラJavaScriptだけで実装できる、複数のiframeをタブで整理したい場合に使いやすいサンプルです。

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

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

デモ

iframeをタブ切り替えで表示

タブをクリックすると、青・赤・黄色のサンプルページへ切り替わります。

青バージョン

赤バージョン

黄色バージョン

「青ページ」「赤ページ」「黄色ページ」のタブをクリックすると、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>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

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

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

    <!-- 説明文 -->
    <p class="iframe-tab-switch_text">
      タブをクリックすると、対応するページへ切り替わります。
    </p>

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

      <button class="iframe-tab-switch_tab is-active" type="button" data-tab="page1">
        ページ1
      </button>

      <button class="iframe-tab-switch_tab" type="button" data-tab="page2">
        ページ2
      </button>

      <button class="iframe-tab-switch_tab" type="button" data-tab="page3">
        ページ3
      </button>

    </div>

    <!-- ページ1 -->
    <div class="iframe-tab-switch_panel is-active" data-panel="page1">

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

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

        <!-- src属性へ表示したいページのURLを指定 -->
        <iframe
          src="about:blank"
          title="ページ1">
        </iframe>

      </div>

    </div>

    <!-- ページ2 -->
    <div class="iframe-tab-switch_panel" data-panel="page2">

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

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

        <!-- src属性へ表示したいページのURLを指定 -->
        <iframe
          src="about:blank"
          title="ページ2">
        </iframe>

      </div>

    </div>

    <!-- ページ3 -->
    <div class="iframe-tab-switch_panel" data-panel="page3">

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

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

        <!-- src属性へ表示したいページのURLを指定 -->
        <iframe
          src="about:blank"
          title="ページ3">
        </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; /* 使用するフォント */
  box-sizing:border-box; /* paddingを横幅へ含める */
}

/* タブ切り替え全体 */
.iframe-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を横幅へ含める */
}

/* タイトル */
.iframe-tab-switch_title{
  margin:0 0 12px; /* タイトル下の余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* 太字 */
  text-align:center; /* 中央揃え */
}

/* 説明文 */
.iframe-tab-switch_text{
  margin:0 0 24px; /* タブとの間隔 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 行間 */
  text-align:center; /* 中央揃え */
}

/* タブ一覧 */
.iframe-tab-switch_tabs{
  display:flex; /* タブを横並びにする */
  border-bottom:1px solid #d1d5db; /* 下側の枠線 */
}

/* タブ */
.iframe-tab-switch_tab{
  flex:1; /* タブを同じ横幅にする */
  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つ目以降のタブ */
.iframe-tab-switch_tab + .iframe-tab-switch_tab{
  margin-left:6px; /* タブ同士の間隔 */
}

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

/* iframeパネル */
.iframe-tab-switch_panel{
  display:none; /* 通常は非表示 */
  padding:18px; /* パネルの内側余白 */
  border:1px solid #d1d5db; /* パネルの枠線 */
  border-top:none; /* 上側の枠線を非表示 */
  background:#ffffff; /* パネルの背景色 */
}

/* 選択中のiframeパネル */
.iframe-tab-switch_panel.is-active{
  display:block; /* 選択中のパネルだけ表示 */
}

/* iframe上部のラベル */
.iframe-tab-switch_label{
  margin:0 0 12px; /* iframeとの間隔 */
  font-size:18px; /* ラベルの文字サイズ */
  font-weight:700; /* 太字 */
  color:#111827; /* ラベルの文字色 */
}

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

/* iframe */
.iframe-tab-switch_frame iframe{
  display:block; /* 余計な隙間をなくす */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  height:100%; /* 親要素の高さいっぱいに表示 */
  border:1px solid #e5e7eb; /* iframeの枠線 */
  border-radius:12px; /* iframeの角丸 */
  background:#ffffff; /* iframe表示領域の背景色 */
  box-sizing:border-box; /* borderをサイズへ含める */
}

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

  /* ページ全体 */
  body{
    padding:24px 12px; /* スマートフォンでは左右余白を小さくする */
  }

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

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

  /* iframeパネル */
  .iframe-tab-switch_panel{
    padding:12px; /* スマートフォンではパネルの余白を小さくする */
  }

  /* iframe表示エリア */
  .iframe-tab-switch_frame{
    height:360px; /* スマートフォンでのiframeの高さ */
  }

}

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

/* すべてのiframeパネルを取得 */
const iframeTabSwitchPanels=document.querySelectorAll(".iframe-tab-switch_panel");

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

  tab.addEventListener("click",function(){

    /* クリックしたタブの切り替え先を取得 */
    const target=tab.dataset.tab;

    /* すべてのタブから選択状態を解除 */
    iframeTabSwitchTabs.forEach(function(item){
      item.classList.remove("is-active");
    });

    /* すべてのパネルを非表示状態にする */
    iframeTabSwitchPanels.forEach(function(panel){
      panel.classList.remove("is-active");
    });

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

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

  });

});

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではタブとiframe表示エリアを作成し、CSSでは全体のレイアウトやタブ、iframeのデザインを設定します。JavaScriptではクリックされたタブに対応するiframeパネルへ表示を切り替えます。iframeへ表示するページ自体はサンプルに含まれていないため、利用する際は表示したいページのURLを各iframeのsrc属性へ指定してください。

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

各ファイルの役割
index.htmlはタブとiframe表示エリアを構成するファイルです。「ページ1」「ページ2」「ページ3」のタブ名やラベルを変更できます。各iframeのsrc属性には初期状態でabout:blankを指定しているため、実際に使用するときは利用者自身が表示したいページのURLへ変更します。タブのdata-tabとパネルのdata-panelを同じ値にすることで、それぞれのタブとパネルを対応させています。

style.cssはタブ切り替え全体のデザインを設定するファイルです。全体の横幅や余白、背景色、枠線、角丸、タブの通常時・選択時の色、パネルの余白、iframe表示エリアの高さなどを変更できます。画面幅640px以下では余白とiframeの高さを小さくする設定も行っています。

script.jsはタブをクリックしたときの表示切り替えを行うファイルです。クリックされたタブのdata-tabを取得し、すべてのタブとパネルからis-activeクラスを削除したあと、選択したタブと対応するパネルへis-activeクラスを追加します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。

配布コードにはiframeへ表示するWebページは含まれていません。index.htmlにある3つのiframeのsrc="about:blank"を、それぞれ表示したいページのURLへ変更して使用します。URLを設定した状態で「ページ1」「ページ2」「ページ3」をクリックすると、対応するiframeパネルへ表示が切り替わります。なお、表示先のWebサイトがiframeによる埋め込みを許可していない場合、そのページはiframe内へ表示できません。

カスタマイズできる内容
index.htmlでは、タイトル、説明文、各タブの文字、各パネルのラベル、iframeへ指定するURLを変更できます。タブを追加・変更する場合は、タブ側のdata-tabと対応するパネル側のdata-panelを同じ値にします。

style.cssでは、全体の最大横幅、余白、背景色、枠線、角丸、タブの背景色と文字色、タブ同士の間隔、パネルの余白、iframeの高さや角丸を変更できます。

数値調整
style.css
padding:40px 20px;
ページ全体の上下・左右の余白です。40pxが上下、20pxが左右の余白を表します。値を大きくすると画面端との間隔が広がります。

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

margin:40px auto;
タブ切り替え全体の上下余白です。40pxを大きくすると上下の間隔が広がります。

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

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

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

margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると説明文とタブの間隔が広がります。

padding:14px;
タブの内側余白です。値を大きくするとタブが大きくなります。

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

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

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

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

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

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

height:360px;
画面幅640px以下で使用するiframe表示エリアの高さです。値を大きくするとスマートフォンでの表示領域が高くなり、小さくすると低くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではタブ切り替え全体にwidth:100%とmax-width:700pxを指定し、画面幅に合わせて横幅が縮小するようにしています。iframeにもwidth:100%を指定しているため、パネルの横幅に合わせて表示されます。

画面幅640px以下では、ページ全体の余白を24px 12px、タブ切り替え全体の余白を24px 18px、タブを12px 8px、パネルを12pxへ変更し、iframeの高さを360pxへ調整しています。スマートフォン・タブレット・PCの画面幅に合わせて利用できます。