プログラミング

Bulma の Tiles(タイルレイアウト)

Bulma には、今風のTiles(タイルレイアウト)が用意されています。
タイルレイアウトとは、その名の通りタイルを敷きつめていくかのように、レイアウトを構築する手法のことです。
グリッドシステムと異なり、縦横の自由度が高く、任意の箇所に要素をパッと置くことができるため、柔軟なレイアウトを構築できます。

Bulmaのtileデザイン

Bulma のタイルレイアウトを使うと、グリッドシステムで構築するのが難しい(というか面倒くさい)レイアウトを少量のコードで簡単に構築できます。
でも、正直タイルを使う機会があまりないので、組み方をすぐに忘れてしまうんですよね。
今回は私の備忘録も兼ねて、Bulma の Tiles(タイルレイアウト)の使い方を書き留めていこうと思います。

ちなみに、Bulma 公式サイトの Tiles の解説ページはこちらです。→Tiles powered by Flexbox

Bulma ってなんぞ?って方はまずこちらを見るのをおすすめします。
> 私的おすすめ css フレームワーク「Bulma」その 1
> 私的おすすめ css フレームワーク「Bulma」その 2

Bulma の Tiles の基本形

Bulma で Tiles を組む場合は、はじめに下記のような三層構造を作ります。
この構造が Tiles の基本的な構造です。

1
.tile .is-ancestor
2
  ∟ .tile .is-parent
3
  ∟ .tile .is-child

まず、すべての要素に「tile」クラスをつけます。
最上層の祖先要素には「is-ancestor」クラスを。中間の親要素には「is-parent」クラスを。
最下層の子要素には「is-child」クラスをそれぞれ追加します。
こんな感じです。

コード例:

1
<div class="tile is-ancestor">
2
  <div class="tile is-parent">
3
    <div class="tile is-child box">
4
      <p>タイルデザインです。</p>
5
    </div>
6
  </div>
7
</div>

結果:
BulmaのTilesの最も基本的なレイアウト

Bulma-Tiles の最も基本的なレイアウト.is-child についている「box」クラスは、必須ではありません。
「box」クラスをつけると、影がついて分かりやすくなるので、つけているだけです。
「box」クラスがなくとも、タイルレイアウトは作れます。

Tile 要素の大きさを指定する

Tile 要素の大きさは、グリッドシステムと同様に「is-大きさ」のクラスを追加することで設定できます。
下記のコードは左の Tile から順に is-2、is-6、is-4 のクラスをつけています。
つまり「2/12」、「6/12」、「4/12」のサイズで Tile が作られます。

コード例:

1
<div class="tile is-ancestor">
2
3
  <div class="tile is-parent is-2">
4
    <div class="tile is-child box">
5
      <p>Tile-その1</p>
6
      <p>Tileの大きさは2/12です。</p>
7
    </div>
8
  </div>
9
10
  <div class="tile is-parent is-6">
11
    <div class="tile is-child box">
12
      <p>Tile-その2</p>
13
      <p>Tileの大きさは6/12です。</p>
14
    </div>
15
  </div>
16
17
  <div class="tile is-parent is-4">
18
    <div class="tile is-child box">
19
      <p>Tile-その3</p>
20
      <p>Tileの大きさは4/12です。</p>
21
  </div>
22
  </div>
23
24
</div>

結果:
BulmaのTilesの大きさの指定方法

Bulma の Tile の大きさはこんな感じちなみに、グリッドシステムと同様で、Tile の大きさが合計で 12 を超えてしまうと、Tile 要素が画面外に飛び出してしまいます。
Tile 要素の大きさには注意しましょう。

縦並びの Tile を作る

Tile 要素は普通に追加していくと横並びで Tile が作られていきます。
ただ「この列は縦並びでタイルを配置したいな」という場合が出てくると思います。
縦並びのタイルレイアウトを作りたい場合は、親要素に「is-vertical」クラスを追加します。
そうすると「is-vertical」クラスを追加した要素下の Tile は、縦並びになっていきます。

コード例:

1
<div class="tile is-ancestor">
2
3
  <div class="tile is-parent is-2">
4
    <div class="tile is-child box">
5
      <p>Tile-その1</p>
6
      <p>Tileの大きさは2/12です。</p>
7
    </div>
8
  </div>
9
10
  <div class="tile is-parent is-6 **is-vertical**">
11
    <div class="tile is-child box">
12
      <p>Tile-その2</p>
13
      <p>縦並びTileです。</p>
14
      <p>Tileの大きさは6/12です。</p>
15
    </div>
16
    <div class="tile is-child box">
17
      <p>Tile-その2</p>
18
      <p>縦並びTileです。</p>
19
    </div>
20
  </div>
21
22
  <div class="tile is-parent is-4">
23
    <div class="tile is-child box">
24
      <p>Tile-その3</p>
25
      <p>Tileの大きさは4/12です。</p>
26
  </div>
27
  </div>
28
29
</div>

結果:
Bulma-TilesでTileを縦並びにする方法

is-vertical クラスを追加するとこうなります。

Tile のネスト構造

Bulma の Tile は、ネストすることも可能です。
「.is-ancestor > .is-parent > .is-child」の構造を守ってさえいれば、いくらでもネストできます。
ただネストする場合に 1 つ注意点があります。
「.is-parent」クラス、「.is-child」クラスの使い分けです。

この 2 つのクラスの使い分けは下記のようになります。

  • 最下層の.tile にのみ「.is-child」クラスをつける
  • 「.is-child」クラスのついた要素の下には.tile を作らない
  • 「.is-child」クラスのついた要素の親要素に「.is-parent」クラスをつける

上記のルールの例を挙げてみますね。

1
tile is-ancestor
2
  > tile ← 直下に.is-child がないので.is-parent は必要なし
3
    > tile .is-parent ← 直下が.is-child なので.is-parent をつける
4
      > tile .is-child ← 一番下の要素なので.is-child をつける
5
6
  > tile is-parent ← 直下が.is-child なので.is-parent をつける
7
    > tile .is-child ← 一番下の要素なので.is-child をつける

タイルレイアウトをつくるコツとしては、Bulma 公式サイトの Tile の説明にも記載してある通り

  1. 大元の.is-ancestor を用意する
  2. .is-ancestor の中に必要な数だけ.tile 要素を入れる
  3. 縦並びにする要素には.is-vertical をつける
  4. それぞれの.tile 要素の大きさの指定する
  5. .is-ancestor から見て、最下層の.tile 要素に.is-child をつける
  6. .is-child 要素の親要素に.is-parent をつける

の手順で作っていくと一番やりやすいと思います
正直、このルールを守らずとも、タイルレイアウトを作ることができます。
しかし、メンテナンス上、ルールはしっかりと守った方が良いでしょう。

--- 広告 ---

まとめ

いかがだったでしょうか。
比較的に新しく出てきたこのタイルレイアウトですが、今後はいろいろと改良され、グリッドシステムに取って代わっていくのではないかな、と個人的に思っています。
みなさんもぜひ、Bulma の Tiles を使ってみてください!
ではでは!

今回の記事について「ここが間違っているよ。こうした方がいいよ。」といったご意見がありましたら、tonyo5197@gmail.com にてご連絡ください。なるべく返信するよう心がけますので、よろしくお願いします。

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

Bulma 好きが高じて、Adobe XD で Bulma の UI キットを作ってしまいました。
無料で配布しますので、ぜひ使ってみてくださいませ!

ファイルは下記のページよりダウンロードできます。
※ダウンロード前にページ内の「注意事項」をお読みください。

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