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

CSSフレームワーク「bulma」

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クラスを追加します。

コード例:

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

結果:
複数行のカラム

カラムのモバイル対応

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

コード例:

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

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


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

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

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

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

基本的には「is-サイズ-デバイス」形式のクラスをカラムに追加することで、デバイス別のレイアウトを作れます。
この他にもカラムのモバイル・レスポンシブ対応のためのクラスが多数用意されています。
詳細はこちらをご覧ください
> Bulma-Columns responsiveness
> Bulma-Column sizes

カラムの余白

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

この隙間をなくすにはcolumnsクラスのついた要素にis-gaplessクラスを追加することでできます。

コード例:

<div class="columns is-gapless">
  <div class="column">
    カラム
  </div>
  <div class="column">
    カラム
  </div>
  <div class="column">
    カラム
  </div>
  <div class="column">
    カラム
  </div>
</div>

結果:
Bulmaのgapless


また、隙間のサイズを変更したい場合には、columnsクラスのついた要素にis-variableクラスを追加し、サイズに対応したクラスをさらに追加することでできます。
隙間のサイズのクラスは、is-0からis-8まであります。
is-0クラスがis-gaplessクラスを追加したときと同じで、余白がなくなります。
is-3クラスを追加するとpadding: 0.75rem、つまりは余白のデフォルト値が適用されます。
is-8クラスを追加するとpadding: 2remが適用されます。

コード例:

<div class="columns is-variable is-3">
  <div class="column">
    カラム
  </div>
  <div class="column">
    カラム
  </div>
  <div class="column">
    カラム
  </div>
  <div class="column">
    カラム
  </div>
</div>

結果:
Bulmaのgapの設定

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

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

ただナビゲーションのハンバーガーメニューのJavaScriptに関しては、Bulma-Navbarにサンプルのコードがあります。それが下記のコードです。

ナビゲーションのコード

<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
 <span aria-hidden="true"></span>
 <span aria-hidden="true"></span>
 <span aria-hidden="true"></span>
</a>

<div class="navbar-menu" id="navMenu">
 <!-- navbar-start, navbar-end... -->
</div>

JavaScriptのコード

<script>
document.addEventListener('DOMContentLoaded', function () { //①

  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); //②

  if ($navbarBurgers.length > 0) {

    $navbarBurgers.forEach(function ($el) {
      $el.addEventListener('click', function () { //③

        var target = $el.dataset.target; //④
        var $target = document.getElementById(target); //④

        $el.classList.toggle('is-active'); //⑤
        $target.classList.toggle('is-active'); //⑤

      });
    });
  }
});
</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ファイルも付属しています。構成はこのようになっています。

bulma
  bulma.sass
  sass
    base
    components
    elements
    grid
    layout
    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を使ってみてくださいませ。


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

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

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

Bulma好きが高じて、Adobe XDでBulmaのUIキットを作ってしまいました。
無料で配布しますので、ぜひ使ってみてくださいませ!
ファイルは下記のページよりダウンロードできます。
※ダウンロード前にページ内の「注意事項」をお読みください。

Adobe XDでBulmaのUIキットを作りました!