◆当ページにはプロモーションが含まれています

Bulma

Bulma チートシート – スタイル&レイアウト編

CSS フレームワーク Bulma

みなさんこんにちは、どんぶラッコです。

この度、CSSフレームワークBulmaのチートシートを作ったので公開しておこうと思います!

といっても、レイアウトについてよく使うやつを列挙しただけですが笑

適宜リファレンスとして使ってください!


クラスの命名規則


https://bulma.io/documentation/modifiers/syntax/

They all start with is- or has-.


  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

大きさ


  • is-small
  • is-medium
  • is-large

スタイルや状態


  • is-outlined
  • is-loading
  • [disabled]

Float


  • is-clearfix
  • is-pulled-left
  • is-pulled-right

クリア系


  • is-marginless
  • is-paddingless
  • is-radiusless
  • is-shadowless

Helper クラス


  • is-overlay
  • is-clipped
  • is-unselectable
  • is-invisible
  • is-hidden
  • is-sr-only
  • is-relative

Display クラス (1つ)


  • is-block
  • is-flex
  • is-inline
  • is-inline-block
  • is-inline-flex

1つだけ表示・隠す


  • is-**-mobile
  • is-**-tablet-only
  • is-**-desktop-only
  • is-**-widescreen-only
  • is-hidden-mobile
  • is-hidden-tablet-only
  • is-hidden-desktop-only
  • is-hidden-widescreen-only

2つ以上表示・隠す


  • is-**-touch
  • is-**-tablet
  • is-**-desktop
  • is-**-widescreen
  • is-**-fullhd
  • is-hidden-touch
  • is-hidden-tablet
  • is-hidden-desktop
  • is-hidden-widescreen
  • is-hidden-fullhd

テキスト・背景の色


9色・9階調の灰色 has-text-** has-background-**

  • has-text-white … 白
  • has-text-black … 黒
  • has-text-light … ライト
  • has-text-dark … ダーク
  • has-text-primary … エメラルド
  • has-text-info … 明るい青
  • has-text-link … 青
  • has-text-success … 緑
  • has-text-warning … 黄
  • has-text-danger … 赤
  • has-text-black-bis … 暗い
  • has-text-black-ter
  • has-text-grey-darker
  • has-text-grey-dark
  • has-text-grey
  • has-text-grey-light
  • has-text-grey-lighter
  • has-text-white-ter
  • has-text-white-bis … 明るい

Size


  • is-size-1
  • is-size-7
  • 3rem から 0.5rem ずつ小さくなっていく

Alignment


  • has-text-centered
  • has-text-justified
  • has-text-left
  • has-text-right

大文字小文字


  • is-capitalized
  • is-lowercase
  • is-uppercase
  • is-italic

テキスト重み


  • has-text-weight-light
  • has-text-weight-normal
  • has-text-weight-medium
  • has-text-weight-semibold
  • has-text-weight-bold

Font-family


  • is-family-sans-serif
  • is-family-monospace
  • is-family-primary
  • is-family-secondary
  • is-family-code

Columns


Basics


columnsで囲ってから中に column を追加する

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

Sizes


他の列は自動的にスペースを埋めてくれる

  • is-full 4/4
  • is-three-quarters 3/4
  • is-half 2/4
  • is-one-quarter 1/4

  • is-two-thirds 2/3
  • is-one-third 1/3

  • is-four-fifths 4/5
  • is-three-fifths 3/5
  • is-two-fifths 2/5
  • is-one-fifths 1/5

12カラムシステム


  • is-1 ~ is-12

offsetを作る場合

  • is-offset-** <div class=”columns is-mobile”> <div class=”column is-half is-offset-one-quarter”></div> </div>

Narrow System


必要なスペースを獲得したい場合、 is-narrow を利用。

<div class="columns">
  <div class="column is-narrow">
	  <div class="box" style="width: 200px;"></div>
	</div>
	<div class="column"></div>
</div>
  • モバイル端末でもオンにしたい場合は is-mobile をつける。
  • デスクトップにもしたいなら is-desktop をつける。 <div class=”columns is-mobile”> … </div>
  • is-gaplesscolumns 間のスペースをなくす
  • is-multiline で複数行に適用できる <div class=”columns is-gapless is-multiline”> … </div>

Container


<div class="container">
  <div class="notification">
    This container is <strong>centered</strong> on desktop.
  </div>
</div>
  • .navbar
  • .hero
  • .section
  • .footer

Level


  • level: main container
    • level-left for the left side
    • level-right for the right side
      • level-item for each individual element

Media Object


<article class="media">
  <figure class="media-left">
  </figure>
  <div class="media-content">
    <div class="content">
    </div>
    <nav class="level is-mobile">
      <div class="level-left">
        <a class="level-item"></a>
        <a class="level-item"></a>
        <a class="level-item"></a>
      </div>
    </nav>
  </div>
  <div class="media-right">
    <button class="delete"></button>
  </div>
</article>

Hero


https://bulma.io/documentation/layout/hero/#full-height-hero
  • hero
    • hero-head (always at the top)
    • hero-body (always vertically centered)
    • hero-foot (always at the bottom)

full width banner が作れる

<section class="hero">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Hero title
      </h1>
      <h2 class="subtitle">
        Hero subtitle
      </h2>
    </div>
  </div>
</section>

is-bold グラデーション

<section class="hero is-medium is-primary is-bold">
</section>

大きさ変えられる

  • is-medium
  • is-large
  • is-fullheight

navbarを併用して

  • is-fullheight-with-navbar

Section


body の直接の子供

<body>
  <section class="section">
    <div class="container">
    </div>
  </section>
</body>

Footer


<footer class="footer">
</footer>

Tile


<div class="tile">
  <!-- The magical tile element! -->
</div>
  • is-ancestor 水平にtileを並べる <div class=”tile is-ancestor”> <div class=”tile”></div> <div class=”tile”></div> </div>
  • is-vertical 要素を目一杯に広げる <div class=”tile is-ancestor”> <div class=”tile is-4 is-vertical is-parent”> <div class=”tile is-child box”> <p class=”title”>One</p> </div> <div class=”tile is-child box”> <p class=”title”>Two</p> </div> </div> <div class=”tile is-parent”> <div class=”tile is-child box”> <p class=”title”>Three</p> </div> </div> </div>
エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です