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

CSSフレームワーク「bulma」

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

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

Bulmaのtileデザイン

Bulmaのタイルデザイン

Bulmaのタイルレイアウトを使うと、グリッドシステムで構築するのが難しい(というか面倒くさい)レイアウトを少量のコードで簡単に構築できます。

でも、正直タイルを使う機会があまりないので、組み方をすぐに忘れてしまうんですよね。
今回は私の備忘録も兼ねて、BulmaのTiles(タイルレイアウト)の使い方を書き留めていこうと思います。

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


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

BulmaのTilesの基本形

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

.tile .is-ancestor
   .tile .is-parent
     .tile .is-child

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

こんな感じです。
コード例:

<div class="tile is-ancestor">
  <div class="tile is-parent">
    <div class="tile is-child box">
      <p>タイルデザインです。</p>
    </div>
  </div>
</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が作られます。

コード例:

<div class="tile is-ancestor">

  <div class="tile is-parent is-2">
    <div class="tile is-child box">
      <p>Tile-その1</p>
      <p>Tileの大きさは2/12です。</p>
    </div>
  </div>

  <div class="tile is-parent is-6">
    <div class="tile is-child box">
      <p>Tile-その2</p>
      <p>Tileの大きさは6/12です。</p>
    </div>
  </div>

  <div class="tile is-parent is-4">
    <div class="tile is-child box">
      <p>Tile-その3</p>
      <p>Tileの大きさは4/12です。</p>
  </div>
  </div>

</div>

結果:

BulmaのTilesの大きさの指定方法

BulmaのTileの大きさはこんな感じ

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

縦並びのTileを作る

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

コード例:

<div class="tile is-ancestor">

  <div class="tile is-parent is-2">
    <div class="tile is-child box">
      <p>Tile-その1</p>
      <p>Tileの大きさは2/12です。</p>
    </div>
  </div>

  <div class="tile is-parent is-6 is-vertical">
    <div class="tile is-child box">
      <p>Tile-その2</p>
      <p>縦並びTileです。</p>
      <p>Tileの大きさは6/12です。</p>
    </div>
    <div class="tile is-child box">
      <p>Tile-その2</p>
      <p>縦並びTileです。</p>
    </div>
  </div>

  <div class="tile is-parent is-4">
    <div class="tile is-child box">
      <p>Tile-その3</p>
      <p>Tileの大きさは4/12です。</p>
  </div>
  </div>

</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」クラスをつける

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

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

  > tile is-parent ← 直下が.is-childなので.is-parentをつける
    > 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を使ってみてください!
ではでは!


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

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

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

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