クリック時に初回だけ内容を読み込むタブ切り替えを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

クリック時に初回だけ内容を読み込むタブ切り替えを作る方法

クリックされたタブの内容を初回だけ読み込むタブ切り替えを作る方法を紹介します。このサンプルでは、最初に表示する「概要」の内容だけをHTMLに用意し、「お知らせ」と「商品情報」の内容は最初から表示せず、それぞれのタブが初めてクリックされたタイミングでJavaScriptから読み込みます。

一度読み込んだ内容はそのままパネル内へ保持するため、同じタブを2回目以降にクリックしても読み込み処理は繰り返しません。画像や項目数の多いコンテンツなど、ページを開いた時点ですべての内容を用意する必要がなく、実際に選択されたタブだけを初回に読み込みたい場合に利用できます。

HTMLではタブと表示パネルを作成し、CSSでは基本のタブ切り替えと同じ形で通常時・選択時のデザインを設定します。JavaScriptではクリックしたタブに対応するパネルへ切り替え、まだ読み込まれていない場合だけ内容を追加します。デモでは読み込み前に「このタブをクリックすると内容を読み込みます。」と表示し、初回クリック後に実際の内容へ置き換わる動作を確認できます。

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

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

デモ

初回だけ内容を読み込むタブ切り替え

最初は概要だけを表示し、他のタブはクリックされた時点で初回のみ読み込みます。

概要だけは最初から表示されています。

「画像」「動画」「重い資料」は、各タブを初めてクリックしたときだけ読み込まれます。2回目以降は読み込み済みの内容をそのまま表示します。

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

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>クリック時に初回だけ内容を読み込むタブ切り替え</title>

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

</head>
<body>

  <!-- タブ切り替え全体 -->
  <div class="lazy-load-tabs_wrap">

    <!-- タイトル -->
    <div class="lazy-load-tabs_title">
      初回だけ内容を読み込むタブ切り替え
    </div>

    <!-- 説明文 -->
    <p class="lazy-load-tabs_text">
      最初は概要だけを表示し、他のタブはクリックされた時点で初回のみ読み込みます。
    </p>

    <!-- タブ一覧 -->
    <div
      class="lazy-load-tabs_tabs"
      role="tablist"
      aria-label="コンテンツ">

      <!-- 概要タブ -->
      <button
        class="lazy-load-tabs_tab is-active"
        id="lazy-load-tabs-overview"
        type="button"
        role="tab"
        aria-controls="lazy-load-tabs-panel-overview"
        aria-selected="true"
        data-tab="overview">
        概要
      </button>

      <!-- 画像タブ -->
      <button
        class="lazy-load-tabs_tab"
        id="lazy-load-tabs-image"
        type="button"
        role="tab"
        aria-controls="lazy-load-tabs-panel-image"
        aria-selected="false"
        data-tab="image">
        画像
      </button>

      <!-- 動画タブ -->
      <button
        class="lazy-load-tabs_tab"
        id="lazy-load-tabs-video"
        type="button"
        role="tab"
        aria-controls="lazy-load-tabs-panel-video"
        aria-selected="false"
        data-tab="video">
        動画
      </button>

      <!-- 重い資料タブ -->
      <button
        class="lazy-load-tabs_tab"
        id="lazy-load-tabs-document"
        type="button"
        role="tab"
        aria-controls="lazy-load-tabs-panel-document"
        aria-selected="false"
        data-tab="document">
        重い資料
      </button>

    </div>

    <!-- 概要パネル：最初から読み込み済み -->
    <div
      class="lazy-load-tabs_panel is-active"
      id="lazy-load-tabs-panel-overview"
      role="tabpanel"
      aria-labelledby="lazy-load-tabs-overview"
      data-panel="overview"
      data-loaded="true">
      概要だけは最初から表示されています。
    </div>

    <!-- 画像パネル：初回クリック時に内容を読み込む -->
    <div
      class="lazy-load-tabs_panel"
      id="lazy-load-tabs-panel-image"
      role="tabpanel"
      aria-labelledby="lazy-load-tabs-image"
      data-panel="image"
      data-loaded="false">
    </div>

    <!-- 動画パネル：初回クリック時に内容を読み込む -->
    <div
      class="lazy-load-tabs_panel"
      id="lazy-load-tabs-panel-video"
      role="tabpanel"
      aria-labelledby="lazy-load-tabs-video"
      data-panel="video"
      data-loaded="false">
    </div>

    <!-- 資料パネル：初回クリック時に内容を読み込む -->
    <div
      class="lazy-load-tabs_panel"
      id="lazy-load-tabs-panel-document"
      role="tabpanel"
      aria-labelledby="lazy-load-tabs-document"
      data-panel="document"
      data-loaded="false">
    </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; /* 使用するフォント */
}

/* タブ切り替え全体と内部要素 */
.lazy-load-tabs_wrap,
.lazy-load-tabs_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅・高さに含める */
}

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

/* タイトル */
.lazy-load-tabs_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.lazy-load-tabs_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* タブ一覧 */
.lazy-load-tabs_tabs{
  display:flex; /* タブを横並びにする */
  border-bottom:1px solid #d1d5db; /* タブ一覧の下側に境界線を表示 */
}

/* 各タブ */
.lazy-load-tabs_tab{
  flex:1; /* 4つのタブを均等な横幅にする */
  min-height:52px; /* タブの最小高さ。値を大きくすると高くなる */
  padding:14px; /* タブの内側余白。値を大きくすると余白が広がる */
  border:1px solid #d1d5db; /* 通常時の枠線 */
  border-bottom:none; /* 下側の枠線を非表示 */
  border-radius:12px 12px 0 0; /* タブ上部の角丸 */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* 親要素と同じフォントを使用 */
  font-size:16px; /* タブの文字サイズ */
  font-weight:700; /* タブの文字を太字にする */
  cursor:pointer; /* マウスポインターを指の形にする */
  transition:
    background-color .3s ease,
    color .3s ease; /* 0.3秒で背景色と文字色を切り替える */
}

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

/* 選択中のタブ */
.lazy-load-tabs_tab.is-active{
  background:#0b6bff; /* 選択中の背景色 */
  color:#ffffff; /* 選択中の文字色 */
}

/* キーボード操作でフォーカスしたタブ */
.lazy-load-tabs_tab:focus-visible{
  position:relative; /* フォーカス枠を前面へ表示する基準 */
  z-index:1; /* フォーカス枠を前面へ表示 */
  outline:3px solid rgba(11,107,255,.22); /* フォーカス枠の太さと色 */
  outline-offset:2px; /* タブとフォーカス枠の間隔 */
}

/* 各パネル */
.lazy-load-tabs_panel{
  display:none; /* 選択されていないパネルを非表示 */
  padding:24px; /* パネルの内側余白 */
  border:1px solid #d1d5db; /* パネルを囲む枠線 */
  border-top:none; /* タブとの境界部分の枠線を非表示 */
  background:#ffffff; /* パネルの背景色 */
  color:#4b5563; /* パネル内の文字色 */
  font-size:16px; /* パネル内の文字サイズ */
  line-height:1.8; /* パネル内の行間 */
}

/* 選択中のパネル */
.lazy-load-tabs_panel.is-active{
  display:block; /* 選択されたパネルだけ表示 */
}

/* 初回クリック時に読み込む画像 */
.lazy-load-tabs_image{
  display:block; /* 画像をブロック要素として表示 */
  width:100%; /* パネル幅に合わせて画像を縮小 */
  max-width:600px; /* 画像の最大横幅。値を大きくすると広がる */
  height:auto; /* 元の縦横比を維持する */
  margin:0 auto; /* 画像を左右中央へ配置 */
  border-radius:12px; /* 画像の角丸 */
}

/* 初回クリック時に読み込む動画 */
.lazy-load-tabs_video{
  display:block; /* iframeをブロック要素として表示 */
  width:100%; /* パネル幅に合わせて横幅を変更 */
  aspect-ratio:16/9; /* 動画を16:9の比率で表示 */
  border:none; /* iframeの枠線を非表示 */
  border-radius:12px; /* 動画表示部分の角丸 */
}

/* 初回クリック時に読み込む資料 */
.lazy-load-tabs_document{
  display:block; /* iframeをブロック要素として表示 */
  width:100%; /* パネル幅に合わせて横幅を変更 */
  height:500px; /* 資料の表示高さ。値を大きくすると表示領域が高くなる */
  border:1px solid #d1d5db; /* 資料表示部分の枠線 */
  border-radius:12px; /* 資料表示部分の角丸 */
}

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

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

  /* 各タブ */
  .lazy-load-tabs_tab{
    min-height:48px; /* スマートフォンでのタブの最小高さ */
    padding:12px 8px; /* 上下12px・左右8pxへ余白を変更 */
    font-size:14px; /* スマートフォンでのタブ文字サイズ */
  }

  /* 2個目以降のタブ */
  .lazy-load-tabs_tab + .lazy-load-tabs_tab{
    margin-left:4px; /* スマートフォンではタブ間隔を4pxにする */
  }

  /* 各パネル */
  .lazy-load-tabs_panel{
    padding:20px 16px; /* スマートフォンではパネルの余白を小さくする */
  }

  /* 資料 */
  .lazy-load-tabs_document{
    height:400px; /* スマートフォンでは資料の表示高さを400pxにする */
  }

}

/* タブをすべて取得 */
const lazyLoadTabsTabs =
  document.querySelectorAll(".lazy-load-tabs_tab");

/* パネルをすべて取得 */
const lazyLoadTabsPanels =
  document.querySelectorAll(".lazy-load-tabs_panel");


/*
  初回クリック時に読み込む内容を設定する。
  画像・動画・資料は、この時点ではページへ挿入されていない。
*/
const lazyLoadTabsContents = {

  /* 画像タブで初回だけ読み込む画像 */
  image:`
    <img
      class="lazy-load-tabs_image"
      src="http://maruhinoto.com/wp-content/uploads/2026/08/sample-01山と湖の風景.png"
      alt="山と湖の風景">
  `,

  /* 動画タブで初回だけ読み込む動画 */
  video:`
    <iframe
      class="lazy-load-tabs_video"
      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      title="サンプル動画"
      allowfullscreen>
    </iframe>
  `,

  /* 資料タブで初回だけ読み込むPDF */
  document:`
    <iframe
      class="lazy-load-tabs_document"
      src="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
      title="サンプル資料">
    </iframe>
  `

};


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

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

    /* クリックしたタブのdata-tabを取得 */
    const target =
      tab.dataset.tab;

    /* クリックしたタブに対応するパネルを取得 */
    const targetPanel =
      document.querySelector(
        '[data-panel="' + target + '"]'
      );


    /*
      まだ読み込まれていないパネルの場合だけ内容を追加する。
      data-loadedがfalseのときだけ実行される。
    */
    if(
      targetPanel.dataset.loaded === "false" &&
      lazyLoadTabsContents[target]
    ){

      /* 対応する画像・動画・資料をパネルへ追加 */
      targetPanel.innerHTML =
        lazyLoadTabsContents[target];

      /*
        読み込み済みへ変更する。
        trueになったあとは同じ内容を再度読み込まない。
      */
      targetPanel.dataset.loaded =
        "true";

    }


    /* すべてのタブを非選択状態にする */
    lazyLoadTabsTabs.forEach(function(item){

      item.classList.remove("is-active");
      item.setAttribute("aria-selected","false");

    });


    /* すべてのパネルを非表示にする */
    lazyLoadTabsPanels.forEach(function(panel){

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

    });


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


    /* クリックしたタブに対応するパネルを表示 */
    targetPanel.classList.add("is-active");

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「概要」「画像」「動画」「重い資料」の4つのタブと、それぞれに対応するパネルを作成します。最初に表示する「概要」だけを読み込み済みの状態にし、画像・動画・資料のパネルは空の状態から開始します。

CSSでは基本となるタブ切り替えのデザインに加えて、画像・動画・資料を表示するためのサイズや角丸などを設定します。JavaScriptではタブがクリックされたときに対応するパネルを確認し、まだ読み込まれていない場合だけ画像・動画・資料をパネル内へ追加します。一度追加された内容は読み込み済みへ変更されるため、同じタブを2回目以降にクリックしても内容を追加する処理は繰り返されません。

画像・YouTube動画・PDF資料はZIPへ含めず、URLから読み込む構成です。実際に使用する場合は、script.jsに記述している画像URL、YouTubeの埋め込みURL、PDFのURLを、利用者自身が表示したい内容のURLへ変更してください。APIや外部JavaScriptライブラリは使用していません。

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

各ファイルの役割
index.htmlはタブ切り替え全体を構成するファイルです。「概要」「画像」「動画」「重い資料」の4つのタブと、それぞれに対応するパネルを記述しています。タブのdata-tabとパネルのdata-panelを同じ値にすることで、クリックしたタブと表示するパネルを関連付けています。また、data-loaded="true"は読み込み済み、data-loaded="false"はまだ読み込んでいない状態を表します。

style.cssはタブ切り替えと、読み込んだコンテンツのデザインを設定するファイルです。全体の最大横幅や余白、枠線、角丸、タブの高さ、選択中のタブの色、パネルの余白などを設定しています。画像には.lazy-load-tabs_image、動画には.lazy-load-tabs_video、PDF資料には.lazy-load-tabs_documentを使用し、それぞれの表示サイズや角丸などを設定しています。

script.jsは初回読み込みとタブ切り替えを行うファイルです。lazyLoadTabsContentsに画像・動画・PDF資料として読み込むHTMLを設定しています。タブをクリックすると対応するパネルのdata-loadedを確認し、値がfalseの場合だけinnerHTMLで内容を追加して、その後trueへ変更します。タブの選択状態はis-activeクラスとaria-selectedを切り替えて管理します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、3ファイルを同じ階層へ保存します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、配置後にsample/index.htmlをブラウザで開くと動作を確認できます。ページを開いた直後は「概要」だけが表示され、画像・動画・資料はまだパネル内へ追加されていません。

「画像」タブで表示する画像を変更する場合は、script.jsのlazyLoadTabsContentsにあるimage内のsrcを、利用者自身で用意した画像のURLへ変更します。Web上へ公開したJPEG・PNG・WebPなどの画像を使用する場合は、その画像へ直接アクセスできるURLをsrcへ指定してください。altも表示する画像の内容に合わせて変更します。

「動画」タブではYouTubeの埋め込みURLを使用しています。表示したいYouTube動画の共有・埋め込み機能から埋め込み用のコードを確認し、そのiframeのsrcに指定されている埋め込みURLを、script.jsのvideo内にあるsrcへ設定します。通常の動画ページURLではなく、iframeで使用する埋め込み用URLを設定します。

「重い資料」タブではPDFファイルのURLをiframeのsrcへ指定します。利用者自身でWeb上へ配置したPDFを使用する場合は、そのPDFへアクセスできるURLへ変更してください。画像・動画・PDFはいずれもsampleフォルダへ含める構成ではなく、script.jsに設定したURLから初回クリック時に読み込みます。

カスタマイズできる内容
index.htmlでは全体のタイトルや説明文、「概要」「画像」「動画」「重い資料」のタブ名、最初から表示する概要の文章を変更できます。タブとパネルの対応を変更するときは、タブのdata-tabとパネルのdata-panelを同じ値にします。aria-controlsには対応するパネルのID、aria-labelledbyには対応するタブのIDを指定します。

script.jsではlazyLoadTabsContentsの内容を編集することで、初回クリック時に読み込む画像・動画・資料を変更できます。imageのsrcは画像URL、videoのsrcはYouTubeの埋め込みURL、documentのsrcは表示するPDFのURLです。それぞれを利用目的に合わせたURLへ変更できます。

style.cssでは全体の横幅や余白、背景色、枠線、角丸、タブの高さ、文字サイズ、選択中のタブの色などを変更できます。また、画像の最大横幅、画像・動画・資料の角丸、PDF資料の表示高さも変更できます。

数値調整
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を大きくすると説明文とタブの間隔が広がります。

min-height:52px;
PC表示でのタブの最小高さです。値を大きくするとタブが高くなります。

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

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

font-size:16px;
PC表示でのタブの文字サイズです。値を大きくすると文字が大きくなります。

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

.3s
タブの背景色と文字色が変化する時間です。0.3秒で切り替わり、値を大きくするとゆっくり、小さくすると速く変化します。

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

max-width:600px;
画像の最大横幅です。値を大きくすると画像をより広く表示でき、小さくすると最大表示幅が狭くなります。

border-radius:12px;
画像・動画・PDF資料の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

aspect-ratio:16/9;
動画の表示比率です。このサンプルでは横16・縦9の比率で表示します。

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

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでタブ切り替え全体にwidth:100%とmax-width:700pxを設定しているため、画面が狭くなると利用可能な横幅に合わせて全体が縮小されます。画像にもwidth:100%とheight:autoを設定し、元の縦横比を保ちながらパネル幅に合わせて縮小します。動画とPDF資料もwidth:100%で表示します。

画面幅640px以下ではstyle.cssのメディアクエリが適用され、全体の内側余白を24px 18px、タブの最小高さを48px、タブの内側余白を12px 8px、文字サイズを14pxへ変更します。タブ同士の間隔も6pxから4pxへ小さくし、パネルの内側余白は20px 16pxへ変更します。

PDF資料の表示高さは640px以下で500pxから400pxへ変更されます。これらの設定により、スマートフォン・タブレット・PCの画面幅に合わせてタブ、画像、動画、PDF資料を表示できます。