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

本記事の内容

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

BULMAの概要記事については、こちらの記事を参照して下さい。

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