はじめに
CSSフレームワークを選ぶとき、「見た目は整えたいけど、JavaScriptのバンドルサイズは増やしたくない」と感じたことはありませんか。BootstrapやMaterial UIは便利な反面、コンポーネント用のJSがついてきて、使わない機能まで読み込んでしまうことがあります。
そんな悩みに正面から応えてくれるのが、今回紹介するBulmaです。FlexboxをベースにしたモダンなCSSフレームワークで、GitHub Starsは5万を超えています。最大の特徴は、JavaScriptを一切含まない、純粋なCSSだけのフレームワークであること。この記事では、Bulmaの特徴からインストール方法、実践的な使い方まで解説していきます。
Bulmaとは
Bulmaは、Flexbox（一部CSS Grid）を土台にした、クラスベースのCSSフレームワークです。is-primaryやhas-text-centeredのように、英単語をそのままクラス名にした直感的な命名規則が特徴で、コンポーネント名を覚えなくてもコードを読むだけで意味が推測できます。
主な特徴
- JavaScript依存ゼロ - フレームワーク本体にJSは一切含まれません。ナビゲーションのバーガーメニューやモーダルの開閉といった動的な挙動は、自分でシンプルなJSを書く前提で設計されています。そのぶんバンドルサイズが軽量です
- Flexboxベースのレイアウト -
columnsとcolumnを組み合わせるだけで、レスポンシブなグリッドレイアウトが直感的に組めます - 意味の分かるクラス命名 -
is-*（状態・バリエーション）、has-*（付加的な性質）というプレフィックスのルールが一貫しているため、初見でも読みやすいです - Sassによるカスタマイズ - Sass変数を上書きするだけで、独自のデザインテーマに調整できます
- HTMLだけで完結するコンポーネント - ボタン・カード・タグ・パンくずリストなど、多くのコンポーネントはクラスを付けるだけで見た目が完成します
インストール
npm
npm install bulma
yarn / pnpm
yarn add bulma
# または
pnpm add bulma
インストール後は、Sassファイルとしてインポートするのが一般的です。
@charset "utf-8";
@import "bulma/sass/utilities/_all.sass";
// 変数のオーバーライドはインポートより前に書く
$primary: #7957d5;
@import "bulma/sass/base/_all.sass";
@import "bulma/sass/elements/_all.sass";
@import "bulma/sass/components/_all.sass";
@import "bulma/sass/layout/_all.sass";
CDN
ビルド環境を用意せず、とりあえず試したい場合はCDNから直接読み込めます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
基本的な使い方
is-*のクラスを組み合わせるだけで、ボタンや通知のバリエーションが作れます。JavaScriptを一行も書いていない点に注目してください。
buttonにis-primaryやis-roundedを付け足すだけで見た目が変わる、この積み木のような組み合わせ方がBulmaの基本です。通知の閉じるボタンのように、動作が必要な部分だけ自分でJSを添えます。
実践的なユースケース
レスポンシブなカラムレイアウト
columnsとcolumnの組み合わせは、Bulmaの核となるレイアウト機能です。画面幅に応じてカラム数を変えたい場合は、is-half-tabletのようにブレークポイント別の指定ができます。
is-half-mobileはスマホ幅で半分、is-one-third-tabletはタブレット以上で1/3幅になる指定です。メディアクエリを自分で書かなくても、クラス名を並べるだけでブレークポイントごとの挙動を制御できます。
フォームUI
fieldとcontrolでラベルと入力欄をまとめるのが、Bulmaのフォームの基本構造です。has-icons-leftを付けると、アイコン付きの入力欄も簡単に作れます。
ナビゲーションバー（バーガーメニュー）
Bulmaのnavbarは、スマホ幅で表示するハンバーガーアイコンまで用意していますが、開閉のロジックはJSを持たないため自分で書く必要があります。これはBulmaが「JavaScriptゼロ」を貫いていることの象徴的な例です。
ウィンドウ幅を狭めてバーガーアイコンをクリックすると、メニューが開閉します。navbar-burgerとnavbar-menuの両方にis-activeをトグルするだけ、というシンプルさがポイントです。
モーダル
modalコンポーネントも同様に、見た目のCSSはBulmaが用意しますが、開閉の制御はis-activeクラスのトグルを自分で書きます。
まとめ
Bulmaは、Flexboxベースの読みやすいクラス設計と、JavaScriptを一切含まないシンプルさが魅力のCSSフレームワークです。
is-*/has-*という一貫した命名規則で、初見でもクラスの意味が推測できるcolumns/columnによるレスポンシブレイアウトが直感的- JSを含まないぶん軽量で、必要な挙動だけを自分でコントロールできる
- Sass変数のオーバーライドで、デフォルトの見た目から自由にカスタマイズできる
「コンポーネントの見た目はフレームワークに任せたいが、動的な挙動は自分で制御したい」というプロジェクトには、Bulmaの割り切った設計がちょうどよくフィットします。まずはCDNで読み込んで、ボタンやカラムレイアウトから触ってみてください。