本記事の内容

モダンなCSSフレームワークBULMAの「Modifiers」について解説します。

Modifiers

Modifiersとは、Bulmaが用意した、HTML要素のスタイルを変更する為のクラスです。

Syntax

ボタンの色、形を変更します。

ex) ベーシックなボタン

<a class="button">
  Button
</a>

ex) Syntaxを用いたスタイルの変更

<a href="" class="button is-primary is-large">
  Button
</a>
<a href="" class="button is-info is-medium">
  Button
</a>
<a href="" class="button is-danger is-small">
  Button
</a>

Helpers

要素の変更をするヘルパークラスです。

ex) Helpersの例
- is-pulled-left : エレメントを左へ移動
- is-marginless : マージンを無くす
- is-radiusless : 角丸のラジウスを無くす

Responsive helpers

画面幅(viewport)によって表示/非表示切り替えを行います。
各種端末画面用のサイズ（mobile, tablet, desktop, widescreen, fullhd）の$breakpointに応じた切り替えが可能です。
例えば、mobileのみflex表示する場合はis-flex-mobileとなります。このように、is-$displayclasses-$breakpointと記載することで、各画面に合わせた表示切り替えが可能です。

ex)
- is-flex-mobile-only : mobile(~768px)のみflex
- is-flex-toutch : mobile, tablet(~768px, 769~1023px)のみflex
- is-hidden-desktop : desktop(1024px~1215px)のみ非表示

Color helpers

9種類の色、9段階のグレーが選べます。

ex)
- has-text-white : 白 hsl(0, 0%, 100%)
- has-text-success : 緑 hsl(141, 71%, 48%)
- has-text-grey : グレー hsl(0, 0%, 48%)

Typography helpers

テキストのサイズ、配置、簡易変換が可能です。

Size
is-size-1(3rem)からis-size-7(0.75rem)まで7つのサイズが選べます。
Responsive size
is-size-4-touchなどとすることで、特定の画面サイズのみを対象にサイズを変えることが可能です。
Alignment
4種類の配置設定が可能です。
- has-text-centerd : 中心
- has-text-justified : 均等割
- has-text-left : 左
- has-text-right : 右
Responsive Alignment
has-text-left-mobileなどとすることで、特定の画面サイズのみを対象に配置を変えることが可能です。
Text transformation
4種類の文字変換が可能です。
- is-capitalized : 最初の一文字のみ大文字に変換
- is-lowercase : 全ての文字を小文字に変換
- is-uppercase : 全ての文字を大文字に変換
- is-italic : 全ての文字をイタリックに変換
Text weight
4種類の文字のウェイト変換が可能です。
- has-text-weight-light : ウェイトを"light"に変換
- has-text-weight-normal : ウェイトを"normal"に変換
- has-text-weight-semibold : ウェイトを"semibold"に変換
- has-text-weight-bold : ウェイトを"bold"に変換

参考

BULMA

CSSフレームワークBulmaのModifiersとは