Bootstrap4を使ってWebページにタブを実装する方法
ここでは、Bootstrap4を使ってWebページにタブを実装する方法を紹介していきます。Bootstrap4では、より少ないコード量で使いやすいタブを作成することができます。ぜひ参考にしてみてください。
- プロジェクト
マネージャー - Bootstrap4では、クラスに指定するだけでデフォルトのタブを設定したり、位置を変えることができるんですよ。
- システム
エンジニア - 便利ですね!
ここではBootstrap4を導入している前提で進めていきます。導入していない方は、下記ページを参考にソースファイルをダウンロードするか、CDNから参照するようにしてください。
→ Bootstrap4を導入する
シンプルなタブの作成方法
はじめに、よくWebサイトで見るようなシンプルなタブを作成していきます。
以下の手順に従ってください。
1. ulタグの中に作成したいタブの数のliタグを記述する
※各タブがリンクになるためaタグでも囲っておきます。
1
2
3
4
5
|
<ul>
<li><a>タブ1</a></li>
<li><a>タブ2</a></li>
<li><a>タブ3</a></li>
</ul>
|
2. Bootstrap4で定義されているクラスを指定する
ulタグのクラスに [nav nav-tabs] を指定すると、ulタグ内の要素がタブとして認識されます。各タブには [nav-item] クラスを指定しましょう。
1
2
3
4
5
|
<ul class="nav nav-tabs">
<li class="nav-item"><a>タブ1</a></li>
<li class="nav-item"><a>タブ2</a></li>
<li class="nav-item"><a>タブ3</a></li>
</ul>
|
3. タブ切り替え時にコンテンツが変わるようにする
タブをクリックしていくと表示されるコンテンツが切り替わるようにしたいので、まずは [nav-link] クラスでリンクを追加します。[active] を指定すると、サイトを開いたときに一番はじめに表示されます。リンク先はaタグのhref属性で指定します。(後述)
また、表示コンテンツを切り替えるためのJavaScript [data-toggle=”tab”] も記述しておきましょう。
1
2
3
4
5
6
7
8
9
10
11
|
<ul class="nav">
<li class="nav-item">
<a href="#contents1" class="nav-link active" data-toggle="tab">タブ1</a>
</li>
<li class="nav-item">
<a href="#contents2" class="nav-link" data-toggle="tab">タブ2</a>
</li>
<li class="nav-item">
<a href="#contents3" class="nav-link" data-toggle="tab">タブ3</a>
</li>
</ul>
|
では、ここまでをブラウザで確認してみましょう。
きちんとタブになっていますね。
また、[active] に設定したタブ1がデフォルトで選択された状態になっています。
最後に、各タブで表示されるコンテンツが切り替わるよう [contents1] から [contents3] までの内容を内に追記していきます。
1
2
3
4
5
6
7
8
9
10
11
|
<div class="tab-content">
<div id="contents1" class="tab-pane active">
<p>タブ1のコンテンツ</p>
</div>
<div id="contents2" class="tab-pane">
<p>タブ2のコンテンツ</p>
</div>
<div id="contents3" class="tab-pane">
<p>タブ3のコンテンツ</p>
</div>
</div>
|
このようにid指定していきます。
では、再度ブラウザで表示を確認していきましょう。
各タブで指定したコンテンツが表示されていますね。
以上で、シンプルなタブの作成は完了です。
タブのカスタマイズ
Bootstrapでは、少ないコード量でタブの配置やデザインを変更することもできます。
配置の変更
デフォルトは左寄せですが、中央寄せや右寄せにしたい場合はclass属性に以下のクラスを追加します。
- 中央寄せ…[justify-content-center]
- 右寄せ…[justify-content-end]
実際のソースコードは次のようになります。
<中央寄せ>
1
2
3
4
5
6
7
8
9
10
11
12
|
<!-- 中央寄せタブ -->
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a href="#contents1" class="nav-link active" data-toggle="tab">タブ1</a>
</li>
<li class="nav-item">
<a href="#contents2" class="nav-link" data-toggle="tab">タブ2</a>
</li>
<li class="nav-item">
<a href="#contents3" class="nav-link" data-toggle="tab">タブ3</a>
</li>
</ul>
|
<右寄せ>
1
2
3
4
5
6
7
8
9
10
11
12
|
<!-- 右寄せタブ -->
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item">
<a href="#contents1" class="nav-link active" data-toggle="tab">タブ1</a>
</li>
<li class="nav-item">
<a href="#contents2" class="nav-link" data-toggle="tab">タブ2</a>
</li>
<li class="nav-item">
<a href="#contents3" class="nav-link" data-toggle="tab">タブ3</a>
</li>
</ul>
|
デザインの変更
よくウェブサイトで見るような選択したら色付けされるようなタブは、クラス属性に [nab-pills] を追加することで実現できます。
1
2
3
4
5
6
7
8
9
10
11
|
<ul class="nav nav-tabs nav-pills">
<li class="nav-item">
<a href="#contents1" class="nav-link active" data-toggle="tab">タブ1</a>
</li>
<li class="nav-item">
<a href="#contents2" class="nav-link" data-toggle="tab">タブ2</a>
</li>
<li class="nav-item">
<a href="#contents3" class="nav-link" data-toggle="tab">タブ3</a>
</li>
</ul>
|
CSSで指定すればタブの色などのデザインも変更することができます。
1
2
3
4
5
6
|
<style>
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: white;
background-color: lightcoral;
}
</style>
|
- プロジェクト
マネージャー - 他にも、タブを縦に並べたり画面いっぱいにタブを表示することもできるんですよ。もっと知りたい方はこちらのページを参考にしてみてくださいね。
- プログラマー
- なるほど。便利ですね!
Bootstrap4を使って使いやすいタブを作成しよう
Bootstrap4では、よくウェブページで見かけるような一般的なタブはもちろん、配置やデザインをカスタマイズしてBootstrapっぽくないタブを作成することもできます。ぜひ活用し、使いやすいタブを作成してみてくださいね。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万~55万円東京都豊島区(池袋駅)