プログラミング

Bulma はいいぞ

以前、本ブログで紹介した CSS フレームワーク「bulma」。

最近になってアップデートが行われ、バージョン 0.7.1になったようですね。
サイトもキレイにリニューアルされています。

本ブログの Bulma に関する記事はこちらです。
Bulma ってなんぞ?って方はまずこちらを見るのをおすすめします。
> 私的おすすめ css フレームワーク「Bulma」その 1
> 私的おすすめ css フレームワーク「Bulma」その 2

さて今回の記事ですが、Bulma を使いはじめた方が知っておくと少し幸せになることを紹介します。
私が Bulma を初めて使った時に「ここどうするんだろう?」と疑問に思ったところを中心にまとめてみました。
Bulma を使いはじめた方はぜひ本記事を読んできただければ、と思います。

--- 広告 ---

知っておくと幸せになれる Bulma を使い方 6 選

  • 複数行のカラム
  • カラムのモバイル対応
  • カラムの余白
  • ナビゲーションのモバイル対応
  • font-awesome
  • sass ファイル

複数行のカラム

Bulma ではグリッドシステムが採用されています。
親要素に columns クラス、小要素に column クラスをつけることで、簡単にグリッドレイアウトが作れます。
ただデフォルトではカラムの数が 12 個を越えてしまうと、画面外にカラムが飛び出してしまいます。
カラムを折り返して複数行に渡り配置したい場合には、親要素に is-multiline クラスを追加します。

コード例:

1
<div class="columns **is-multiline**">
2
 <div class="column is-4">1</div>
3
 <div class="column is-4">2</div>
4
 <div class="column is-4">3</div>
5
 <div class="column is-4">4</div>
6
 <div class="column is-4">5</div>
7
</div>

結果:
複数行のカラム

カラムのモバイル対応

Bulma のグリッドシステムはデフォルトでは、デスクトップ・タブレットサイズにのみ適用されており、モバイルには適用されていません。
モバイルでも、デスクトップやタブレットと同じカラムレイアウトにしたい場合は、カラムの親要素に is-mobile を追加します。

コード例:

1
<div class="columns **is-mobile**">
2
 <div class="column">1</div>
3
 <div class="column">2</div>
4
 <div class="column">3</div>
5
 <div class="column">4</div>
6
</div>

結果:(※モバイルでの表示)
Bulma-モバイル表示

また、モバイルでは 1 カラム。タブレットでは 2 カラム。デスクトップでは 3 カラム。といった具合で表示したい場合は、カラムの親要素のクラスに is-mobile を追加し、子要素のカラムにはそれぞれのデバイスに対応したクラスを追加します。

こんな感じです。

コード例: (※モバイル時に複数行にまたがるので、is-multiline クラスを忘れずに!)

1
<div class="columns **is-mobile** **is-multiline**">
2
 <div class="column **is-12-mobile** **is-4-tablet** **is-6-desktop**">
3
  モバイルでは1カラム表示
4
  タブレットでは4/12の大きさで表示
5
  デスクトップでは6/12の大きさで表示
6
 </div>
7
 <div class="column">カラム</div>
8
 <div class="column">カラム</div>
9
</div>

結果:
カラムのモバイル対応_レスポンシブ

基本的には「is-サイズ-デバイス」形式のクラスをカラムに追加することで、デバイス別のレイアウトを作れます。

この他にもカラムのモバイル・レスポンシブ対応のためのクラスが多数用意されています。

詳細はこちらをご覧ください
> Bulma-Columns responsiveness
> Bulma-Column sizes

カラムの余白

Bulma では column クラスをつけた要素には、デフォルトで padding: 0.75rem が適用されます。
したがって、column クラスをつけた要素を並べると各要素間で一定の隙間ができます。
この隙間をなくすにはcolumns クラスのついた要素に is-gapless クラスを追加することでできます。

コード例:

1
<div class="columns **is-gapless**">
2
  <div class="column">
3
    カラム
4
  </div>
5
  <div class="column">
6
    カラム
7
  </div>
8
  <div class="column">
9
    カラム
10
  </div>
11
  <div class="column">
12
    カラム
13
  </div>
14
</div>

結果:
Bulmaのgapless
また、隙間のサイズを変更したい場合には、columns クラスのついた要素に is-variable クラスを追加し、サイズに対応したクラスをさらに追加することでできます。
隙間のサイズのクラスは、is-0 から is-8 まであります。

is-0 クラスが is-gapless クラスを追加したときと同じで、余白がなくなります。
is-3 クラスを追加すると padding: 0.75rem、つまりは余白のデフォルト値が適用されます。
is-8 クラスを追加すると padding: 2rem が適用されます。

コード例:

1
<div class="columns **is-variable** **is-3**">
2
  <div class="column">
3
    カラム
4
  </div>
5
  <div class="column">
6
    カラム
7
  </div>
8
  <div class="column">
9
    カラム
10
  </div>
11
  <div class="column">
12
    カラム
13
  </div>
14
</div>

結果:
Bulmaのgapの設定

ナビゲーションのモバイル対応

Bulma にはシンプルなナビゲーションが用意されています。Navbar ってやつですね。
これを使うとキレイなナビゲーションを簡単に作れます。モバイルではハンバーガーメニューになりますね。
ただ Bulma には JavaScript ファイルがありません。なので、ナビゲーションのコードをそのままコピペしてもモバイルのハンバーガーメニューは動作しないのです。
Bulma ではナビゲーションをはじめ、タブやモーダルに必要な JavaScript は、自分で書く必要があります。
ただナビゲーションのハンバーガーメニューの JavaScript に関しては、Bulma-Navbarにサンプルのコードがあります。

それが下記のコードです。
ナビゲーションのコード

1
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
2
 <span aria-hidden="true"></span>
3
 <span aria-hidden="true"></span>
4
 <span aria-hidden="true"></span>
5
</a>
6
7
<div class="navbar-menu" id="navMenu">
8
 <!\-\- navbar-start, navbar-end... -->
9
</div>

JavaScript のコード

1
<script>
2
document.addEventListener('DOMContentLoaded', function () { //①
3
4
  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); //②
5
6
  if ($navbarBurgers.length > 0) {
7
8
    $navbarBurgers.forEach(function ($el) {
9
      $el.addEventListener('click', function () { //③
10
11
        var target = $el.dataset.target; //④
12
        var $target = document.getElementById(target); //④
13
14
        $el.classList.toggle('is-active'); //⑤
15
        $target.classList.toggle('is-active'); //⑤
16
17
      });
18
    });
19
  }
20
});
21
</script>

処理自体はとてもシンプルです。少し JavaScript のコードを解説してみますね。

  1. まずは DOM を読み込みます。終わったら function(){}の処理をします。
  2. navbar-burger クラスがついたもの。つまりハンバーガーメニューボタンを取得します。
  3. 取得したハンバーガーメニューボタンに対してイベントを追加します。
  4. ハンバーガーメニューの data-target の値を id としてもつ要素を取得しています。この id を持つ要素がハンバーガーメニューによって展開されます。
  5. クラスの切り替えでメニューの表示・非表示を制御します。

Bulma-Navbarのサンプルコードをそのままコピペしても動作します。
ただ data-target や id などはコーディングの時に、自分のサイトに合うようにカスタマイズして組み込んだ方が良いでしょう。

font-awesome

Bulma のクイックスタートのコードを良く見てみると、font-awesome を読み込んでいますね。
Bulma では font-awesome に対応したクラスが用意されており、キレイなアイコンを表現できます。
font-awesome を読み込まなくとも、Bulma 自体はしっかりと動作します。
が、キレイなアイコンをサイトに表示したいな、という方は font-awesome もページに読み込んだほうが良いでしょう。

Bulma のアイコンの扱いはBulma-Iconを確認してみてください。
…いつの間にか font-awesome 5 に対応していますね。v0.7.1 から変わったのでしょうか。

sass ファイル

Bulma をダウンロードすると、css ファイルと共に sass ファイルも付属しています。構成はこのようになっています。

1
bulma
2
  ∟bulma.sass
3
  ∟sass
4
  ∟base
5
  ∟components
6
  ∟elements
7
  ∟grid
8
  ∟layout
9
  ∟utilities

bulma.sass

bulma.sass は、sass フォルダ以下の各_all.sass を読み込んでいます。
bulma の sass をカスタマイズしたらこの bulma.sass をコンパイルすることで、カスタマイズが反映された css ファイルを生成できます。

sass フォルダ

この中に各 sass ファイルが役割ごとにまとめられています。

base フォルダ

リセットやヘルパーなどの、一番基礎の部分の sass ファイルが格納されたフォルダです。あまりいじることはないでしょう。

components フォルダ

パンくずやメニューなどのコンポーネントのための sass が格納されたフォルダです。これもあまりいじることはないでしょう。

elements フォルダ

ボタンやボックスなどのエレメント(部品)のための sass が格納されたフォルダです。これも(ry…

grid フォルダ

その名の通りグリッドのための sass を格納したフォルダです。カラムやタイルに関する sass ファイルですね。こ(ry…

layout フォルダ

footer や hero、section のための sass を格納したフォルダです。(ry…

utilities フォルダ

ユーティリティ(機能)のための sass を格納したフォルダです。
よくいじるのはこのフォルダの initial-variables.sass ですね。 initial-variables.sass は、Bulma のデフォルトの変数が記述されたファイルです。
私は、はじめにこのファイルのブレイクポイントを変更したり、ちょっと変数を書き足したりとかしています。

まとめ

いかがだったでしょうか。
Bulma はシンプルなので、学習コストが低く、とっかかりさえできればすぐにマスターできます。
そして一度マスターしてしまえば、すんなり業務でも使える代物だと思います。
みなさんもぜひ Bulma を使ってみてくださいませ。

記事の中でここおかしいよ。とのご指摘があれば、tonyo5197@gmail.com にてご質問を受け付けていますので、こちらからご連絡くださいませ。

さらに知っておくと少し幸せになれる Bulma を使い方+5 選の記事を書きました。
この記事で紹介しきれなかった Bulma の便利な使い方を、さらに 5 点紹介しています。 ぜひこちらの記事も見てみてください!

--- 広告 ---

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

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

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