プログラミング

CSS フレームワーク「Bulma」

私がよく使う CSS フレームワーク「Bulma
学習コストも導入コストも低く、気軽に始めることができます!
また少ないコードでありながら、シンプルで洗練された Web デザインを組めるのが特徴的です!

私のお気に入りの CSS フレームワークでもあり、実はこのサイトも Bulma で構築されているのです。
下記が Bulma の公式サイトとドキュメントです。
公式サイト:https://bulma.io/
公式ドキュメント:https://bulma.io/documentation/overview/start/

--- 広告 ---

Bulma のすごいところ

  • CSS ファイルを 1 つ読み込むだけ!
  • hero や card など、流行りのレイアウトも実装済み!
  • Flexbox で構築されていて、レスポンシブデザインにも柔軟に対応できる
  • sass ファイルもあり、カスタマイズ可能
  • 商用利用可
  • 使ってて楽しい!

読み込むファイルが CSS ファイル 1 つだけなのに、レスポンシブ対応のキレイなレイアウトを構築できるのが Bulma の魅力です!

Bulma を導入してみよう

さっそく、Bulma を使ってみましょう!
Bulma を導入するには 3 つの方法があります。

  1. 公式サイトからダウンロードする。
  2. CDN で使う。
  3. npm コマンドでインストールする。

今回は、最も簡単な方法である CDN 経由で Bulma を使ってみます。
Bulma を読み込みたい html ファイルの内に下記のコードを書き足します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">

はい。これで Bulma を使う準備ができました!
とても簡単ですね。

--- 広告 ---

Bulma の使い方

ここからは Bulma でよく使うレイアウト・機能を紹介していきます。

グリッドシステムレイアウト

多くの CSS フレームワークと同様に、Bulma はグリッドシステムを採用しています。
親要素となるブロックに「columns」クラスをつけ、子要素となるブロックに「column」クラスをつけます。たったこれだけで、カラムレイアウトを構築することが出来ます。

コード

1
<div class="columns">
2
  <div class="column">
3
    First column
4
  </div>
5
  <div class="column">
6
    Second column
7
  </div>
8
  <div class="column">
9
    Third column
10
  </div>
11
  <div class="column">
12
    Fourth column
13
  </div>
14
</div>

結果

グリッドシステム
> bulma のグリッドシステム

12 グリッドシステム

Bulma では 12 グリッドシステムを採用しています。
ただ子要素に「column」クラスをつけただけでは、要素の大きさが均等になるだけです。

しかし、サイズを指定するクラスをさらに付け加えれば、要素の大きさを自由に設定できます。

コード

1
<div class="columns">
2
  <div class="column is-6">
3
    <p class="bd-notification is-info">is-6</p>
4
  </div>
5
  <div class="column is-3">
6
    <p class="bd-notification is-success">is-3</p>
7
  </div>
8
  <div class="column is-1">
9
    <p class="bd-notification is-warning">is-1</p>
10
  </div>
11
  <div class="column">
12
    <p class="bd-notification is-danger">AUto</p>
13
  </div>
14
</div>

結果
12 グリッドシステム
> bulma のグリッドシステムのサイズ指定

モバイル対応

Bulma のグリッドシステムは、デフォルトでパソコン・タブレットが共通で適用され、モバイルには適用されません。
モバイルにもグリッドシステムを適用したい場合には、親要素のブロックに「is-mobile」クラスをつけます。

コード

1
<div class="columns is-mobile">
2
  <div class="column">
3
    <p class="bd-notification is-info">1</p>
4
  </div>
5
  <div class="column">
6
    <p class="bd-notification is-success">2</p>
7
  </div>
8
  <div class="column">
9
    <p class="bd-notification is-warning">3</p>
10
  </div>
11
  <div class="column">
12
    <p class="bd-notification is-danger">4</p>
13
  </div>
14
</div>

結果(※モバイルでの表示)
モバイル対応

> Bulma のモバイル対応について

マルチカラムレイアウト

「columns」クラスに 13 個以上の「column」クラスを持った子要素を入れると、カラムが飛び出してしまいます。
「column」クラスを持った子要素を複数行に渡って配置するためには、親要素に「is-multiline」クラスを追加します。

コード

1
<div class="columns is-multiline is-mobile">
2
  <div class="column is-one-quarter">
3
    is-one-quarter
4
  </div>
5
  <div class="column is-one-quarter">
6
    is-one-quarter
7
  </div>
8
  <div class="column is-one-quarter">
9
    is-one-quarter
10
  </div>
11
  <div class="column is-one-quarter">
12
    is-one-quarter
13
  </div>
14
  <div class="column is-half">
15
    is-half
16
  </div>
17
  <div class="column is-one-quarter">
18
    is-one-quarter
19
  </div>
20
  <div class="column is-one-quarter">
21
    is-one-quarter
22
  </div>
23
  <div class="column is-one-quarter">
24
    is-one-quarter
25
  </div>
26
  <div class="column">
27
    Auto
28
  </div>
29
</div>

結果
マルチカラムレイアウト

まだまだあるよ。Bulma の魅力!

Bulma の魅力を紹介してきましたが、この記事では収まりそうにありません。
もっと Bulma を使う方は増えるように、次回も紹介していきたいと思います。

次回の記事はこちら
私的おすすめ css フレームワーク「Bulma」その 2
知っておくと少し幸せになれる Bulma を使い方 6 選
さらに知っておくと少し幸せになれる Bulma を使い方+5 選
…という記事も書いてみました。
実際に Bulma を使っている方にオススメの記事です。

--- 広告 ---

Adobe XD で Bulma の UI キットを作りました【無料配布】

Bulma 好きが高じて、Adobe XD で Bulma の UI キットを作ってしまいました。
無料で配布しますので、ぜひ使ってみてくださいませ!

ファイルは下記のページよりダウンロードできます。
※ダウンロード前にページ内の「注意事項」をお読みください。
Adobe XD で Bulma の UI キットを作りました!