様々なサイズのボタンを作成する [CSSフレームワーク Bulma]

Bulma ロゴ トップ バナー

Bulmaのボタンクラスを使用するとWebページに簡単にボタンを配置することができます。

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

前回の記事では、ボタンのカラーを指定する方法をご紹介しました。

様々な色のカラーボタンを作成する [CSSフレームワーク Bulma]
本ブログでは、以前にBulmaのbuttonクラスを使用することで、簡単にフラットなスタイルのボタンを配置することができることをご紹...

Bulmaのbuttonクラスで作成するボタンでは、カラーの他にも様々なサイズを指定することができます。
そこで今回は、ボタンのサイズを指定する方法について紹介します。

クラスを指定してボタンのサイズを作成する

ボタンのサイズを変更するには、Bulmaに用意されているサイズを表すクラスを指定します。

ボタンのサイズ

ボタンのサイズには4種類が用意されています。

  • 小さいサイズ
  • 通常のサイズ
  • 中くらいのサイズ
  • 大きいサイズ

Bulmaのbuttonクラスで様々なサイズを表現したサンプルのブラウザーでの実行結果

HTML

小さなサイズのボタンには、is-small
通常のサイズのボタンには、is-normal
中くらいのサイズのボタンには、is-medium
大きなサイズのボタンには、is-large
を指定します。
サイズを指定しない場合は、通常サイズ(is-normalと同じ)になります。

サイズの指定では、それぞれのボタンに指定する方法とは別に、まとめて指定する方法も用意されています。
複数のボタンのサイズをまとめて指定する場合は、ボタンの親となるラップ要素を配置し、buttonsクラスを指定します。

サイズには、「小」「中」「大」の3種類が指定できます。
小サイズのボタンをセットで設定するには、are-small
中サイズのボタンをセットで設定するには、are-medium
大サイズのボタンをセットで設定するには、are-large
を指定します。

Bulmaのbuttonクラスで様々なサイズをまとめて表現したサンプルのブラウザーでの実行結果

HTML

複数のボタンセットのサイズを変更した場合でも、一部のボタンのサイズを変更することができます。
他のボタンとは別のサイズを指定したいボタンにサイズを表すクラスを指定します。

以下の例では、buttons are-smallで複数のボタンに小さいサイズを設定し、一部のボタンを通常、中、大に指定します。

Bulmaのbuttonクラスで様々なサイズをまとめて表現し、一部のサイズを個別に指定したサンプルのブラウザーでの実行結果

HTML

フルサイズのボタン

横一杯に幅を広げたフルサイズのボタンを表示したい場合は、is-fullwidthクラスを指定します。

Bulmaのbuttonクラスで横幅一杯にサイズを指定したサンプルのブラウザーでの実行結果

HTML

ボタンサイズの設定例

ここでは、簡単な住所入力フォームを作成します。

Bulmaサイズ指定ボタン作成例のブラウザーでの表示

HTML

住所入力フォームの項目には、郵便番号、都道府県、市区町村、番地、建物名・号室を用意しています。
郵便番号には、郵便番号を参照(検索)するモーダルを起動することを想定して、テキストボックスの右にボタンを配置しています。
この参照ボタンのサイズはノーマル(デフォルト)サイズです。
フォームのフッター部(最下部)には、データを送信するためのボタンと、操作をキャンセルするためのボタンを配置しています。
送信ボタンとキャンセルボタンは、他の部品よりも強調させるために、is-mediumクラスを指定して少し大きくしています。

Bulma 入門 Tips 一覧