Help us understand the problem. What is going on with this article?

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

本記事の内容

モダンな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">
  Button
</a>
<a href="" class="button is-info is-medium">
  Button
</a>
<a href="" class="button is-danger is-small">
  Button
</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"に変換

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした