iframeをカルーセルで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

iframeをカルーセルで表示する方法

iframeをカルーセルで表示する方法を紹介します。HTML・CSS・JavaScriptを使い、複数のWebページや外部コンテンツをカルーセル形式で切り替え表示できるサンプルです。前へ・次へボタンやドットナビを使って、表示するiframeを簡単に切り替えられます。

このサンプルでは、各スライドにiframeを配置し、ボタン操作に合わせて表示内容を切り替えます。自社サイト内のページ紹介やサービス紹介、マニュアル、ダッシュボード、地図など、iframeで表示できるコンテンツを1つのスペースにまとめて見せたい場合に便利です。

iframeの表示先はHTML内のsrcを書き換えるだけで変更できます。また、スライド数を増やしたり減らしたりすることも容易なため、用途に合わせてカスタマイズしやすいカルーセルとして利用できます。

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

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

デモ

このデモでは、前へ・次へボタンやドットナビをクリックすると、表示するiframeが切り替わります。複数のページや外部コンテンツを1つのカルーセル内で確認できます。

青ページ

赤ページ

黄色ページ

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

<!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>

  <!-- iframeカルーセル全体 -->
  <div class="iframe-carousel_demo">

    <!-- カルーセル本体 -->
    <div class="iframe-carousel_box">

      <!-- 横にスライドするiframe一覧 -->
      <div class="iframe-carousel_track" id="iframe-carousel-track">

        <!-- スライド1 -->
        <div class="iframe-carousel_slide">

          <!-- iframeの見出し：表示するページ名に変更 -->
          <div class="iframe-carousel_title">
            ページ1
          </div>

          <!--
            iframe表示エリア

            src="【ここにURL1】" の部分に表示したいページのURLを入力します。

            例：
            src="https://example.com/"

            注意：
            サイトによっては iframe 表示を禁止している場合があります。
            その場合、URLを入力しても表示されません。
          -->
          <div class="iframe-carousel_frame">
            <iframe src="【ここにURL1】" title="ページ1"></iframe>
          </div>

        </div>

        <!-- スライド2 -->
        <div class="iframe-carousel_slide">

          <!-- iframeの見出し：表示するページ名に変更 -->
          <div class="iframe-carousel_title">
            ページ2
          </div>

          <!-- iframe表示エリア：src="【ここにURL2】" を表示したいURLに変更 -->
          <div class="iframe-carousel_frame">
            <iframe src="【ここにURL2】" title="ページ2"></iframe>
          </div>

        </div>

        <!-- スライド3 -->
        <div class="iframe-carousel_slide">

          <!-- iframeの見出し：表示するページ名に変更 -->
          <div class="iframe-carousel_title">
            ページ3
          </div>

          <!-- iframe表示エリア：src="【ここにURL3】" を表示したいURLに変更 -->
          <div class="iframe-carousel_frame">
            <iframe src="【ここにURL3】" title="ページ3"></iframe>
          </div>

        </div>

      </div>

    </div>

    <!-- 操作ボタン -->
    <div class="iframe-carousel_controls">

      <!-- 前へボタン -->
      <button class="iframe-carousel_arrow iframe-carousel_prev" type="button" id="iframe-carousel-prev" aria-label="前へ">
        前へ
      </button>

      <!-- ドットナビ -->
      <div class="iframe-carousel_dots">
        <button class="iframe-carousel_dot is-active" type="button" data-index="0" aria-label="ページ1"></button>
        <button class="iframe-carousel_dot" type="button" data-index="1" aria-label="ページ2"></button>
        <button class="iframe-carousel_dot" type="button" data-index="2" aria-label="ページ3"></button>
      </div>

      <!-- 次へボタン -->
      <button class="iframe-carousel_arrow iframe-carousel_next" type="button" id="iframe-carousel-next" aria-label="次へ">
        次へ
      </button>

    </div>

  </div>

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

</body>
</html>

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

/* iframeカルーセル全体 */
.iframe-carousel_demo{
  max-width:900px;  /* 最大横幅 */
  margin:0 auto;  /* 中央寄せ */
}

/* カルーセル本体 */
.iframe-carousel_box{
  overflow:hidden;  /* はみ出したスライドを隠す */
  border:1px solid #dbeafe;  /* 枠線 */
  border-radius:20px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  box-shadow:0 12px 30px rgba(15,23,42,.08);  /* 影 */
}

/* 横にスライドするiframe一覧 */
.iframe-carousel_track{
  display:flex;  /* スライドを横並び */
  transition:transform .45s ease;  /* 切り替え速度：.45sを大きくすると遅く、小さくすると速くなる */
}

/* スライド */
.iframe-carousel_slide{
  flex:0 0 100%;  /* 1画面に1枚表示 */
  padding:28px;  /* 内側余白 */
  box-sizing:border-box;  /* paddingを幅に含める */
}

/* iframeの見出し */
.iframe-carousel_title{
  margin:0 0 18px;  /* 下余白 */
  text-align:center;  /* 中央揃え */
  font-size:28px;  /* 文字サイズ */
  font-weight:700;  /* 文字の太さ */
  color:#0f172a;  /* 文字色 */
}

/* iframe表示エリア */
.iframe-carousel_frame{
  width:100%;  /* 横幅いっぱい */
  height:420px;  /* 高さ：変更するとiframe表示エリアの高さが変わる */
}

/* iframe */
.iframe-carousel_frame iframe{
  display:block;  /* 余白を消す */
  width:100%;  /* 横幅いっぱい */
  height:100%;  /* 高さいっぱい */
  border:1px solid #e5e7eb;  /* 枠線 */
  border-radius:14px;  /* 角丸 */
}

/* 操作ボタンエリア */
.iframe-carousel_controls{
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央寄せ */
  align-items:center;  /* 縦中央 */
  gap:16px;  /* ボタンとドットの間隔 */
  margin-top:22px;  /* カルーセル本体との距離 */
}

/* 前へ・次へボタン */
.iframe-carousel_arrow{
  position:relative;  /* 矢印の基準 */
  width:48px;  /* ボタン横幅 */
  height:48px;  /* ボタン高さ */
  padding:0;  /* 内側余白なし */
  border:none;  /* 枠線なし */
  border-radius:50%;  /* 円形 */
  background:#2563eb;  /* 背景色 */
  cursor:pointer;  /* カーソル */
  font-size:0;  /* ボタン内テキストを非表示 */
}

/* 矢印アイコン */
.iframe-carousel_arrow::before{
  content:"";  /* 矢印用 */
  position:absolute;  /* ボタン中央に配置 */
  top:50%;  /* 縦中央 */
  left:50%;  /* 横中央 */
  width:11px;  /* 矢印横幅 */
  height:11px;  /* 矢印高さ */
  border-top:3px solid #ffffff;  /* 矢印線 */
  border-right:3px solid #ffffff;  /* 矢印線 */
}

/* 前へ矢印 */
.iframe-carousel_prev::before{
  transform:translate(-40%,-50%) rotate(-135deg);  /* 左向き矢印 */
}

/* 次へ矢印 */
.iframe-carousel_next::before{
  transform:translate(-60%,-50%) rotate(45deg);  /* 右向き矢印 */
}

/* ドットナビ */
.iframe-carousel_dots{
  display:flex;  /* 横並び */
  gap:10px;  /* ドット間隔 */
}

/* ドット */
.iframe-carousel_dot{
  width:12px;  /* ドット横幅 */
  height:12px;  /* ドット高さ */
  padding:0;  /* 内側余白なし */
  border:none;  /* 枠線なし */
  border-radius:50%;  /* 円形 */
  background:#cbd5e1;  /* 通常色 */
  cursor:pointer;  /* カーソル */
}

/* 選択中のドット */
.iframe-carousel_dot.is-active{
  background:#2563eb;  /* 選択中の色 */
}

/* スマホ表示 */
@media(max-width:600px){

  .iframe-carousel_slide{
    padding:20px;  /* スマホ時の内側余白 */
  }

  .iframe-carousel_title{
    font-size:22px;  /* スマホ時の文字サイズ */
  }

  .iframe-carousel_frame{
    height:320px;  /* スマホ時のiframe高さ */
  }

}

// カルーセル全体を横に移動する要素を取得
const iframeCarouselTrack = document.getElementById("iframe-carousel-track");

// スライド一覧を取得
const iframeCarouselSlides = document.querySelectorAll(".iframe-carousel_slide");

// ドットナビを取得
const iframeCarouselDots = document.querySelectorAll(".iframe-carousel_dot");

// 前へボタンを取得
const iframeCarouselPrev = document.getElementById("iframe-carousel-prev");

// 次へボタンを取得
const iframeCarouselNext = document.getElementById("iframe-carousel-next");

// 現在表示中のスライド番号
let iframeCarouselCurrent = 0;

// スライドを表示する
function iframeCarouselShow(index){

  // 最初より前へ移動した場合は最後へ
  if(index < 0){

    iframeCarouselCurrent = iframeCarouselSlides.length - 1;

  // 最後より次へ移動した場合は最初へ
  }else if(index >= iframeCarouselSlides.length){

    iframeCarouselCurrent = 0;

  // 通常の移動
  }else{

    iframeCarouselCurrent = index;

  }

  // スライドを横方向へ移動
  iframeCarouselTrack.style.transform =
    "translateX(-" + (iframeCarouselCurrent * 100) + "%)";

  // すべてのドットを通常状態に戻す
  iframeCarouselDots.forEach(function(dot){

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

  });

  // 現在のドットを選択状態にする
  iframeCarouselDots[iframeCarouselCurrent].classList.add("is-active");

}

// 前へボタンをクリック
iframeCarouselPrev.addEventListener("click", function(){

  iframeCarouselShow(iframeCarouselCurrent - 1);

});

// 次へボタンをクリック
iframeCarouselNext.addEventListener("click", function(){

  iframeCarouselShow(iframeCarouselCurrent + 1);

});

// ドットナビをクリック
iframeCarouselDots.forEach(function(dot){

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

    iframeCarouselShow(Number(this.dataset.index));

  });

});

// 初期表示
iframeCarouselShow(0);

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでカルーセルとiframeを配置し、CSSでレイアウトやボタンのデザインを設定します。JavaScriptでは前へ・次へボタンやドットナビをクリックした際に、表示するiframeを切り替える処理を行っています。

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

sample/index.html をブラウザで開くと動作を確認できます。表示するページは各 iframe の src 属性を書き換えるだけで変更できます。例えば https://example.com/ や自社サイトのページ、社内システムなど、iframeで表示できるURLを指定してください。ページ名は iframe-carousel_title のテキストを編集すると変更できます。スライドを追加する場合は、iframe-carousel_slide とドットナビのボタンを同じ数だけ追加してください。カルーセルの切り替え速度は style.css の transition: transform .45s ease; で調整できます。.45s = 0.45秒で、数値を大きくするとゆっくり、小さくすると素早く切り替わります。