[CSSフレームワーク]BulmaWebサイトやWebシステムのフォームでは、ドロップダウンリストから項目を選択するselect要素が頻繁に使用されます。Bulmaには、select要素のスタイルを設定するためのクラスが用意されています。今回は、選択肢のリストから項目を選択するセレクトボックスを装飾するselectクラスを紹介します。Awesomeの利用セレクトボックスをラップするselectクラスselectクラスはHTMLのselect要素をラップするコンテナ要素に指定するクラスになります。(input要素に指定するinputクラスや、button要素に指定するbuttonクラスとは違い、select要素のclass属性には指定しません。)Bulmaのselectクラスは、HTML標準のセレクトボックス(項目選択リストボックス)のスタイリングの柔軟性を向上させます。class="select"><select><option>リストアイテム1</option><option>リストアイテム2</option><option>リストアイテム3</option></select></div>selectクラスは、複数項目選択リストボックス(multiple)の形式にも対応しています。セレクトボックスのスタイリングの拡張に加えてアイコンの表示もサポートします。複数項目選択リストボックス複数の項目が選択できるリストボックス(multiple属性を指定したselect要素)のスタイルを設定する際は、セレクトボックスをラップするコンテナの要素(selectクラスを指定した要素)にis-multipleクラスを指定します。value="Strawberry">いちご</option></select></div>セレクトボックスの色Bulmaに用意されているテーマカラーを利用することで、セレクトボックスの色を設定することができます。テーマカラーには以下の6種類があります。危険テーマカラーを指定すると、セレクトボックスは以下のように表示されます。is-danger"><select><option>danger</option><option>アイテム1</option><option>アイテム2</option></select></div></div>テーマカラーの指定は、対応するクラスのis-primaryis-linkis-infois-successis-warningis-dangerで行います。セレクトボックスのサイズセレクトボックスのサイズは、それぞれのサイズに対応するクラスで指定します。設定できるサイズには、以下の4種類があります。大きいそれぞれのサイズのセレクトボックスは、次のようになります。is-large"><select><option>large</option><option>アイテム1</option><option>アイテム2</option></select></div></div>サイズの指定は、対応するクラスのis-smallis-normalis-mediumis-largeで行います。サイズを指定しない場合(サイズの指定を省略した場合)は、通常状態(is-normalクラスを指定した時)と同じになります。丸いセレクトボックスセレクトボックスは角を丸くして、左右を半円形にすることができます。is-rounded"><select><option>丸いセレクトボックス</option><option>アイテム1</option><option>アイテム2</option></select></div>丸みを帯びたセレクトボックスの指定には、is-roundedクラスを使用します。状態によるセレクトボックスのスタイルセレクトボックスのスタイルは、状態を指定することによって変化させることができます。状態には、以下の3種類があります。class="is-hovered"><option>ホバー</option><option>アイテム1</option><option>アイテム2</option></select></div>ホバー状態の指定には、is-hoveredクラスを使用します。is-hoveredクラスの指定は、selectクラスを指定した要素ではなく、select要素に対して行います。class="is-focused"><option>フォーカス</option><option>アイテム1</option><option>アイテム2</option></select></div>フォーカス状態の指定には、is-focusedクラスを使用します。is-focusedクラスは、is-hoveredクラスと同様に、selectクラスを指定した要素ではなく、select要素に対して指定します。is-loading"><select><option>ローディング</option><option>アイテム1</option><option>アイテム2</option></select></div>ローディング状態の指定には、is-loadingクラスを使用します。is-loadingクラスは、selectクラスを指定した要素に適用します。ローディング状態のセレクトボックスに表示されるローディングスピナーは、指定されたサイズに合わせて変化します。is-large"><select><option>large</option><option>アイテム1</option><option>アイテム2</option></select></div></div>アイコン付きのセレクトボックスBulmaのselectクラスを適用したセレクトボックスには、簡単にアイコンを表示することができます。アイコンは、セレクトボックスの左端に表示できます。fa-car"></i></div></div>セレクトボックスのサイズに応じてアイコンのサイズを変更するには、対応するサイズを表すクラス(is-smallクラスや、is-largeクラスなど)をiconクラスを指定している要素に指定します。Awesomeのアイコンを利用する際は、スタイルの参照が必要になります。Awesomeのアイコンにはフリー(無償)のものと、有料のものがあります。Awesomeのアイコンは、以下の記事でご紹介しています。Awesomeのアイコンフォントの一覧です。Free(無償で利用可能)のアイコンのみをリストにまとめました。[CSSフレームワーク]Webサイトでは、商品紹介ページやダッシュボードのアイテムなど、いろいろな場面でカード型のUIを使用することがあります。[CSSフレームワーク]Webページでは、水平方向に左寄せではなく、中央に要素(ブロック)を配置したい場合があります。[CSSフレームワーク]Webフォームのデザインでは、ボタンは欠かせない要素です。[CSSフレームワーク]Webページでは、見出し(タイトル)は欠かせないものです。見出しはページを見やすく飾ります。[CSSフレームワーク]テーブル(table)を使用したリストは、WebサイトやWebシステムのあらゆる場面で活躍します。Awesomeで提供されているアイコンを埋め込むこともできます。[CSSフレームワーク]前回に引き続き、CSSフレームワークのBulmaを使ったグリッドシステムの使い方について記載します。[CSSフレームワーク]Webページでは、ヘッダーやサイドバーにドロップダウンメニューを配置することがあります。