2 flat logo on transparent 256
2019-02-10

CSSフレームワークBulma(ブルマ)を使ったグリッドシステムの解説

20190210bluma

前回はCSSフレームワークBulma(ブルマ)の簡単な解説を行いました。

Bulma自体の解説は以下を御覧ください。

軽量なCSSフレームワークBulma(ブルマ)のご紹介

今回はCSSフレームワークBulma(ブルマ)を利用したグリットシステムを紹介します。

なお今回はCDNを利用した解説を行いますので、Sass対応の解説は行いません。

Bulma(ブルマ)のグリッドシステム

Bootstrapと同様にBulma(ブルマ)のグリッドシステムは縦12列で構成されており、それ以上になると自動折返しの設定などを行います。

もちろん、レシポンシブデザインを意識した対応が可能です。 公式サイトは こちら

グリッドシステムのサンプルコード

以下は Bulma(ブルマ)のグリッドシステムのサンプルコードです。

そのままメモ帳などにコピーいただければ動作確認が可能です。

<!DOCTYPE html>
<html>
<head>
    <title>Bulma(ブルマ)でレシポンシブデザインを対応する| 独学者・初心者向けプログラミング・SEO入門サイト</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <style>
        .container {
            padding: 1%;
        }
    </style>
</head>
<body>
<div class="container">
    <p style="text-align: center;margin: 20px">以下columnsクラスで全要素が囲まれています。</p>
    <!--以下からwrapperクラス-->
    <div class="columns">
        <!--以下からネストしたクラス-->
        <div class="column">
            <div class="columns notification is-primary">
                <!--ネストした最下部のブロッククラス1-->
                <div class="column has-text-centered">最下部の要素1</div>
            </div>
            <!--ネストした中部ブロッククラス1-->
            <div class="columns notification is-primary">
                <!--ネストした最下部のブロッククラス2-->
                <div class="column has-text-centered">最下部の要素2</div>
            </div>
        </div>
        <!--以下からネストしたクラス-->
        <div class="column sample2">
            <div class="columns notification is-primary has-text-centered">
                <!--ネストした最下部のブロッククラス3-->
                <div class="column">最下部の要素3</div>

            </div>
            <div class="columns notification is-primary has-text-centered">
                <!--ネストした最下部のブロッククラス4-->
                <div class="column">最下部の要素4</div>

            </div>
        </div>
    </div>
    <p style="text-align: center;margin: 20px">is-mobileでMBにもグリッドシステムを適用</p>
    <div class="columns">
        <div class="column sample1">
            <div class="columns notification is-primary is-mobile">
                <div class="column" style="border: 1px solid;">最下部の要素1
                    <!--以下はFont Awesomeを利用-->
                    <button class="fas fa-spinner fa-pulse"></button>
                </div>
                <div class="column" style="border: 1px solid;">最下部の要素2
                    <!--以下はFont Awesomeを利用-->
                    <button class="fas fa-male fa-pulse"></button>
                </div>
                <div class="column" style="border: 1px solid;">最下部の要素3</div>
                <div class="column" style="border: 1px solid;">最下部の要素4</div>
                <div class="column" style="border: 1px solid;">最下部の要素5</div>
                <div class="column" style="border: 1px solid;">最下部の要素6</div>
            </div>
            <div class="columns notification is-primary is-mobile  is-multiline">
                <div class="column is-8" style="border: 1px solid;">最下部の要素7</div>
                <div class="column is-3" style="border: 1px solid;">最下部の要素8</div>
                <div class="column" style="border: 1px solid;">最下部の要素9</div>
                <div class="column" style="border: 1px solid;">最下部の要素10</div>
                <div class="column" style="border: 1px solid;">最下部の要素11</div>
                <div class="column" style="border: 1px solid;">最下部の要素12</div>
            </div>
        </div>
    </div>

</div>
</body>
</html>

Bulma(ブルマ)のグリッドシステムのコード解説

ネスト構造

Bulma(ブルマ)のネスト構造は

最上位のCSSクラスがcolumns

下位のCSSクラスがcolumnとなります。

サンプルコードでいうと下記になります。

    <!--以下からwrapperクラス-->
    <div class="columns">
        <!--以下からネストしたクラス-->
        <div class="column">
            <div class="columns notification is-primary">
                <!--ネストした最下部のブロッククラス1-->
                <div class="column has-text-centered">最下部の要素1</div>
            </div>
            <!--ネストした中部ブロッククラス1-->
            <div class="columns notification is-primary">
                <!--ネストした最下部のブロッククラス2-->
                <div class="column has-text-centered">最下部の要素2</div>
            </div>
        </div>
        <!--以下からネストしたクラス-->
        <div class="column sample2">
            <div class="columns notification is-primary has-text-centered">
                <!--ネストした最下部のブロッククラス3-->
                <div class="column">最下部の要素3</div>

            </div>
            <div class="columns notification is-primary has-text-centered">
                <!--ネストした最下部のブロッククラス4-->
                <div class="column">最下部の要素4</div>

            </div>
        </div>
    </div>

階層が深くなっても上記の繰り返しを行います。

公式のネスト解説

モバイルでグリッドシステムを対応する

サンプルコードで画面を縮小すると、上部の4要素のみ縦に配置されるかと思います。

画面を縮小した場合にグリッドシステムを適用する場合は Wrapper要素へis-mobileを追加する必要があります。

サンプルコードですと以下の部分です。

<div class="columns notification is-primary is-mobile">
                <div class="column" style="border: 1px solid;">最下部の要素1
                    <!--以下はFont Awesomeを利用-->
                    <button class="fas fa-spinner fa-pulse"></button>
                </div>
                <div class="column" style="border: 1px solid;">最下部の要素2
                    <!--以下はFont Awesomeを利用-->
                    <button class="fas fa-male fa-pulse"></button>
                </div>
                <div class="column" style="border: 1px solid;">最下部の要素3</div>
                <div class="column" style="border: 1px solid;">最下部の要素4</div>
                <div class="column" style="border: 1px solid;">最下部の要素5</div>
                <div class="column" style="border: 1px solid;">最下部の要素6</div>
            </div>

列を折り返す

Bulma(ブルマ)のグリッドシステムで12列を超える場合は 要素が外にはみ出るようになっています。

既定値を超えた要素を折り返す場合は要素のクラスへ is-multilineを追加する必要があります。

サンプルコードですと下記の部分です

         <div class="columns notification is-primary is-mobile  is-multiline">
                <div class="column is-8" style="border: 1px solid;">最下部の要素7</div>
                <div class="column is-3" style="border: 1px solid;">最下部の要素8</div>
                <div class="column" style="border: 1px solid;">最下部の要素9</div>
                <div class="column" style="border: 1px solid;">最下部の要素10</div>
                <div class="column" style="border: 1px solid;">最下部の要素11</div>
                <div class="column" style="border: 1px solid;">最下部の要素12</div>
            </div>

グリッドの1要素の幅を大きくする

1つの列要素を3列分の大きさにしたり、8列などに大きくする設定も可能です。

is-8

上記の数字部分を最大12まで設定し1列の大きさを変更することが可能です。

サンプルコードは下記の部分です。

            <div class="columns notification is-primary is-mobile  is-multiline">
                <div class="column is-8" style="border: 1px solid;">最下部の要素7</div>
                <div class="column is-3" style="border: 1px solid;">最下部の要素8</div>
                <div class="column" style="border: 1px solid;">最下部の要素9</div>
                <div class="column" style="border: 1px solid;">最下部の要素10</div>
                <div class="column" style="border: 1px solid;">最下部の要素11</div>
                <div class="column" style="border: 1px solid;">最下部の要素12</div>
            </div>

なお列を大きくしすぎると、画面にはみ出る可能性があるので その場合はis-multilineで折り返す設定を付与することをお薦めします。

以上になります。

前の記事
次の記事