私的おすすめcssフレームワーク「Bulma」その1

CSSフレームワーク「bulma」

CSSフレームワーク「Bulma」

私がよく使うCSSフレームワーク「Bulma

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

私のお気に入りのCSSフレームワークでもあり、実はこのサイトもBulmaで構築されているのです。
2018/05時点でWordPressのテーマをSANGOに変更しました。

下記が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」クラスをつけます。たったこれだけで、カラムレイアウトを構築することが出来ます。

コード

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

結果

> bulmaのグリッドシステム

12グリッドシステム

Bulmaでは12グリッドシステムを採用しています。

ただ子要素に「column」クラスをつけただけでは、要素の大きさが均等になるだけです。
しかし、サイズを指定するクラスをさらに付け加えれば、要素の大きさを自由に設定できます。

コード

<div class="columns">
 <div class="column is-6">
 <p class="bd-notification is-info">is-6</p>
 </div>
 <div class="column is-3">
 <p class="bd-notification is-success">is-3</p>
 </div>
 <div class="column is-1">
 <p class="bd-notification is-warning">is-1</p>
 </div>
 <div class="column">
 <p class="bd-notification is-danger">AUto</p>
 </div>
 </div></div>

結果

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

モバイル対応

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

コード

<div class="columns is-mobile">
 <div class="column">
 <p class="bd-notification is-info">1</p>
 </div>
 <div class="column">
 <p class="bd-notification is-success">2</p>
 </div>
 <div class="column">
 <p class="bd-notification is-warning">3</p>
 </div>
 <div class="column">
 <p class="bd-notification is-danger">4</p>
 </div>
 </div></div>

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

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

マルチカラムレイアウト

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

コード

<div class="columns is-multiline is-mobile">
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-half">
    <code>is-half</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column is-one-quarter">
    <code>is-one-quarter</code>
  </div>
  <div class="column">
    Auto
  </div>
</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キットを作りました!