Bulmaの使い方

Bulma CSSフレームワーク入門

この記事を読めば、あなたもCSSフレームワークBulmaを使える人、つまりブルマーになれます！

はじめに

CSSフレームワークBulmaの使い方とサンプルをご紹介します。

このページ自体がBulmaを使って作られています。

ページのソースを表示していただければ、それがそのままBulmaのサンプルとなっています。

文字の大きさや改行間隔など見づらい点もありますが、これもBulmaの特徴です。

Bulmaをよく知っていただくために、あえてカスタムCSSによる調整はいたしません。

生のBulmaをご堪能ください。

ただし、HTMLやCSSのコード表示については、見やすさを考慮してシンタックスハイライターPrism.jsを使用しています。

HTMLのタグやCSSのプロパティ等に色がついているのはPrism.jsによるもので、Bulmaの機能ではありません。ご注意ください。

JavaScriptを使用しない

CSSだけでなくJavaScriptも使用しているCSSフレームワークがありますが、BulmaはJavaScriptを使用しません。

JavaScriptを使用しないので高速に動作しますが、動きのあるUIコンポーネントは提供できません。

Bulma v0.8.0 のモジュール
モジュールサイズ
bulma.min.css189KB

クラスが衝突しやすい

Bulmaのクラスはsectionやtitleのようにシンプルかつ一般的な名前になっています。

ありがちなクラス名は覚えやすい反面、ほかのCSSライブラリと衝突しやすい問題が生じます。

クラスのスコープがグローバルでなければこのような問題は生じないのですが、Bulmaのクラスはスコープがグローバルになっています。

たとえば、BulmaとシンタックスハイライターPrism.jsを併用しようとすると、tagやnumberクラスが衝突します。

そのため、このページではPrism.jsをカスタマイズしています。

This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.

Bulmaを使うと、このような対策が必要となることがあります。

Bulmaの使い方

Bulmaを使うためには、ウェブページをHTML5で記述する必要があります。

ウェブページをHTML5で記述するためには、HTMLの冒頭に次のdoctypeを入れておきます。

<!DOCTYPE html>

Bulmaを正しく動作させるためには、ウェブページをレスポンシブにする必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1">

CSSフレームワークBulmaを使うのに必要な手順は、CSSをひとつ読み込めばいいだけです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

以上をまとめると、Bulmaのテンプレート（雛型）は次のようになります。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトル</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
  </head>
  <body>
    <!-- コンテンツ -->
  </body>
</html>

アイコン

Bulmaでアイコンを使用したいときは、Font Awesomeを使います。

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

section

Bulmaでは、とくにクラスを指定しなければ左右いっぱいに画面領域を使います。 sectionクラスを指定すれば、左右にパディング（空白）ができてレイアウト的に見やすくなります。 .sectionは上にも大きくパディングをとります。 

<section class="section">
  <p>
    Bulmaでは、とくにクラスを指定しなければ左右いっぱいに領域を使います。
    <code>section<code>クラスを指定すれば、左右にパディング（空白）ができてレイアウト的に見やすくなります。
    <code>.section<code>は上にも大きくパディングをとります。
  </p>
</section>

Bulmaでは、とくにクラスを指定しなければ左右いっぱいに画面領域を使います。 sectionクラスを指定すれば、左右にパディング（空白）ができてレイアウト的に見やすくなります。 .sectionは上にも大きくパディングをとります。

Badge (Tag)

<span class="tag">tag</span>

.tag

Size

.tag .tag .is-normal .tag .is-medium .tag .is-large

.is-rounded

.tag .is-rounded

.has-addons

<div class="tags has-addons">
  <span class="tag">.tag</span>
  <span class="tag">.tag</span>
</div>
.tag .tag

title, subtitle

Bulmaでは、h1 や h2 のような見出しの文字が大きくなったり太字になることはありません。

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h5>h5</h5>
<h6>h6</h6>

h1

h2

h3

h4

h5
h6

クラスtitleやsubtitleを指定することにより、見出しを大きく強調することができます。

<h1 class="title">h1</h1>
<h2 class="subtitle">h2</h2>
<h3>h3</h3>
<h4 class="title">h4</h4>
<h5 class="subtitle">h5</h5>
<h6>h6</h6>

h1

h2

h3

h4

h5
h6

あくまでもクラスで装飾しているだけなので、セマンティクス（意味的）なものではありません。

Column

Bulmaで列を分割するには、columnsクラスとcolumnsクラスを使います。

<div class="columns">
  <div class="column">.column</div>
  <div class="column">.column</div>
</div>
.column
.column

.is-full

列をフルサイズにするには、列に.is-fullクラスを指定します。

<div class="columns">
  <div class="column is-full">.column .is-full</div>
</div>
.column .is-full

is-half

列を1:1の比率にするには、列に.is-halfクラスを指定します。

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

is-one-third / is-two-thirds

列を1:2の比率にするには、列にis-one-thirdクラスとis-two-thirdsクラスを指定します。

<div class="columns">
  <div class="column is-one-third">.column .is-one-third</div>
  <div class="column is-two-thirds">.column .is-two-thirds</div>
</div>
.column .is-one-third
.column .is-two-thirds

列を2:1の比率にするには、列にis-two-thirdsクラスとis-one-thirdクラスを指定します。

<div class="columns">
  <div class="column is-two-thirds">.column .is-two-thirds</div>
  <div class="column is-one-third">.column .is-one-third</div>
</div>
.column .is-two-thirds
.column .is-one-third

is-one-quarter / is-three-quarters

列を1:3の比率にするには、列にis-one-quarterクラスとis-three-quartersクラスを指定します。

<div class="columns">
  <div class="column is-one-quarter">.column .is-one-quarter</div>
  <div class="column is-three-quarters">.column .is-three-quarters</div>
</div>
.column .is-one-quarters
.column .is-three-quarters

列を3:1の比率にするには、列にis-three-quartersクラスとis-one-quarterクラスを指定します。

<div class="columns">
  <div class="column is-three-quarters">.column .is-three-quarters</div>
  <div class="column is-one-quarter">.column .is-one-quarter</div>
</div>
.column .is-three-quarters
.column .is-one-quarters

Font size

Bulmaにはフォントサイズを指定するクラスが用意されています。

Bulmaのfont sizeクラス

クラスCSSプロパティ
is-size-1font-size: 3rem;
is-size-2font-size: 2.5rem;
is-size-3font-size: 2rem;
is-size-4font-size: 1.5rem;
is-size-5font-size: 1.25rem;
is-size-6font-size: 1rem;
is-size-7font-size: 0.75rem;

数字が大きくなるにつれて、フォントサイズが小さくなることに注意してください。

<p class="is-size-1">.is-size-1</p>
<p class="is-size-2">.is-size-2</p>
<p class="is-size-3">.is-size-3</p>
<p class="is-size-4">.is-size-4</p>
<p class="is-size-5">.is-size-5</p>
<p class="is-size-6">.is-size-6</p>
<p class="is-size-7">.is-size-7</p>

.is-size-1

.is-size-2

.is-size-3

.is-size-4

.is-size-5

.is-size-6

.is-size-7

<footer class="footer">
  <div class="container">
  </div>
</footer>