[CSSフレームワーク]BulmaWebアプリケーションでは、ナビゲーションにタブを配置してページを切り替えるデザインのものを作成する場合があります。Bulmaには水平に配置されたタブを作成するためのクラスが用意されています。今回は、タブのスタイルを設定するためのtabsクラスを紹介します。タブのサイズ、が横幅に収まらない場合の表示シンプルな水平ナビゲーションタブを定義するtabsクラスtabsクラスを使用すると、様々なスタイルのシンプルな水平ナビゲーションタブを作成することができます。基本的なタブBulmaを使用したタブの基本的なスタイルは以下のようになります。class="tabs"><ul><li><a>デスクトップ</a></li><li><a>ラップトップ</a></li><li><a>サーバー</a></li></ul></div>特定のタブを選択状態にするには、is-activeクラスを指定します。class="is-active"><a>ラップトップ</a></li><li><a>サーバー</a></li></ul></div>アイコンの設定タブにはそれぞれのアイテムにアイコンを設定することができます。aria-hidden="true"></i></span><span>サーバー</span></a></li></ul></div>タブの配置タブは通常左揃えで配置されますが、中央揃えや右揃えに変更することができます。タブを中央に配置場合は、is-centeredクラスを指定します。class="is-active"><a>HTML</a></li><li><a>CSS</a></li><li><a>JavaScript</a></li></ul></div>タブを右寄せで配置する場合は、is-rightクラスを指定します。class="is-active"><a>HTML</a></li><li><a>CSS</a></li><li><a>JavaScript</a></li></ul></div>タブのサイズタブのサイズは、通常サイズのほかに、小さいサイズ、中くらいのサイズ、大きいサイズに変更することができます。小さいサイズには、is-smallクラスを指定します。aria-hidden="true"></i></span><span>タブ3</span></a></li></ul></div>中くらいのサイズには、is-mediumクラスを指定します。aria-hidden="true"></i></span><span>タブ3</span></a></li></ul></div>大きいサイズには、is-largeクラスを指定します。aria-hidden="true"></i></span><span>タブ3</span></a></li></ul></div>タブのスタイル(形式)Bulmaのタブでは、あらかじめ用意されているクラスを指定することで、スタイル(見え方)を変更することができます。境界線のあるクラシックなスタイルのタブにする場合は、is-boxedクラスを指定します。aria-hidden="true"></i></span><span>タブ3</span></a></li></ul></div>ボタン形式ラジオボタンのような排他的なボタンが並んだ形式のスタイルにするには、is-toggleクラスを指定します。aria-hidden="true"></i></span><span>タブ3</span></a></li></ul></div>ボタン形式のタブでは、左右のボタンを丸くすることができます。ボタンを丸くする場合は、is-toggleクラスにis-toggle-roundedクラスを追加します。aria-hidden="true"></i></span><span>タブ3</span></a></li></ul></div>全幅のタブタブが横幅の全体を占めるようなスタイルにするには、is-fullwidthクラスを指定します。aria-hidden="true"></i></span><span>タブ3</span></a></li></ul></div>タブのサイズ、が横幅に収まらない場合の表示タブのコンテナのサイズ(横幅)がタブのサイズより小さい場合は、タブにスクロールバーが表示されます。[CSSフレームワーク]WebサイトやWebシステムでは、検索可能なメニューを配置したい場合があります。[CSSフレームワーク]CSSフレームワークのBulmaには、HTMLの要素をグリッド状に配置するためのクラスが用意されています。Bulma]Bulmaのボタンクラスを使用するとWebページに簡単にボタンを配置することができます。[CSSフレームワーク]Webページでは、サイドバーにナビゲーションのメニューを配置する場合があります。[CSSフレームワーク]Webページでは、ヘッダーやサイドバーにドロップダウンメニューを配置することがあります。[CSSフレームワーク]Bulmaには、他のCSSフレームワークでバッジと呼ばれている小さな部品のタグラベルが用意されています。[CSSフレームワーク]Webサイトでは、商品紹介ページやダッシュボードのアイテムなど、いろいろな場面でカード型のUIを使用することがあります。[CSSフレームワーク]Bulmaでは、すべての方向にマージンとパディングのヘルパークラスが提供されています。