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

CSSフレームワーク「bulma」

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のカラムの配置・大きさ等はこのブレイクポイントに準拠します。

また、ブレイクポイントの値はBulmaのsassファイル > utilities > initial-variables.sassに格納されています。このinitial-variables.sassのブレイクポイントの値を変更し、コンパイルすることで自由にブレイクポイントを変えることができます。

さらにBulmaのsassには、各デバイスに応じた便利なmixinが用意されています。
sassを使ってゴリゴリ書きたい方はぜひmixinを使ってみてください!


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

コード例:

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

結果:

.container.is-fluidの場合

.containerに.is-fluidを追加した場合です。見づらくてすみません…


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の表示用レスポンシブヘルパー

 

逆に、要素を非表示にしたい場合は「is-hidden-非表示にしたいデバイス」クラスを要素に追加します。
例としてモバイルで非表示にしたい要素には「is-hidden-mobile」クラスを追加すればOKです。表示・非表示の切り替えがシンプルで分かりやすいですね。

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

Bulmaの非表示用レスポンシブヘルパー


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

カラムサイズ

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

コード例:

<div class="columns">
  <div class="column is-four-fifths">is-four-fifths</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-three-quarters">is-three-quarters</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-two-thirds">is-two-thirds</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-three-fifths">is-three-fifths</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-half">is-half</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-two-fifths">is-two-fifths</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-one-third">is-one-third</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-one-fifth">is-one-fifth</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

結果:

Bulma-column-英分数

英分数でcolumnの大きさを表示した場合

数字でも分数でも、どちらの表記をしても得られる結果は一緒です。
ただ両方使ってしまうと、こんがらがってしまいますので、書き方は統一することをオススメします。


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

カラムのOffset

BulmaにはBootstrapと同様のoffset機能が備わっています。
使い方は簡単です。「is-offset-カラム数」のクラスを追加すれば良いのです。
例えば、カラムを一個分ズラしたい時は、is-offset-1クラスを要素に追加すればOKです。

カラム数の部分には数字でも英分数でも、どちらでも入れることができます。
これもカラムサイズと同じく、表記を統一した方が良いでしょう。

コード例:

<div class="columns is-mobile">
  <div class="column is-half is-offset-one-quarter"></div>
</div>

<div class="columns is-mobile">
  <div class="column is-three-fifths is-offset-one-fifth"></div>
</div>

<div class="columns is-mobile">
  <div class="column is-4 is-offset-8"></div>
</div>

<div class="columns is-mobile">
  <div class="column is-11 is-offset-1"></div>
</div>

結果:

Bulma-column-offset

columnのofffsetを使用した場合


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

まとめ

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

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

みなさん、もっともっとBulmaを使っていきましょう!


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

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

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

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