[CSSフレームワーク]BulmaWebサイトやWebシステムでは、検索可能なメニューを配置したい場合があります。トップに検索用のテキストを入力するボックスがあり、ボディ(明細)にはカテゴリーを選択できるナビゲーションとメニュー項目のリストが配置され、フッターには、ボタンなどのアクションを実行できるコントロール(要素)が配置された以下のようなUIです。Bulmaには、様々なコントロール(要素)を組み合わせてリスト表示した、上記のようなウィンドウを作成するクラスが用意されています。今回は、コントロールを組み合わせてコンパクトにまとめたウィンドウが作成できるpanelクラスを紹介します。様々なコントロールで構成されたパネルを作成するpanelクラスpanelクラスは、コントロールを組み合わせたウィンドウのコンテナになります。panelクラスの配下には、ヘッダー、タブ(ナビゲーション)、ブロックを作成することができます。panelクラスを指定した要素の子要素にはヘッダーを配置するpanel-headingクラスナビゲーションタブを配置するpanel-tabsクラスブロックを配置するpanel-blockクラスを配置してパネルを構成していきます。ヘッダーパネルにヘッダーを配置すると、以下のようになります。class="panel-heading">ヘッダー</p></nav>パネルのヘッダーには、タイトル(表題)などが配置できます。ボディ(明細)ボディ部分は、水平ナビゲーションのタブや、ブロックを配置します。パネルにタブを配置すると、以下のようになります。class="panel-tabs"><a>タブ1</a><a>タブ2</a><a>タブ3</a></p></nav>パネルにブロックを配置すると、以下のようになります。class="panel-block">ブロック</a></nav>ボディ部分は、タブとブロックを組み合わせて作成します。タブとブロックを組み合わせると、以下のようになります。class="panel-block">ブロック</a></nav>タブとブロックの配置順には制限がありませんので、ブロックを配置してからタブを配置することもできます。class="panel-tabs"><a>タブ1</a><a>タブ2</a><a>タブ3</a></p></nav>タブとブロックは複数組み合わせることもできます。class="panel-block">ブロック2</a></nav>ボディにヘッダーを加えると、以下のようになります。class="panel-block">ブロック2</a></nav>ブロックにコントロールを配置するブロックにはcontrolクラスを指定したコントロール(要素の組み合わせ)inputクラスを指定したテキストボックス(input要素)ラベル(label要素)checkboxクラスを指定したチェックボックス(input要素)buttonクラスを指定したボタン(a要素やbutton要素)など、様々な要素を含めることができます。is-fullwidth">検索実行</button></div></nav>アイコンブロックにはアイコンを配置することができます。アイコンを表示する際は、ブロックに配置したアイコンのコンテナ要素(span)にpanel-iconクラスを指定します。aria-hidden="true"></i></span>ファイル</a></nav>タブアイテムをアクティブ化(強調して選択状態に)するタブのアイテム(項目)をアクティブ化するには、panel-tabsクラスを指定したタブのアイテムの要素にis-activeクラスを指定します。class="panel-block"></a></nav>ブロックアイテムをアクティブ化(強調して選択状態に)するブロックのアイテム(項目)をアクティブ化するには、panel-blockクラスを指定した要素にis-activeクラスを指定します。aria-hidden="true"></i></span>ブロック3</a></nav>パネルの色パネルにはBulmaに定義されているテーマカラーを設定することができます。[CSSフレームワーク]Webページでは、サイドバーにナビゲーションのメニューを配置する場合があります。[CSSフレームワーク]Webページでは、ケースに合わせて様々なスタイルのフォントを使用します。[CSSフレームワーク]Webシステムでは、様々な場面でユーザーにメッセージを表示します。[CSSフレームワーク]WebサイトやWebシステムのフォームでは、ドロップダウンリストから項目を選択するselect要素が頻繁に使用されます。[CSSフレームワーク]WebアプリケーションやWebシステムでは、ページの上部や下部にナビゲーションバーを配置して、ユーザーの操作性を向上させます。[CSSフレームワーク]Webページでは、ヘッダーと共にフッターを設けるのが一般的です。[CSSフレームワーク]CSSフレームワークのBulmaには、HTMLの要素をグリッド状に配置するためのクラスが用意されています。[CSSフレームワーク]Webの入力フォームでは、ユーザーに選択式の項目を配置することがよくあります。