【Bootstrap】タブメニューを作ろう！
タブメニュー作成
Bootstrapでは下記のようなタブメニューを作ることができます。
あいうえお
かきくけこ
さしすせそ
タブメニュー作成手順
1.タブの見出しを作る
<div class="container"></div>内にul、li要素でタブの見出しをマークアップします。その際、タブとタブの中身をidで紐づけします。(idのネーミングは下記例の通りでなくてもOKです。)
<div class="container">
<ul>
<li><a href="#a">Aタブ</a></li>
<li><a href="#b">Bタブ</a></li>
<li><a href="#c">Cタブ</a></li>
</ul>
<div id="a">
<p>あいうえお</p>
</div>
<div id="ｂ">
<p>かきくけこ</p>
</div>
<div id="c">
<p>さしすせそ</p>
</div>
</div>
2.タブのメニューをスタイリングします。ulに関してはclass="nav nav-tabs"、li要素にはclass="nav-item"、aタグにはclass="nav-link"をそれぞれ入れます。また、最初に表示しておきたいタブにactiveを入れます。これでBootStrapが自動的にタブメニューを作成してくれます。
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#a" class="nav-link active">Aタブ</a></li>
<li class="nav-item"><a href="#b" class="nav-link">Bタブ</a></li>
<li class="nav-item"><a href="#c" class="nav-link">Cタブ</a></li>
</ul>
<div id="a">
<p>あいうえお</p>
</div>
<div id="ｂ">
<p>かきくけこ</p>
</div>
<div id="c">
<p>さしすせそ</p>
</div>
</div>
3.タブの中身をスタイリングします。まず、<div class="tab-content"></div>でタブの中身を囲います。次に各タブの中身にclass="tab-pane"を入れていきます。また、2でactiveを入れたタブに対応するものにactiveを入れます。これでBootStrapが自動的に作成してくれます。
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#a" class="nav-link active">Aタブ</a></li>
<li class="nav-item"><a href="#b" class="nav-link">Bタブ</a></li>
<li class="nav-item"><a href="#c" class="nav-link">Cタブ</a></li>
</ul>
<div class="tab-content">
<div id="a" class="tab-pane active">
<p>あいうえお</p>
</div>
<div id="ｂ" class="tab-pane">
<p>かきくけこ</p>
</div>
<div id="c" class="tab-pane">
<p>さしすせそ</p>
</div>
</div>
</div>
4.タブをクリックするたびにactiveクラスをJavaScriptで切り替えれば完成ですが、この処理もBootStrapで対応可能でそれぞれのタブのaタグに data-toggle="tab"と入れるだけでOKです。
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#a" class="nav-link active" data-toggle="tab">Aタブ</a></li>
<li class="nav-item"><a href="#b" class="nav-link"data-toggle="tab">Bタブ</a></li>
<li class="nav-item"><a href="#c" class="nav-link"data-toggle="tab">Cタブ</a></li>
</ul>
<div class="tab-content">
<div id="a" class="tab-pane active">
<p>あいうえお</p>
</div>
<div id="ｂ" class="tab-pane">
<p>かきくけこ</p>
</div>
<div id="c" class="tab-pane">
<p>さしすせそ</p>
</div>
</div>
</div>
以上で完成です。
