Bulma

Bulma CSSフレームワークの使い方をご紹介します。このページ自体もBulmaを使っているので、そのままサンプルとなっています。

概要
公式サイト https://bulma.io/
開発者 Jeremy Thomas
ライセンス MIT
GitHub stars 44.1k
Bulma v0.9.4
モジュールサイズ
bulma.min.css202KB

チートシート

Navigation

Padding

テンプレート

Bulma CSSフレームワークのテンプレートは次のとおり。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js">
    </script>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

CDN

Bulma CSSフレームワークはCDN (Contents Delivery Network) を通じて使うことができる。CDNを使ったBulmaのテンプレートは次のとおり。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

.has-background-primary

Bulma CSSフレームワークを使って背景色を優先色にするには、has-background-primary クラスを指定する。

<div class="has-background-primary">Primary</div>
Primary

.has-background-info

Bulma CSSフレームワークを使って背景色を情報色にするには、has-background-primary クラスを指定する。

<div class="has-background-info">Info</div>
Info

Bulma CSSフレームワークを使って背景色をリンク色にするには、has-background-primary クラスを指定する。

<div class="has-background-link">Link</div>
Link

.has-background-success

Bulma CSSフレームワークを使って背景色を成功色にするには、has-background-primary クラスを指定する。

<div class="has-background-success">Success</div>
Success

.has-background-warning

Bulma CSSフレームワークを使って背景色を警告色にするには、has-background-primary クラスを指定する。

<div class="has-background-warning">Warning</div>
Warning

.has-background-danger

Bulma CSSフレームワークを使って背景色を危険色にするには、has-background-primary クラスを指定する。

<div class="has-background-danger">Danger</div>
Danger

.has-background-black

Bulma CSSフレームワークを使って背景色を黒にするには、has-background-primary クラスを指定する。

<div class="has-background-black">Black</div>
Black

.has-background-black-bis

<div class="has-background-black-bis">Black-bis</div>
Black-bis

.has-background-black-ter

<div class="has-background-black-ter">Black-ter</div>
Black-ter

.has-background-dark

Bulma CSSフレームワークを使って背景色を暗くするには、has-background-primary クラスを指定する。

<div class="has-background-dark">Dark</div>
Dark

.has-background-grey-darker

<div class="has-background-grey">Grey</div>
Grey-darker

.has-background-grey-dark

<div class="has-background-grey-dark">Grey-dark</div>
Grey-dark

.has-background-grey

Bulma CSSフレームワークを使って背景色を灰色にするには、has-background-primary クラスを指定する。

<div class="has-background-grey">Grey</div>
Grey

.has-background-grey-light

<div class="has-background-grey-light">Grey-light</div>
Grey-light

.has-background-grey-lighter

<div class="has-background-grey-lighter">Grey-lighter</div>
Grey-lighter

.has-background-light

<div class="has-background-light">Light</div>
Light

.has-background-white-ter

<div class="has-background-white-ter">White-ter</div>
White-ter

.has-background-white-bis

<div class="has-background-white-bis">White-bis</div>
White-bis

.has-background-white

Bulma CSSフレームワークを使って背景色を白にするには、has-background-primary クラスを指定する。

<div class="has-background-white">White</div>
White

Bulma CSSフレームワークを使ってパンくずリストを作成するには、nav 要素に breadcrumb クラスを指定する。

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="/">SE学院</a>
    </li>
    <li>
      <a href="/css/">CSS</a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">Bulma</a>
    </li>
  </ul>
</nav>

.card

<div class="card">
  <div class="card-content">カード</div>
</div>
カード

.card-header

<div class="card">
  <header class="card-header">
    <p class="card-header-title">Header title</p>
  </header>
  <div class="card-content">Content</div>
</div>

Header title

Content
<div class="card">
  <div class="card-content">Content</div>
  <footer class="card-footer">
    <p class="card-footer-item">1st footer item</p>
    <p class="card-footer-item">2nd footer item</p>
  </footer>
</div>
Content

1st footer item

2nd footer item

.column

<div class="columns">
  <div class="column">first column</div>
  <div class="column">second column</div>
</div>
first column
second column

.is-full

<div class="columns">
  <div class="column is-full has-background-primary">full column</div>
</div>
full column

.is-half

<div class="columns">
  <div class="column is-half has-background-primary">half column</div>
</div>
half column

.is-one-third

<div class="columns">
  <div class="column is-one-third has-background-primary">1/3 column</div>
</div>
1/3 column

.is-two-thirds

<div class="columns">
  <div class="column is-two-thirds has-background-primary">2/3 column</div>
</div>
2/3 column

.is-one-quarter

<div class="columns">
  <div class="column is-one-quarter has-background-primary">1/4 column</div>
</div>
1/4 column

.is-three-quarters

<div class="columns">
  <div class="column is-three-quarters has-background-primary">3/4 column</div>
</div>
3/4 column

.container

<div class="container has-background-primary">
  <p>Container</p>
</div/>

Container

.is-fluid

<div class="container is-fluid has-background-primary">
  <p>Fluid container</p>
</div/>

Fluid container

.is-widescreen

<div class="container is-widescreen has-background-primary">
  <p>Widescreen container</p>
</div/>

Widescreen container

.is-fullhd

<div class="container is-fullhd has-background-primary">
  <p>Full HD container</p>
</div/>

Full HD Container

.is-italic

Bulma CSSフレームワークで文字をイタリック（斜体）にするには、is-italic クラスを指定する。

<p class="is-italic">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.is-size-1

Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを最大にするには、is-size-1 クラスを指定する。

<p class="is-size-1">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.is-size-2

Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを2番目の大きさにするには、is-size-2 クラスを指定する。

<p class="is-size-2">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.is-size-3

Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを3番目の大きさにするには、is-size-3 クラスを指定する。

<p class="is-size-3">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.is-size-4

Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを4番目の大きさにするには、is-size-4 クラスを指定する。

<p class="is-size-4">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.is-size-5

Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを5番目の大きさにするには、is-size-5 クラスを指定する。

<p class="is-size-5">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.is-size-6

Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを6番目の大きさにするには、is-size-6 クラスを指定する。

<p class="is-size-6">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.is-size-7

Bulma CSSフレームワークでは、フォントのサイズを1から7までの7段階で指定できる。フォントのサイズを1番小さくするには、is-size-7 クラスを指定する。

<p class="is-size-7">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.m-0

Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを無しにするには、m-0 クラスを指定する。

<div class="m-0 has-background-primary">マージン無し</div>
マージン無し

.m-1

Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを2番目の大きさにするには、m-1 クラスを指定する。

<div class="m-1 has-background-primary">.m-1</div>
.m-1

.m-2

Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを3番目の大きさにするには、m-2 クラスを指定する。

<div class="m-2 has-background-primary">.m-2</div>
.m-2

.m-3

Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを4番目の大きさにするには、m-3 クラスを指定する。

<div class="m-3 has-background-primary">.m-3</div>
.m-3

.m-4

Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを5番目の大きさにするには、m-4 クラスを指定する。

<div class="m-4 has-background-primary">.m-4</div>
.m-4

.m-5

Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを6番目の大きさにするには、m-5 クラスを指定する。

<div class="m-5 has-background-primary">.m-5</div>
.m-5

.m-6

Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを一番大きくするには、m-6 クラスを指定する。

<div class="m-6 has-background-primary">一番大きいマージン</div>

.mt-0

Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。

<div class="mt-0 has-background-primary">.mt-0</div>
.mt-0

.mt-1

Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。

<div class="mt-1 has-background-primary">.mt-1</div>
.mt-1

.mt-1

Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。

<div class="mt-2 has-background-primary">.mt-2</div>
.mt-2

.mt-3

Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。

<div class="mt-3 has-background-primary">.mt-3</div>
.mt-3

.mt-4

Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。

<div class="mt-4 has-background-primary">.mt-4</div>
.mt-4

.mt-5

Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。

<div class="mt-5 has-background-primary">.mt-5</div>
.mt-5

.mt-6

Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。

<div class="mt-6 has-background-primary">.mt-6</div>
.mt-6

.mr-0

Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。

<div class="mr-0 has-background-primary">.mr-0</div>
.mr-0

.mr-1

Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。

<div class="mr-1 has-background-primary">.mr-1</div>
.mr-1

.mr-2

Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。

<div class="mr-2 has-background-primary">.mr-2</div>
.mr-2

.mr-3

Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。

<div class="mr-3 has-background-primary">.mr-3</div>
.mr-3

.mr-4

Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。

<div class="mr-4 has-background-primary">.mr-4</div>
.mr-4

.mr-5

Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。

<div class="mr-5 has-background-primary">.mr-5</div>
.mr-5

.mr-6

Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。

<div class="mr-6 has-background-primary">.mr-6</div>
.mr-6

.mb-0

Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。

<div class="mb-0 has-background-primary">.mb-0</div>
.mb-0

.mb-1

Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。

<div class="mb-1 has-background-primary">.mb-1</div>
.mb-1

.mb-2

Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。

<div class="mb-2 has-background-primary">.mb-2</div>
.mb-2

.mb-3

Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。

<div class="mb-3 has-background-primary">.mb-3</div>
.mb-3

.mb-4

Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。

<div class="mb-4 has-background-primary">.mb-4</div>
.mb-4

.mb-5

Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。

<div class="mb-5 has-background-primary">.mb-5</div>
.mb-5

.mb-6

Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。

<div class="mb-6 has-background-primary">.mb-6</div>
.mb-6

.ml-0

Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。

<div class="ml-0 mt-1 has-background-primary">.ml-0</div>
.ml-0

.ml-1

Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。

<div class="ml-1 mt-1 has-background-primary">.ml-1</div>
.ml-1

.ml-2

Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。

<div class="ml-2 mt-1 has-background-primary">.ml-2</div>
.ml-2

.ml-3

Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。

<div class="ml-3 mt-1 has-background-primary">.ml-3</div>
.ml-3

.ml-4

Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。

<div class="ml-4 mt-1 has-background-primary">.ml-4</div>
.ml-4

.ml-5

Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。

<div class="ml-5 mt-1 has-background-primary">.ml-5</div>
.ml-5

.ml-6

Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。

<div class="ml-6 mt-1 has-background-primary">.ml-6</div>
.ml-6

.mx-0

Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。

<div class="mx-0 mt-1 has-background-primary">.mx-0</div>
.mx-0

.mx-1

Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。

<div class="mx-1 mt-1 has-background-primary">.mx-1</div>
.mx-1

.mx-2

Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。

<div class="mx-2 mt-1 has-background-primary">.mx-2</div>
.mx-2

.mx-3

Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。

<div class="mx-3 mt-1 has-background-primary">.mx-3</div>
.mx-3

.mx-4

Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。

<div class="mx-4 mt-1 has-background-primary">.mx-4</div>
.mx-4

.mx-5

Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。

<div class="mx-5 mt-1 has-background-primary">.mx-5</div>
.mx-6

.mx-6

Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。

<div class="mx-6 mt-1 has-background-primary">.mx-6</div>
.mx-6

.my-0

Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。

<div class="my-0 has-background-primary">.my-0</div>
.my-0

.my-1

Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。

<div class="my-1 has-background-primary">.my-1</div>
.my-1

.my-2

Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。

<div class="my-2 has-background-primary">.my-2</div>
.my-2

.my-3

Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。

<div class="my-3 has-background-primary">.my-3</div>
.my-3

.my-4

Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。

<div class="my-4 has-background-primary">.my-4</div>
.my-4

.my-5

Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。

<div class="my-5 has-background-primary">.my-5</div>
.my-5

.my-6

Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。

<div class="my-6 has-background-primary">.my-6</div>
.my-6

.has-text-weight-light

<p class="has-text-weight-light">Light</p>

Light

.has-text-weight-normal

<p class="has-text-weight-normal">Normal</p>

Normal

.has-text-weight-medium

<p class="has-text-weight-medium">Medium</p>

Medium

.has-text-weight-semibold

<p class="has-text-weight-semibold">Semibold</p>

Semibold

.has-text-weight-bold

<p class="has-text-weight-bold">Bold</p>

Bold

<footer class="footer">
  <div class="content has-text-centered">
    <p>SE学院</p>
  </div>
</footer>

.input

<form action="#">
  <div class="field">
    <label class="label">First name</label>
    <div class="control">
      <input class="input" type="text" placeholder="First name">
    </div>
  </div>
</form>

.has-icons-left

Bulma CSSフレームワークでは、Font Awesome アイコンを利用できる。

<div class="field">
  <p class="control has-icons-left">
    <input class="input" type="password" placeholder="Password">
    <span class="icon is-small is-left">
      <i class="fas fa-lock"></i>
    </span>
  </p>
</div>

.title

Bulmaでタイトルを表示するには、h1 - h6 要素に title クラスを指定する。

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

h2

h3

h4

h5
h6

.subtitle

Bulmaでサブタイトルを表示するには、h1 - h6 要素に subtitle クラスを指定する。

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

h2

h3

h4

h5
h6

.is-1

Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの7段階で指定できる。タイトルやサブタイトルのサイズを最大にするには、is-1 クラスを指定する。

<h3 class="title is-1">title is-1</h3>
<h3 class="subtitle is-1">subtitle is-1</h3>

title is-1

subtitle is-1

.is-2

Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの7段階で指定できる。タイトルやサブタイトルのサイズを2番目に大きくするには、is-2 クラスを指定する。

<h3 class="title is-2">title is-2</h3>
<h3 class="subtitle is-2">subtitle is-2</h3>

title is-2

subtitle is-2

.is-3

Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの7段階で指定できる。タイトルやサブタイトルのサイズを3番目に大きくするには、is-3 クラスを指定する。

<h3 class="title is-3">title is-3</h3>
<h3 class="subtitle is-3">subtitle is-3</h3>

title is-3

subtitle is-3

.is-4

Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの7段階で指定できる。タイトルやサブタイトルのサイズを4番目に大きくするには、is-4 クラスを指定する。

<h3 class="title is-4">title is-4</h3>
<h3 class="subtitle is-4">subtitle is-4</h3>

title is-4

subtitle is-4

.is-5

Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの7段階で指定できる。タイトルやサブタイトルのサイズを5番目に大きくするには、is-4 クラスを指定する。

<h3 class="title is-5">title is-5</h3>
<h3 class="subtitle is-5">subtitle is-5</h3>

title is-5

subtitle is-5

.is-6

Bulma CSSフレームワークでは、タイトルやサブタイトルのサイズを1から6までの7段階で指定できる。タイトルやサブタイトルのサイズを最小にするには、is-6 クラスを指定する。

<h3 class="title is-6">itle is-6</h3>
<h3 class="subtitle is-6">subtitle is-6</h3>

title is-6

subtitle is-6

.icon

Bulma CSSフレームワークでは、Font Awesome のアイコンを使うことができる。

<span class="icon">
  <i class="fas fa-home"></i>
</span>

.icon-text

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>ホーム</span>
</span>
ホーム 
<a onclick="openModal('modal')" class="button is-primary">開く</a>

<div class="modal">
  <div class="modal-background"></div>
    <div class="modal-content">
      <!-- contnt -->
    </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

<script>
  function openModal(id) {
    document.getElementById(id).classList.add("is-active")
  }
  function closeModal(id) {
    document.getElementById(id).classList.remove("is-active")
  }
<script>
開く .modal-card 
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div id="example" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="/css/bootstrap/">Bootstrap</a>
      <a class="navbar-item" href="/css/materialize/">Materialize</a>
      <a class="navbar-item" href="/css/milligram/">Milligram</a>
    </div>
  </div>
</nav>
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div id="example" class="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item" href="/css/primer/">Primer CSS</a>
      <a class="navbar-item" href="/css/pure/">Pure.css</a>
      <a class="navbar-item" href="/css/semantic/">Semantic UI</a>
    </div>
  </div>
</nav>
<nav class="navbar is-primary">
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="/css/skeleton/">Skeleton</a>
      <a class="navbar-item" href="/css/spectre/">Spectre.css</a>
      <a class="navbar-item" href="/css/tachyons/">Tachyons</a>
    </div>
  </div>
</nav>

.has-dropdown

<nav class="navbar">
  <div class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">Framework</a>
        <div class="navbar-dropdown">
          <a class="navbar-item" href="/css/tailwind/">Tailwind CSS</a>
          <a class="navbar-item" href="/css/uikit/">UIkit</a>
          <a class="navbar-item" href="/css/foundation/">Zurb Foundation</a>
        </div>
      </div>
    </div>
  </div>
</nav>

.p-0

Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。

<div class="p-0 has-background-primary">.p-0</div>
.p-0

.p-1

Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。

<div class="p-1 has-background-primary">.p-1</div>
.p-1

.p-2

Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。

<div class="p-2 has-background-primary">.p-2</div>
.p-2

.p-3

Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。

<div class="p-3 has-background-primary">.p-3</div>
.p-3

.p-4

Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。

<div class="p-4 has-background-primary">.p-4</div>
.p-4

.p-5

Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。

<div class="p-5 has-background-primary">.p-5</div>
.p-5

.p-6

Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。

<div class="p-6 has-background-primary">.p-6</div>
.p-6

.pt-0

Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。

<div class="pt-0 has-background-primary">.pt-0</div>
.pt-0

.pt-1

Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。

<div class="pt-1 has-background-primary">.pt-1</div>
.pt-1

.pt-2

Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。

<div class="pt-2 has-background-primary">.pt-2</div>
.pt-2

.pt-3

Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。

<div class="pt-3 has-background-primary">.pt-3</div>
.pt-3

.pt-4

Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。

<div class="pt-4 has-background-primary">.pt-4</div>
.pt-4

.pt-5

Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。

<div class="pt-5 has-background-primary">.pt-5</div>
.pt-5

.pt-6

Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。

<div class="pt-6 has-background-primary">.pt-6</div>
.pt-6

.pr-0

Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。

<div class="pr-0 has-background-primary">.pr-0</div>
.pr-0

.pr-1

Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。

<div class="pr-1 has-background-primary">.pr-1</div>
.pr-1

.pr-2

Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。

<div class="pr-2 has-background-primary">.pr-2</div>
.pr-2

.pr-3

Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。

<div class="pr-3 has-background-primary">.pr-3</div>
.pr-3

.pr-4

Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。

<div class="pr-4 has-background-primary">.pr-4</div>
.pr-4

.pr-5

Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。

<div class="pr-5 has-background-primary">.pr-5</div>
.pr-5

.pr-6

Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。

<div class="pr-6 has-background-primary">.pr-6</div>
.pr-6

.pb-0

Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。

<div class="pb-0 has-background-primary">.pb-0</div>
.pb-0

.pb-1

Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。

<div class="pb-1 has-background-primary">.pb-1</div>
.pb-1

.pb-2

Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。

<div class="pb-2 has-background-primary">.pb-2</div>
.pb-2

.pb-3

Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。

<div class="pb-3 has-background-primary">.pb-3</div>
.pb-3

.pb-4

Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。

<div class="pb-4 has-background-primary">.pb-4</div>
.pb-4

.pb-5

Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。

<div class="pb-5 has-background-primary">.pb-5</div>
.pb-5

.pb-6

Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。

<div class="pb-6 has-background-primary">.pb-6</div>
.pb-6

.pl-0

<div class="pl-0 has-background-primary">.pl-0</div>
.pl-0

.pl-1

<div class="pl-1 has-background-primary">.pl-1</div>
.pl-1

.pl-2

<div class="pl-2 has-background-primary">.pl-2</div>
.pl-2

.pl-3

<div class="pl-3 has-background-primary">.pl-3</div>
.pl-3

.pl-4

<div class="pl-4 has-background-primary">.pl-4</div>
.pl-4

.pl-5

<div class="pl-5 has-background-primary">.pl-5</div>
.pl-5

.pl-6

<div class="pl-6 has-background-primary">.pl-6</div>
.pl-6

.px-0

Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。

<div class="px-0 has-background-primary">.px-0</div>
.px-0

.px-1

Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。

<div class="px-1 has-background-primary">.px-1</div>
.px-1

.px-2

Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。

<div class="px-2 has-background-primary">.px-2</div>
.px-2

.px-3

Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。

<div class="px-3 has-background-primary">.px-3</div>
.px-3

.px-4

Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。

<div class="px-4 has-background-primary">.px-4</div>
.px-4

.px-5

Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。

<div class="px-5 has-background-primary">.px-5</div>
.px-5

.px-6

Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。

<div class="px-6 has-background-primary">.px-6</div>
.px-6

.py-0

Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。

<div class="py-0 has-background-primary">.py-0</div>
.py-0

.py-1

Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。

<div class="py-1 has-background-primary">.py-1</div>
.py-1

.py-2

Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。

<div class="py-2 has-background-primary">.py-2</div>
.py-2

.py-3

Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。

<div class="py-3 has-background-primary">.py-3</div>
.py-3

.py-4

Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。

<div class="py-4 has-background-primary">.py-4</div>
.py-4

.py-5

Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。

<div class="py-5 has-background-primary">.py-5</div>
.py-5

.py-6

Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。

<div class="py-6 has-background-primary">.py-6</div>
.py-6

.has-text-centered

Bulma CSSでテキストを中央寄せにするには、has-text-centered クラスを指定する。

<p class="has-text-centered">中央寄せ</p>

中央寄せ

.has-text-justified

<p class="has-text-justified px-2">
  Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife.
</p>

Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife.

.has-text-left

Bulma CSSでテキストを左寄せにするには、has-text-centered クラスを指定する。

<p class="has-text-left">左寄せ</p>

左寄せ

.has-text-right

<p class="has-text-right">右寄せ</p>

右寄せ

.has-text-primary

<p class="has-text-primary">Primary</p>

Primary

.has-text-info

<p class="has-text-info">Info</p>

Info

.has-text-link

<p class="has-text-link">Link</p>

Link

.has-text-success

<p class="has-text-success">Success</p>

Success

.has-text-warning

<p class="has-text-warning">Warning</p>

Warning

.has-text-danger

<p class="has-text-danger">Danger</p>

Danger

.has-text-black

<p class="has-text-black">Black</p>

Black

.has-text-dark

<p class="has-text-dark">Dark</p>

Dark

.has-text-grey-darker

<p class="has-text-grey-darker">Grey-darker</p>

Grey-darker

.has-text-grey-dark

<p class="has-text-grey-dark">Grey-dark</p>

Grey-dark

.has-text-grey

<p class="has-text-grey">Grey</p>

Grey

.has-text-grey-light

<p class="has-text-grey-light has-background-black">Grey-light</p>

Grey-light

.has-text-grey-lighter

<p class="has-text-grey-lighter has-background-black">Grey-lighter</p>

Grey-lighter

.has-text-light

<p class="has-text-light has-background-black">Light</p>

Light

.has-text-white

<p class="has-text-white has-background-black">White</p>

White

.section

<section class="section has-background-primary">
  <p>Section</p>
</section>

Section

.table

Bulma CSSフレームワークを使って表をスタイリングするには、<table> タグに table クラスを指定する。

<table class="table">
  <caption>ブレークポイント</caption>
  <thead>
    <tr>
      <th>ブレークポイント</th>
      <th>寸法</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>mobile</td>
      <td>≤768px</td>
    </tr>
    <tr>
      <td>tablet</td>
      <td>≥769px</td>
    </tr>
    <tr>
      <td>desktop</td>
      <td>≥1024px</td>
    </tr>
    <tr>
      <td>widescreen</td>
      <td>≥1216px</td>
    </tr>
    <tr>
      <td>fullhd</td>
      <td>≥1408px</td>
    </tr>
  </tbody>
</table>
ブレークポイント
ブレークポイント 寸法
mobile ≤768px
tablet ≥769px
desktop ≥1024px
widescreen ≥1216px
fullhd ≥1408px

.is-bordered

<table class="table is-bordered">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001みずほ銀行
0005三菱UFJ銀行
0009三井住友銀行
9900ゆうちょ銀行

.is-striped

<table class="table is-striped">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001みずほ銀行
0005三菱UFJ銀行
0009三井住友銀行
9900ゆうちょ銀行

.is-hoverable

テーブルに is-hoverable クラスを指定すると、マウスカーソルを乗せた行の色が変わるようになる。

<table class="table is-hoverable">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001みずほ銀行
0005三菱UFJ銀行
0009三井住友銀行
9900ゆうちょ銀行

.is-narrow

<table class="table is-narrow">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001みずほ銀行
0005三菱UFJ銀行
0009三井住友銀行
9900ゆうちょ銀行

.is-fullwidth

<table class="table is-fullwidth">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001みずほ銀行
0005三菱UFJ銀行
0009三井住友銀行
9900ゆうちょ銀行

.is-selected

テーブルの行に is-selected クラスを指定すると、その行の色が変わる。

<table class="table">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr class="is-selected">
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001みずほ銀行
0005三菱UFJ銀行
0009三井住友銀行
9900ゆうちょ銀行

.tag

<span class="tag">Tag</span>
<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>
Tag Black Dark Light White Primary Link Info Success Warning Danger

参考文献

Thomas, Jeremy. (2021) Documentation