.net column

.NET開発者のためのブログメディア
タブのイメージ

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

2020年03月30日

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

PM
Bootstrap4では、クラスに指定するだけでデフォルトのタブを設定したり、位置を変えることができるんですよ。
SE
便利ですね!
前提
ここではBootstrap4を導入している前提で進めていきます。導入していない方は、下記ページを参考にソースファイルをダウンロードするか、CDNから参照するようにしてください。
→ 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指定していきます。
では、再度ブラウザで表示を確認していきましょう。
idを指定

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

タブのカスタマイズ

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

配置の変更

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

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

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

<中央寄せ>

中央寄せ

<右寄せ>

右寄せ

デザインの変更

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

デザイン変更1

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

デザイン変更2

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

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)