Bulma.cssのレイアウト作法まとめ

軽量CSSフレームワークには色々ありますが、サイズ、機能、開発の活発性の点で優れたものとしてBulmaがあります。

https://bulma.io/documentation/

サイズもBootstrapのような肥大なものではなく、サイズもそこそこ許容できる大きさで、そして過去から現在まで定常的に保守がなされています。

このような点から、HP制作依頼を頂いた際にBulmaを用いたページ作成を行うことが何度かありました。例えば（掲載許諾済）：

http://www.uprepj.org/


## 色を変える
Blumaでは、色などの全体設定はだいたいCSS変数で定義されています。
例えばPrimaryを変えるには、Primary色のHSLを表すCSS変数を上書きします：
```css
@import "https://cdn.jsdelivr.net/npm/bulma@1.0.1/css/bulma.min.css";

:root {
    --bulma-primary-h: 50deg;
    --bulma-primary-s: 86%;
    --bulma-primary-l: 83%;
}
```
```html
<button class="button is-primary">Primary Button</button>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116310/96d97cf6-67e3-43b5-8080-659dae31939d.png)
Primary色が変わった！

## Container/Section の違い
とりあえずドキュメントを読んでみると
* [Container](https://bulma.io/documentation/layout/container/)：自分より大きな要素中で、子要素を中央に配置するためのもの。`navbar`、`section`、`hero`などの直接の子になる想定。
* [Section](https://bulma.io/documentation/layout/section/)：レスポンシブなパディングを提供する。`body`の直接の子になる想定。

ということで、`section` > `container`の順で配置するのがよさそうです。

```html
<!--正しい順序-->
<div class="section" style="background-color: dodgerblue;">
    section
    <div class="container" style="background-color: powderblue;">
        section > container
    </div>
</div>

<!--逆の順序-->
<div class="container" style="background-color: orangered;">
    container
    <div class="section" style="background-color: moccasin;">
        container > section
    </div>
</div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116310/422212ba-00cd-46b9-86f3-b6a387b76680.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116310/8bfe861a-17e6-4fd5-8759-6fab9ce45c84.png)
青が正しい順序（`section` > `container`）、赤が逆の順序（`container` > `section`）です。

* Sectionはパディングを与えるもの、Containerはマージンを与えるものであることが分かります。
* Sectionによって幅の小さな画面中においても常に左右の余白を保つことができます。
* Containerによって幅の大きな画面中において要素が中央に配置されます。
* 正しい順序で要素を入れることで、上下の余白も保てるようになります。

ということで、基本的に`section` > `container`の中にコンテンツを入れるようにすればよさそうです。


## Contentの役割
[ドキュメント](https://bulma.io/documentation/elements/content/)によると、色々なHTMLタグがサポートされるようになるとのこと。

実際に試してみると、その違いは明白です：

```html
<div class="section">
    <div class="container" style="background-color: beige;">
        <div>
            <p>Content無し</p>
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
            </ul>
            <table>
                <tr>
                    <th>あ</th>
                    <th>か</th>
                    <th>さ</th>
                </tr>
                <tr>
                    <td>い</td>
                    <td>き</td>
                    <td>し</td>
                </tr>
                <tr>
                    <td>う</td>
                    <td>く</td>
                    <td>す</td>
                </tr>
            </table>
        </div>

        <div class="content">
            <p>Contentあり</p>
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
            </ul>
            <table>
                <tr>
                    <th>あ</th>
                    <th>か</th>
                    <th>さ</th>
                </tr>
                <tr>
                    <td>い</td>
                    <td>き</td>
                    <td>し</td>
                </tr>
                <tr>
                    <td>う</td>
                    <td>く</td>
                    <td>す</td>
                </tr>
            </table>
        </div>
    </div>
</div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116310/4bf63978-9848-459f-94f6-828828152dfc.png)
`content`で囲まないと、素のタグの書き方で記述した箇条書きや表が正しく表示されません。

## ContainerとTableの相性
ですが、何もかも`content`で囲めばいいという話でもありません。例えば[表をカスタマイズしたい場合は、`<table>`のクラスに`table`を追加](https://bulma.io/documentation/elements/table/)します。
この時の表はContentに入れると逆に表示がおかしくなってしまいます。
```html
<div class="section">
    <div class="container" style="background-color: azure;">
        <div>
            <p>Content無し</p>
            <table class="table">
                <tr class="is-primary">
                    <th>あ</th>
                    <th>か</th>
                    <th>さ</th>
                </tr>
                <tr>
                    <td>い</td>
                    <td>き</td>
                    <td>し</td>
                </tr>
                <tr>
                    <td>う</td>
                    <td>く</td>
                    <td>す</td>
                </tr>
            </table>
        </div>

        <div class="content">
            <p>Contentあり</p>
            <table class="table">
                <tr class="is-primary">
                    <th>あ</th>
                    <th>か</th>
                    <th>さ</th>
                </tr>
                <tr>
                    <td>い</td>
                    <td>き</td>
                    <td>し</td>
                </tr>
                <tr>
                    <td>う</td>
                    <td>く</td>
                    <td>す</td>
                </tr>
            </table>
        </div>
    </div>
</div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116310/83231f09-6b9a-4fbc-9fea-de1c48169e1b.png)
Content無しの場合だとヘッダ行とコンテンツ行の間に罫線が入りません（恐らくこの表示が正しいと思われます）。しかし、Contentで囲むとすべての行の間に罫線が入ってしまいます