.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. HTML・CSS
  5. Bootstrap4を使ってWebページにタブを実装する方法

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

  • HTML・CSS
公開日時:   更新日時:
Bootstrap4を使ってWebページにタブを実装する方法
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    最新情報や関心のある情報を毎日お届け。 FEnetメールマガジン メルマガ登録はこちらから>>

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

    プロジェクト
    マネージャー
    Bootstrap4では、クラスに指定するだけでデフォルトのタブを設定したり、位置を変えることができるんですよ。
    システム
    エンジニア
    便利ですね!
    前提
    ここでは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

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

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

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

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job