HTML&CSS&JavaScriptで３つのタブを作る方法を解説

更新日 : 2023年9月25日

今回はHTMLとCSSとJavaScriptを使って３つのタブを作っていくコードを解説します。

【迷ったらココ！】HTMLやJavaScriptが学べるプログラミングスクール3選

テックアカデミー	デイトラ	侍エンジニア
講師は全員現役エンジニア週2回のマンツーマンメンタリング無料の転職サポートあり課題レビュー＆チャット質問し放題	1年間のエンジニアサポートカリキュラムは無期限閲覧可能専用チャットコミュニティ参加 Webセミナー勉強会に参加	累計指導45,000人＆転職成功率98% オーダーメイドカリキュラム対応無料の転職サポートあり専属マンツーマンレッスン方式
公式サイト	公式サイト	公式サイト

当サイトではプログラミング学習やエンジニア転職に関する情報を発信しています。他の記事も合わせてご覧ください。

: HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】
HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...
更新日：2024年1月29日

HTMLのサンプルコード
CSSのサンプルコード
JavaScriptのサンプルコード
HTML&CSS&JavaScriptで３つのタブを作る方法のまとめ

HTMLのサンプルコード

<!DOCTYPE html>
<html lang=ja dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="Tabcontrol" class="tabcontrol">
        <a href="#tabpage1" class="tab1" onclick="changeTab">タブ1</a>
        <a href="#tabpage2" class="tab2" onclick="changeTab">タブ2</a>
        <a href="#tabpage3" class="tab3" onclick="changeTab">タブ3</a>
    </div>

    <div id="tabbody">
    <div id="tabpage1" class="tab tab1">
        <p>これはタブ1です。</p>
    </div>

    <div id="tabpage2" class="tab tab2">
        <p>これはタブ2です。</p>
    </div>

    <div id="tabpage3" class="tab tab3">
        <p>これはタブ3です。</p>
    </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

<p>これはタブ1です。</p>

</div>

<p>これはタブ2です。</p>

</div>

<p>これはタブ3です。</p>

</div>

</body>

</html>

HTMLでは３つのタブと、タブの中に表示する3タイプの文字を設定しています。

タブの中の中身を追加したい時はidがtabpageのdiv要素の中にコンテンツを書き足してあげましょう。

CSSのサンプルコード

<style>
.tab1 {
    background-color: orange;
}
.tab2 {
    background-color: green;
    display: none;
}
.tab3 {
    background-color: blue;
    color: white;
    display: none;
}
.tab {
    width: 500px;
    height: 100px;
    clear: left;
}
.tabcontrol a {
    width: 100px;
    display: block;
    float: left;
    border-radius: 10px 10px 0 0;
    text-align: center;
    color: white;
}
.Tabcontrol a:hover {
   text-decoration: underline;
 }
.tabcontrol a:nth-child(1), .tabbody div:nth-child(1) { background-color: orange; }
.tabcontrol a:nth-child(2), .tabbody div:nth-child(2) { background-color: green; }
.tabcontrol a:nth-child(3), .tabbody div:nth-child(3) { background-color: blue; }
</style>

<style>

.tab1 {

background-color: orange;

}

.tab2 {

background-color: green;

display: none;

}

.tab3 {

background-color: blue;

color: white;

display: none;

}

.tab {

width: 500px;

height: 100px;

clear: left;

}

.tabcontrol a {

width: 100px;

display: block;

float: left;

border-radius: 10px 10px 0 0;

text-align: center;

color: white;

}

.Tabcontrol a:hover {

text-decoration: underline;

}

.tabcontrol a:nth-child(1), .tabbody div:nth-child(1) { background-color: orange; }

.tabcontrol a:nth-child(2), .tabbody div:nth-child(2) { background-color: green; }

.tabcontrol a:nth-child(3), .tabbody div:nth-child(3) { background-color: blue; }

</style>

CSSではタブごとのカラーやサイズなどのレイアウト設定をメインに設定しています。

ここではタブ切り替えに関するコードは特に記述していません。

JavaScriptのサンプルコード

  <script type="text/javascript">
    var tabs = document.getElementById('Tabcontrol').getElementsByTagName('a');
    var pages = document.getElementById('tabbody').getElementsByTagName('div');
    function changeTab() {
      var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);

      for(var i=0; i<pages.length; i++) {
         if( pages[i].id == targetid ) {
            pages[i].style.display = "block";
         }
         else {
            pages[i].style.display = "none";
         }
      }
      for(var i=0; i<tabs.length; i++) {
         tabs[i].style.zIndex = "0";
      }
      this.style.zIndex = "10";

      return false;
   }
   for(var i=0; i<tabs.length; i++) {
     tabs[i].onclick = changeTab;
  }
  tabs[0].onclick();

  </script>

var tabs = document.getElementById('Tabcontrol').getElementsByTagName('a');

var pages = document.getElementById('tabbody').getElementsByTagName('div');

function changeTab() {

var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);

for(var i=0; i<pages.length; i++) {

if( pages[i].id == targetid ) {

pages[i].style.display = "block";

}

else {

pages[i].style.display = "none";

}

for(var i=0; i<tabs.length; i++) {

tabs[i].style.zIndex = "0";

}

this.style.zIndex = "10";

return false;

}

for(var i=0; i<tabs.length; i++) {

tabs[i].onclick = changeTab;

}

tabs[0].onclick();

</script>

JavaScriptではタブの切り替え操作をメインに記述しています。

関数changeTabでクリックされたタブを取得したら、zIndex（重なり順）を上にして表に表示されるようにしています。

zIndezは数字が大きいほど表側になります。

HTML&CSS&JavaScriptで３つのタブを作る方法のまとめ

最後にHTML&CSS&JavaScriptをあわせた全体のコードはこちらになります。

<!DOCTYPE html>
<html lang=ja dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <style>
.tab1 {
    background-color: orange;
}
.tab2 {
    background-color: green;
    display: none;
}
.tab3 {
    background-color: blue;
    color: white;
    display: none;
}
.tab {
    width: 500px;
    height: 100px;
    clear: left;
}
.tabcontrol a {
    width: 100px;
    display: block;
    float: left;
    border-radius: 10px 10px 0 0;
    text-align: center;
    color: white;
}
.Tabcontrol a:hover {
   text-decoration: underline;
 }
.tabcontrol a:nth-child(1), .tabbody div:nth-child(1) { background-color: orange; }
.tabcontrol a:nth-child(2), .tabbody div:nth-child(2) { background-color: green; }
.tabcontrol a:nth-child(3), .tabbody div:nth-child(3) { background-color: blue; }
</style>
    <div id="Tabcontrol" class="tabcontrol">
        <a href="#tabpage1" class="tab1" onclick="changeTab">タブ1</a>
        <a href="#tabpage2" class="tab2" onclick="changeTab">タブ2</a>
        <a href="#tabpage3" class="tab3" onclick="changeTab">タブ3</a>
    </div>

    <div id="tabbody">
    <div id="tabpage1" class="tab tab1">
        <p>これはタブ1です。</p>
    </div>

    <div id="tabpage2" class="tab tab2">
        <p>これはタブ2です。</p>
    </div>

    <div id="tabpage3" class="tab tab3">
        <p>これはタブ3です。</p>
    </div>
    </div>
  </body>
  <script type="text/javascript">
    var tabs = document.getElementById('Tabcontrol').getElementsByTagName('a');
    var pages = document.getElementById('tabbody').getElementsByTagName('div');
    function changeTab() {
      var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);

      for(var i=0; i<pages.length; i++) {
         if( pages[i].id == targetid ) {
            pages[i].style.display = "block";
         }
         else {
            pages[i].style.display = "none";
         }
      }
      for(var i=0; i<tabs.length; i++) {
         tabs[i].style.zIndex = "0";
      }
      this.style.zIndex = "10";

      return false;
   }
   for(var i=0; i<tabs.length; i++) {
     tabs[i].onclick = changeTab;
  }
  tabs[0].onclick();

  </script>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<style>

.tab1 {

background-color: orange;

}

.tab2 {

background-color: green;

display: none;

}

.tab3 {

background-color: blue;

color: white;

display: none;

}

.tab {

width: 500px;

height: 100px;

clear: left;

}

.tabcontrol a {

width: 100px;

display: block;

float: left;

border-radius: 10px 10px 0 0;

text-align: center;

color: white;

}

.Tabcontrol a:hover {

text-decoration: underline;

}

.tabcontrol a:nth-child(1), .tabbody div:nth-child(1) { background-color: orange; }

.tabcontrol a:nth-child(2), .tabbody div:nth-child(2) { background-color: green; }

.tabcontrol a:nth-child(3), .tabbody div:nth-child(3) { background-color: blue; }

</style>

</div>

<p>これはタブ1です。</p>

</div>

<p>これはタブ2です。</p>

</div>

<p>これはタブ3です。</p>

</div>

</body>

var tabs = document.getElementById('Tabcontrol').getElementsByTagName('a');

var pages = document.getElementById('tabbody').getElementsByTagName('div');

function changeTab() {

var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);

for(var i=0; i<pages.length; i++) {

if( pages[i].id == targetid ) {

pages[i].style.display = "block";

}

else {

pages[i].style.display = "none";

}

for(var i=0; i<tabs.length; i++) {

tabs[i].style.zIndex = "0";

}

this.style.zIndex = "10";

return false;

}

for(var i=0; i<tabs.length; i++) {

tabs[i].onclick = changeTab;

}

tabs[0].onclick();

</script>

</html>

CSSとJavaScriptがごちゃごちゃしていて分かりにくいという方は、それぞれファイルを分けることをオススメします。

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格：ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-HTML, JavaScript

HTMLやJavaScriptの関連記事

: 【PHP】MySQLにデータを保存するフォームを作成してみた
MySQLにデータを保存するフォームをPHPとHTMLで作成しました。重複投稿防止の機能も追加しております。参考にしていただけたら幸いです。今回のテーマ PHPを使ってMySQLにデータを追加す ...
HTML PHP

: PythonとJavaScriptはどっちがおすすめ？似てる？【違いを比較】
PythonとJavaScriptだったらどっちを使えば良いのかな？両方の特徴や違いを詳しく知りたい！今回はこんな疑問にお答えしていきます。エンジニアを目指す人が最初に抱える悩みの1つに「プログラ ...
JavaScript Python

: ReactとVueはどっちがおすすめ？違いを比較【難易度・求人数・学習コスト】
React.jsとVue.jsだったらどっちがおすすめ？難易度・求人数・学習コストなどの違いを詳しく知りたい！今回はこんな疑問にお答えしていきます。エンジニアを目指す人が最初に抱える悩みの1つに「 ...
JavaScript

: 【JavaScript】入力した文字を先頭から１文字ずつ表示させる方法
今回はHTMLとJavaScriptを使って「入力した文字を先頭から１文字ずつ表示させる方法」をご紹介していきます。文章だと分かりにくいので画像で図解すると次のようになります。 https://te ...
HTML JavaScript

: HTMLとJavaScriptで地図を表示させる方法【OpenStreetMap】
HTMLとJavaScriptで、ウェブサイトにマップを表示させたいと考えたことはありませんか？実はウェブサイト内にマップを表示させるのは非常に簡単です。そこで今回は実際にOpenStreetMa ...
HTML JavaScript

: JavaScriptが学べるプログラミングスクールおすすめ8選
JavaScriptを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... JavaScriptを学びたいけどまず何から始めたら良いのか分からない...プログラ ...
JavaScript プログラミングスクール

: RaiseTech(レイズテック)のReactコースの評判・口コミ【料金や特徴を解説】
RaiseTech(レイズテック)のReactコースってどうなの？特徴や料金、評判や稼ぎ方について詳しく知りたい！今回はこんな悩みを解決していきます。ここ最近プログラミングの需要は急激に高まってき ...
JavaScript RaiseTech

: Reactが学べるプログラミングスクールおすすめ5選を解説
Reactを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... Reactを学びたいけどまず何から始めたら良いのか分からない...プログラミングスクールでプロ ...
JavaScript プログラミングスクール

: jQueryを学べるプログラミングスクールおすすめ7選【2024年最新】
jQueryを学びたいが、どんなプログラミングスクールにするべき？おすすめを知りたい！今回はこんな悩みを解決していきます。一口にプログラミングスクールと言っても、学べる内容はスクールごとにさまざま ...
JavaScript プログラミングスクール

: Node.jsが学べるプログラミングスクールおすすめ5選をご紹介
Node.jsを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... Node.jsを学びたいけどまず何から始めたら良いのか分からない...プログラミングスクー ...
JavaScript プログラミングスクール

: テックアカデミーのフロントエンドコースの評判・口コミ【転職できる？難しい？】
テックアカデミーのフロントエンドコースの評判・口コミを知りたい！転職できるかな？今回はこんな悩みを解決していきます。ここ最近プログラミングの需要は急激に高まってきており、フリーランスや転職といった ...
JavaScript TechAcademy

: 【厳選】Vue.jsが学べるプログラミングスクールおすすめ7選
Vue.jsを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... Vue.jsを学びたいけどまず何から始めたら良いのか分からない...プログラミングスクールで ...
JavaScript プログラミングスクール

: PHPで会員登録＆ログイン機能を作成してみた
PHPを使って会員登録機能とログイン機能を実装しました。重複登録防止の機能も追加しております。参考にしていただけたら幸いです。今回のテーマ PHPとMySQLを使って会員登録機能を実装 PHPと ...
HTML PHP

: JavaとJavaScriptはどっちがおすすめ？全然違う？【難易度や違いを比較】
JavaとJavaScriptだったらどっちを使えば良いのかな？両方の特徴や違いを詳しく知りたい！今回はこんな疑問にお答えしていきます。エンジニアを目指す人が最初に抱える悩みの1つに「プログラミン ...
Java JavaScript

: HTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法
今回はHTMLとJavaScriptを使って「戻るボタン」「進むボタン」「更新ボタン」を作成する方法をご紹介します。どのボタンもページ遷移の操作には欠かせない重要な要素です。一見すると難しそうな操 ...
HTML JavaScript