様々な状態を表すボタンを作成する [CSSフレームワーク Bulma]

Bulma ロゴ トップ バナー

BulmaではHTML標準のボタンとは異なる見た目のボタンを簡単に配置することができます。

Bulmaのボタン Button [CSSフレームワーク]
Webフォームのデザインでは、ボタンは欠かせない要素です。 ユーザーに何らかの動作を確定、またはキャンセルさせるためにはボタン...

Bulmaのクラスを利用したボタンでは、カラーやスタイルも簡単にできますが、状態を持ったボタンを作成することもできます。

そこで今回は、ボタンの状態を指定する方法について紹介します。

クラスを指定してボタンの状態を作成する

Bulmaのbuttonクラスを指定したボタンでは、様々な状態を持ったものを表現することができます。

状態を表すボタン

状態には「ホバー」「フォーカス」「アクティブ」「ローディング(読み込み中)」「スタティック(静的)」「無効」があります。

ホバー

ホバー状態(:hover)を指定する場合は、is-hoveredクラスを指定します。

Bulmaのbuttonクラスでホバー状態のボタンを表現したサンプルのブラウザーでの実行結果

HTML

フォーカス

フォーカス状態(:focus)を指定する場合は、is-focusedクラスを指定します。

Bulmaのbuttonクラスでフォーカス状態のボタンを表現したサンプルのブラウザーでの実行結果

HTML

アクティブ

アクティブ状態(:active)を指定する場合は、is-activeクラスを指定します。

Bulmaのbuttonクラスでアクティブ状態のボタンを表現したサンプルのブラウザーでの実行結果

HTML

ローディング(読み込み中)

何らかの処理を行っている最中であることを表すローディングスピナー付きの読み込み中ボタンを表すクラスもBulmaのボタンには用意されています。
読み込み中ボタンは、is-loadingクラスを指定して表現します。

Bulmaのbuttonクラスで読み込み中のボタンを表現したサンプルのブラウザーでの実行結果

HTML

読み込み中ボタンを表現するis-loadingクラスは:: after疑似要素を使用して実装されているため、<input type = “submit”>要素ではサポートされていません。 代わりに<button type = “submit”>の使用を検討してください。

スタティック(静的)

静的状態のボタン(非対話型ボタン)を作成することで、フォームアドオンのテキストラベルとして使用することもできます。
静的ボタンを表現する際は、is-staticクラスを使用します。

Bulmaのbuttonクラスで静的な状態のテキストラベル用ボタンを表現したサンプルのブラウザーでの実行結果

HTML

無効

ボタンが使用できなことを表すために無効な状態のボタンを作成することもできます。
無効状態のボタンを作成する場合は、クラスでの指定ではなくHTMLに用意されているdisabled属性を使用します。

Bulmaのbuttonクラスで無効状態のボタンを表現したサンプルのブラウザーでの実行結果

HTML

状態を持つボタンの設定例

ここでは、スタティック(静的)ボタンを利用して、テキストボックスにラベルを付けてみます。

Bulma状態指定ボタン作成例のブラウザーでの表示

HTML

is-staticクラスを指定することで、クリックできないテキストラベルを表現することができます。
テキストボックスの横に配置することで、表題や補足情報を簡単に作成できます。

Bulma 入門 Tips 一覧