Free Course: Level Up With Bulma CSS

Meet Bulma CSS! Free course here

ドラゴンボールZで2番目に息の長いキャラクター、、、とは特に関係なく、BulmaはJeremy Thomas @jgthmsによって開発されたFlexboxベースのCSSフレームワークです。
そして現在ではGitHubで月間15万以上のダウンロード、26000以上の☆を得るまでに成長しています。

Bulmaを使うとレスポンシブで美しいWebサイトを簡単に作ることができます。
Jeremyは新規プロジェクトでSassのテンプレートを使い回すための基本セットとしてBulmaを作成しました。
その後Flexboxが標準化されたときに、JeremyはBulmaをFlexbox用に書き換えました。
え？Sassを知らない？SassはCSSのすごいやつだよ。

この記事では、Bulmaがどのように動作し、そしてどうやって使うのかを解説します。

これらの3D画像をどうやって作ったか知りたいですか？
これらを構築する方法を学ぶフリーのコースをScrimbaに投稿しました。クリックして登録してね！
Scrimba.comは、フロントエンド開発の様子を、動画ではなくイベントとして確認することが、そしてエディットすることができるプラットフォームです。

How does Bulma work?

Bulmaは4500行のSassからできていて、コンパイルすると9500行のCSSになります。
このコードは何をしているのでしょう？
Bulmaはcolumns、form、component、modifiers、layout、elementsなど、一般的なWebサイトが使用するデザインパターンの90%を網羅しています。
コードはもちろんレスポンシブで、さらにテーマごとのカスタマイズをすることもできます。

Bulmaは全てを解決するわけではありませんが、SassやCSSを手作業で書いていくよりは遙かに生産的です。
またBulmaはCSSにコンパイルされるため、AngularやReact、VueといったJavaScriptフレームワークとも共存可能です。
まとめると、BulmaはJavaScriptを使わないBootstrap、のようなものです。

Bootstrapとは異なり、BulmaはJavaScriptではなく、CSSに依存しています。
しかしBootstrapと同じく、独自のCSSリセットも持っています。
さて、これからBulmaがどのような原則に従って動作するかを見ていきましょう。
あなたはHTMLとCSSに慣れ親しんでいると仮定します。
何故ならBulmaは古典的CSSのようなものだからです。

注意：以下のコードはBulmaではありませんが、Bulmaがどのように動作するかを実演しています。

<!DOCTYPE html>
<html>
  <head>
    …
    <style>
p {
  line-height: 2;
}
    </style>
  </head>
  <body>
    <p>
      A long time ago in a galaxy far far away…
    </p>
  </body>
</html>

HTML内のCSSで、pタグは行間を1行空けるためにline-height:2を指定しました。
ちょっと待って、これ、もし1行空けたくないときはどうするの？
あるいは、全てではなく一部のpタグだけ行間を1行空けたい場合は？
そういう場合は、タグのかわりにclassで指定することができます。

<!DOCTYPE html>
<html>
  <head>
    …
    <style>
.double-spaced {
  line-height: 2;
}
    </style>
  </head>
  <body>
    <p class="double-spaced">
      A long time ago in a galaxy far far away…
    </p>
  </body>
</html>

ここでタグのかわりにdouble-spacedというclassを定義しました。
最初の例よりは賢明な作りになりました。
さらに条件を狭めるために、classを条件付きにすることができます。

<!DOCTYPE html>
<html>
  <head>
    …
    <style>
p.double-spaced {
  line-height: 2;
}
    </style>
  </head>
  <body>
    <p class="double-spaced">
      A long time ago in a galaxy far far away…
    </p>
  </body>
</html>

double-spacedはpタグであることが必須になりました。
これは条件付きCSSで、そしてさらに深い連鎖も作ることができます。
classでも同様に、.class-1.class-2のように条件付きクラスを作ることができます。
これは、BulmaがHTML/CSSの適用絞り込みに使用しているテクニックのひとつです。

AHEM Are we just writing CSS in our HTML now…?
(ง •̀_•́)ง

違いは、Bulmaは1対1のCSSルールではなく、セマンティクスに基づいたパターンを用いていることです。
つまり、ルールではなく関係性を記述するためにBulmaを使うことができるということであり、従ってより強力です。
そのドキュメントを読めばその使い方に迷うことはありません。

Bulmaは条件付きクラスに加え、豊富なHTML/CSS定数を定義してあり、より柔軟なCSSとより一貫性のあるコードを記述できるようになります。
これはチーム間でコードを共有するのに最適です。
定数はクラス同士の関係性を表します。
以下にHTML/CSS定数の簡単な例を示します。

<section class="section">
  <div class="container">
    ...
  </div>
</section>

充分に設計されたBulmaのクラスと定数を使って、あらゆる種類の美しくレスポンシブなWebサイトを作成することが可能です。
事例を見てください。

さて、ここでは以下に示す"Hello World"のスライドから始めましょう。
実際はスライドではなくWebサイトです。

Scrimbaでソースを確認できます。左・右

美しいブログを構築する記事と、Teslaのロンチページを作る記事を、近いうちに公開する予定です。
更新の確認にはMediumとTwitterをフォローしてください。
また私はScrimbaでこれらのコースをフリーで教えています。

"Hello World"

Bulmaの概要を理解したので、さっそくHello Worldの作り方を学びましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta
        name="viewport" content="width=device-width,
        initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://…/bulma.min.css">
    <script defer src="https://…/all.js"></script>
  </head>
  <body>
    <section class="section">
      <div class="container">
        <h1 class="title">
          Hello World
        </h1>
        <p class="subtitle">
          My first website with <strong>Bulma</strong>!
        </p>
      </div>
    </section>
  </body>
</html>

怖がる必要はありません。
全てのBulmaのWebサイトはこのテンプレートから始まります。
最初にhead要素に注目してみましょう。
bulma.min.cssでBulmaの本体をロードし、all.jsはFont Awesomeのアイコンをロードします。
Bulmaは全てのアイコンフォントライブラリをサポートしています。

BulmaではsectionやdivのようにHTML5要素を使用することを勧めます。
より読みやすく、一貫的な記述ができるようになります。
もしクライアントのブラウザが古く、HTML5要素を認識しない場合はどうなるでしょうか？
Bulmaはそんなブラウザにも対応します。

/* bulma.css#L312 */
article,
aside,
figure,
footer,
header,
hgroup,
section {
  display: block;
}

ありがとうありがとう。
この設定によって、クライアントブラウザに関わらずHTML5要素がブロック要素としてレンダリングされるようになります。
それではbodyを見てみましょう。

<section class="section">
  <div class="container">
    <h1 class="title">
      Hello World
    </h1>
    <p class="subtitle">
      My first website with <strong>Bulma</strong>!
    </p>
  </div>
</section>

私が初めてBulmaを使ったときの感想は、(╯°□°）╯︵ ┻━┻
例があまりにも単純すぎたのです。
ひとしきり落ち着いてから自分のWebサイトの構造を見てみたところ、実際に考えていたよりもずっと単純でした。

   .section
       |
  .container
     /   \
.title  .subtitle
   /       \
 ...       ...

.sectionは新しいコンテンツの開始地点を示し、.containerで内部コンテンツをひとまとまりにします。
このような構造でレスポンシブを実現しています。
.titleと.subtitleは表示上のものです。
Bulmaは多くのベストプラクティスとレスポンシブデザインを処理してきました。

Beyond "Hello World"

画像の中身をScrimbaで確認できます。

Bulmaは色など多くの修飾子を持ったレゴのようなものです。
画像のようなWebサイトを作るには、.columns、.media、.icon などいくつかの修飾子が必要です。
そしてそれだけで十分です。
実際のコードはもう少し複雑になりますが、Webサイトの構造自体は単純なものです。

         .column
            |
         .media
          /   \
.media-left  .media-content
        /       \
    .icon      .content
      /           \
    ...           ...

単純なツリーがあるだけです。
実際のコードは以下のようになります。

…
<div class="column">
  <article class="media notification is-info">
    <figure class="media-left">
      <span class="icon is-medium">
        <i class="fab fa-2x fa-css3-alt"></i>
      </span>
    </figure>
    <div class="media-content">
      <div class="content">
        <h1 class="title is-size-4">
          Bulma
        </h1>
        <p class="is-size-5">
          <strong>Bulma</strong> is a modern CSS framework...
        </p>
      </div>
    </div>
  </article>
</div>
…

.notification、.is-info、.is-mediumなどの修飾子は、Webサイトをパーソナライズするのに役立ちます。
別のクラスが必要な条件付き修飾子もあれば、汎用的なものもあります。
修飾子の詳細はこちらでもっと知ることができます。
さらにインタラクティブなプレイグラウンドで動作を確認することもできます。

BulmaはCSSを書くことなく、美しくレスポンシブなWebサイトを作ることができる、魅力的なコンテンツです。

Final thoughts

Bulmaについて私が一番気に入っていることは、それらがどういう意図を持っているかをわざわざ制作者に訊かなくても理解することができるところです。
○○はどうすればいいですか？調べろ！
これはよいアイデアです。
私達はよくわからないCSSをこねくり回すかわりに、CSSの達人の考えを直接見ることができるのです。

ここまで読んでくれてありがとう。
私は最初こそBulmaを学ぶことを躊躇いましたが、使うにつれてそれが如何に強力で一貫的な設計であるかを理解できるようになりました。
Webサイトを設計して開発することは、しばしば想定以上に困難になるものです。
従って私は、Bulmaがもっと大々的に広がるべきだと考えています。
Bulmaをもっと学びたいのであれば、Responsive Blog DesignやResponsive Tesla Launch Pageも見てください。

あなたは私をサポートすることができます。
コーヒーください。
特にチャイと緑茶ラテが好みです。

そしてPatreonでjgthmsをサポートすることも検討してあげてください。
彼は生計とフルタイム雇用をBulmaに捧げると決意したようです。

コメント欄

「Foundationはいいぞ。SASSで書かれていて、全コンポーネントはオプショナルで、エンタープライズでの使用に適してる。」
「Foundationのgridでなんでもかんでもやるのが好きだったのだが、こいつは良さそうだ。コースやってみる。」
「技術記事で絵文字使うのやめれ、voidが発狂するぞ」
「私Bulma大好き！サンプルでFWのことをよりわかりやすくなった。あとScrimba知らなかった、これは凄い！」

感想

何故Z限定なのだろうか。海外はZから始まるのか？

この記事はFree Course: Level Up With Bulma CSSの日本語訳です。

元記事のあるfreeCodeCampは記事毎にサムネイル画像が表示される仕様であるため、サムネ一本釣りができたのですが、Qiitaにはサムネイルの仕組みがないので何がなんだかわかりませんね。

なお、本文中「後で公開する」と言っていた記事は、最後にあるようにResponsive Blog DesignとResponsive Tesla Launch Pageで既に公開されています。

Bulmaはcssが1ファイルだけというコンパクトなCSSフレームワークで、導入が非常に簡単です。
BootstrapとかSemantic UIとかは大規模すぎてわざわざ導入するには役不足、でも一から書くのも辛い、という中小規模サイトにとっては有力な選択肢のひとつになるでしょう。
上司や同僚に「次のプロジェクトはぜひBulmaでいきましょう！」と伝えてみてはいかがでしょうか。

フリーのブルマ