プログラミング

Bulma はいいぞ(2 回目)

やあ (´・ω・`) ようこそ、とんよー。ブログへ。
このプロテインはサービスだから、まず飲んで落ち着いて欲しい。
うん、「また」なんだ。済まない。

…というわけで前回の記事(知っておくと少し幸せになれる Bulma を使い方 6 選)では、紹介しきれなかった 「知っておくと少し幸せになれる Bulma を使い方」さらに 5 点紹介します。
※本ブログの Bulma に関する記事はこちらです。 Bulma ってなんぞ?って方はまずこちらを見るのをおすすめします。

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

さて今回は以下の項目について紹介しますね。

  • ブレイクポイント
  • Container
  • レスポンシブヘルパー
  • カラムサイズ
  • カラムの Offset

ブレイクポイント

Bulma には、デフォルトで 5 つのブレイクポイントが設定されています。

  • mobile:〜768px まで
  • tablet:769px 〜 1023px
  • desktop:1024px 〜 1215px
  • widescreen:1216px 〜 1407px
  • fullhd:1408px から〜

Bulma-ブレイクポイント

Bulma のブレイクポイントについての詳しい説明はこちら →Bulma-Responsiveness
Bulma のレスポンシブの mixin について詳しい情報はこちら →Bulma uses 9 responsive mixins

Container

Bulma には Bootstrap の container に相当するクラスが用意されています。名前も一緒で、「container」クラスです。
親要素に container クラスをつけることで、センタリングされたボックスが作られ、要素はその中に配置されます。

ちなみにBulma-Containerにもあるように、container クラスは任意の箇所で使用できますが、.navbar .hero .section .footer の直下の要素として置くことが推奨されています。
container のサイズは下記の通りです(デフォルト値):

  • desktop(画面幅が 1024px 以降)の時、.container の最大幅は 960px.
  • widescreen(画面幅が 1216px 以降)の時、.container の最大幅は 1152px.
  • fullhd(画面幅が 1408px 以降)の時、.container の最大幅は 1344px.

また、画面幅いっぱいの.container を作りたい時はis-fluidクラスを追加しましょう。

コード例:

1
<div class="container is-fluid">
2
  <div class="notification">
3
    This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
4
    viewport size.
5
  </div>
6
</div>

結果:
Bulma-container

Bulma の container クラスについての詳しい説明はこちら →Bulma-Container

レスポンシブヘルパー

この要素はモバイル・タブレットは表示して、デスクトップでは非表示で…と、各デバイスで表示・非表示を切り替えたい場合って多々ありますよね。
Bulma では、この対応も簡単にできるよう、レスポンシブヘルパークラスが用意されています。
要素を表示したい場合は、基本的に 「is-flex-表示したいデバイス」のクラスを要素に追加します。
例としてモバイルで表示したい要素には 「is-flex-mobile」クラスを追加すれば OK です。
.is-flex の他に.is-block .is-inline .is-inline-block .is-inline-flex などのヘルパー群があります。
必要に応じて使い分けると良いでしょう。

Bulma-レスポンシブヘルパー

Bulma のレスポンシブヘルパーについての詳しい説明はこちら →Bulma-Responsive helpers

カラムサイズ

Bulma では、基本的にカラムの大きさは「is-大きさ-デバイス」とクラスを書きます。
例えば「is-3-mobile」だと、スマートフォンでカラムの大きさを 3/12 で表示する、といった具合です。
大きさの部分には数字を入れることが多いですが、英分数で書くこともできます。

例えば「is-three-quarters」と指定すると、全体の 3/4 の大きさで表示されます。
three-quarters は英語で 3/4 を意味します。

コード例:

1
<div class="columns">
2
  <div class="column is-four-fifths">is-four-fifths</div>
3
  <div class="column">Auto</div>
4
  <div class="column">Auto</div>
5
</div>
6
7
<div class="columns">
8
  <div class="column is-three-quarters">is-three-quarters</div>
9
  <div class="column">Auto</div>
10
  <div class="column">Auto</div>
11
</div>
12
13
<div class="columns">
14
  <div class="column is-two-thirds">is-two-thirds</div>
15
  <div class="column">Auto</div>
16
  <div class="column">Auto</div>
17
</div>
18
19
<div class="columns">
20
  <div class="column is-three-fifths">is-three-fifths</div>
21
  <div class="column">Auto</div>
22
  <div class="column">Auto</div>
23
</div>
24
25
<div class="columns">
26
  <div class="column is-half">is-half</div>
27
  <div class="column">Auto</div>
28
  <div class="column">Auto</div>
29
</div>
30
31
<div class="columns">
32
  <div class="column is-two-fifths">is-two-fifths</div>
33
  <div class="column">Auto</div>
34
  <div class="column">Auto</div>
35
</div>
36
37
<div class="columns">
38
  <div class="column is-one-third">is-one-third</div>
39
  <div class="column">Auto</div>
40
  <div class="column">Auto</div>
41
</div>
42
43
<div class="columns">
44
  <div class="column is-one-quarter">is-one-quarter</div>
45
  <div class="column">Auto</div>
46
</div>
47
48
<div class="columns">
49
  <div class="column is-one-fifth">is-one-fifth</div>
50
  <div class="column">Auto</div>
51
  <div class="column">Auto</div>
52
</div>

結果:
Bulma-カラムサイズ

Bulma のカラムサイズについての詳しい説明はこちら →Bulma-Column sizes

カラムの Offset

Bulma には Bootstrap と同様の offset 機能が備わっています。
使い方は簡単です。「is-offset-カラム数」のクラスを追加すれば良いのです。

例えば、カラムを一個分ズラしたい時は、is-offset-1 クラスを要素に追加すれば OK です。
カラム数の部分には数字でも英分数でも、どちらでも入れることができます。
これもカラムサイズと同じく、表記を統一した方が良いでしょう。

コード例:

1
<div class="columns is-mobile">
2
  <div class="column is-half **is-offset-one-quarter**"></div>
3
</div>
4
5
<div class="columns is-mobile">
6
  <div class="column is-three-fifths **is-offset-one-fifth**"></div>
7
</div>
8
9
<div class="columns is-mobile">
10
  <div class="column is-4 **is-offset-8**"></div>
11
</div>
12
13
<div class="columns is-mobile">
14
  <div class="column is-11 **is-offset-1**"></div>
15
</div>

結果:
Bulma-カラムサイズ

Bulma のカラムの Offset についての詳しい説明はこちら →Bulma-Column Offset

--- 広告 ---

まとめ

私的おすすめ css フレームワーク「Bulma」その 1から今回の記事まで、ざっと Bulma を紹介してきましたが、いかがだったでしょうか。

Bulma は、とにかくシンプルであることJavaScript が入っていないことからとても導入しやすい CSS フレームワークです。
現在は日本語のドキュメントがなく、公式の英語のドキュメントしかありませんが、書かれいている内容も難しくありません。
一度理解してしまえば、すんなり使えると思います。
みなさん、もっともっと Bulma を使っていきましょう!

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

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

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