Bulma CSS フレームワークチートシート

Bulma Bulma は、完全に Flexbox をベースに設計されたモダンで軽量なオープンソース CSS フレームワークです。

レスポンシブ・ブレークポイント

         768px       1024px              1216px       1408px
<---------^------------^------------------^-------------^------------->
  Mobile      Tablet         Desktop         Widescreen      FullHD

• モバイル：〜 768px
• タブレット：769px 〜
• デスクトップ：1024px 〜
• ワイドスクリーン：1216px 〜
• FullHD：1408px 〜

---

カラムグリッドシステム (Columns Grid)

.columns フレックスコンテナの直下に .column 要素を配置します：

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

カラム幅の修飾子クラス

<div class="column is-half">1/2 幅（半幅）</div>
<div class="column is-one-third">1/3 幅</div>
<div class="column is-three-quarters">3/4 幅</div>
<div class="column is-4">4 / 12 (1/3)</div>

---

共通修飾子 (Core Modifiers)

カラーバリエーション

• .is-primary: ターコイズ
• .is-link: ブルー
• .is-info: シアン
• .is-success: グリーン
• .is-warning: イエロー
• .is-danger: レッド

サイズ修飾子

• .is-small
• .is-normal
• .is-medium
• .is-large

ステータス修飾子

• .is-outlined: 背景透明＋カラーボーダー枠線
• .is-loading: アニメーション付きローディングスピナーを表示
• .is-disabled: 無効化状態（半透明表示）

---

タイポグラフィ・ヘルパークラス

フォントサイズ指定

テキスト配置と大文字小文字変換

• .has-text-centered: 中央揃え
• .has-text-left: 左揃え
• .has-text-right: 右揃え
• .has-text-justified: 両端揃え
• .is-capitalized: 単語の先頭を大文字化
• .is-lowercase: すべて小文字
• .is-uppercase: すべて大文字

---

WYSIWYG コンテンツコンテナ

.content クラスを適用することで、素の Markdown や CMS から出力された記事本文のタイポグラフィを美しく整えます：

<div class="content">
  <h1>メイントピックスタイトル</h1>
  <p>適切な余白と行間が自動適用された標準段落テキスト。</p>
  <ul>
    <li>箇条書きリスト項目 1</li>
    <li>箇条書きリスト項目 2</li>
  </ul>
</div>