本記事の内容

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

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

Modifiers

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

Syntax

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

ex) ベーシックなボタン

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

Screen Shot 2018-04-13 at 14.45.48.png

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

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

Screen Shot 2018-04-13 at 14.44.23.png

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"に変換

参考

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.