Bootstrap4を使ってWebページにタブを実装する方法

ここでは、Bootstrap4を使ってWebページにタブを実装する方法を紹介していきます。Bootstrap4では、より少ないコード量で使いやすいタブを作成することができます。ぜひ参考にしてみてください。

プロジェクト
マネージャー

Bootstrap4では、クラスに指定するだけでデフォルトのタブを設定したり、位置を変えることができるんですよ。

システム
エンジニア

便利ですね！

シンプルなタブの作成方法

はじめに、よくWebサイトで見るようなシンプルなタブを作成していきます。
以下の手順に従ってください。

1. ulタグの中に作成したいタブの数のliタグを記述する
※各タブがリンクになるためaタグでも囲っておきます。

2. Bootstrap4で定義されているクラスを指定する
ulタグのクラスに [nav nav-tabs] を指定すると、ulタグ内の要素がタブとして認識されます。各タブには [nav-item] クラスを指定しましょう。

3. タブ切り替え時にコンテンツが変わるようにする
タブをクリックしていくと表示されるコンテンツが切り替わるようにしたいので、まずは [nav-link] クラスでリンクを追加します。[active] を指定すると、サイトを開いたときに一番はじめに表示されます。リンク先はaタグのhref属性で指定します。（後述）

また、表示コンテンツを切り替えるためのJavaScript [data-toggle=”tab”] も記述しておきましょう。

では、ここまでをブラウザで確認してみましょう。

きちんとタブになっていますね。
また、[active] に設定したタブ1がデフォルトで選択された状態になっています。

最後に、各タブで表示されるコンテンツが切り替わるよう [contents1] から [contents3] までの内容を内に追記していきます。

このようにid指定していきます。
では、再度ブラウザで表示を確認していきましょう。

各タブで指定したコンテンツが表示されていますね。
以上で、シンプルなタブの作成は完了です。

タブのカスタマイズ

Bootstrapでは、少ないコード量でタブの配置やデザインを変更することもできます。

配置の変更

デフォルトは左寄せですが、中央寄せや右寄せにしたい場合はclass属性に以下のクラスを追加します。

• 中央寄せ…[justify-content-center]
• 右寄せ…[justify-content-end]

実際のソースコードは次のようになります。

＜中央寄せ＞

＜右寄せ＞

デザインの変更

よくウェブサイトで見るような選択したら色付けされるようなタブは、クラス属性に [nab-pills] を追加することで実現できます。

CSSで指定すればタブの色などのデザインも変更することができます。

プロジェクト
マネージャー

他にも、タブを縦に並べたり画面いっぱいにタブを表示することもできるんですよ。もっと知りたい方はこちらのページを参考にしてみてくださいね。

プログラマー

なるほど。便利ですね！

Bootstrap4を使って使いやすいタブを作成しよう

Bootstrap4では、よくウェブページで見かけるような一般的なタブはもちろん、配置やデザインをカスタマイズしてBootstrapっぽくないタブを作成することもできます。ぜひ活用し、使いやすいタブを作成してみてくださいね。