Bulma CSSフレームワークの使い方をご紹介します。このページ自体もBulmaを使っているので、そのままサンプルとなっています。
| 公式サイト | https://bulma.io/ |
| 開発者 | Jeremy Thomas |
| ライセンス | MIT |
| GitHub stars | 44.1k |
| モジュール | サイズ |
|---|---|
| bulma.min.css | 202KB |
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>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>Bulma CSSフレームワークを使って背景色を優先色にするには、has-background-primary クラスを指定する。
<div class="has-background-primary">Primary</div>Bulma CSSフレームワークを使って背景色を情報色にするには、has-background-primary クラスを指定する。
<div class="has-background-info">Info</div>Bulma CSSフレームワークを使って背景色をリンク色にするには、has-background-primary クラスを指定する。
<div class="has-background-link">Link</div>Bulma CSSフレームワークを使って背景色を成功色にするには、has-background-primary クラスを指定する。
<div class="has-background-success">Success</div>Bulma CSSフレームワークを使って背景色を警告色にするには、has-background-primary クラスを指定する。
<div class="has-background-warning">Warning</div>Bulma CSSフレームワークを使って背景色を危険色にするには、has-background-primary クラスを指定する。
<div class="has-background-danger">Danger</div>Bulma CSSフレームワークを使って背景色を黒にするには、has-background-primary クラスを指定する。
<div class="has-background-black">Black</div><div class="has-background-black-bis">Black-bis</div><div class="has-background-black-ter">Black-ter</div>Bulma CSSフレームワークを使って背景色を暗くするには、has-background-primary クラスを指定する。
<div class="has-background-dark">Dark</div><div class="has-background-grey">Grey</div><div class="has-background-grey-dark">Grey-dark</div>Bulma CSSフレームワークを使って背景色を灰色にするには、has-background-primary クラスを指定する。
<div class="has-background-grey">Grey</div><div class="has-background-grey-light">Grey-light</div><div class="has-background-grey-lighter">Grey-lighter</div><div class="has-background-light">Light</div><div class="has-background-white-ter">White-ter</div><div class="has-background-white-bis">White-bis</div>Bulma CSSフレームワークを使って背景色を白にするには、has-background-primary クラスを指定する。
<div class="has-background-white">White</div>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><div class="card">
<div class="card-content">カード</div>
</div><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
<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>Bulmaでグリッドレイアウトを実現するには、コンテナとなる要素に columns クラスを指定する。
<div class="columns">
<div class="column has-background-primary">.column</div>
<div class="column has-background-light">.column</div>
</div>コンテナの中に入れる列には column クラスを指定する。幅を表わすクラスを指定しなければ、それぞれの列の幅が均等に割り当てられる。
<div class="columns">
<div class="column has-background-primary">.column</div>
<div class="column has-background-light">.column</div>
<div class="column has-background-primary">.column</div>
</div><div class="columns">
<div class="column is-full has-background-primary">.is-full</div>
</div><div class="columns">
<div class="column is-half has-background-primary">.is-half</div>
<div class="column is-half has-background-light">.is-half</div>
</div><div class="columns">
<div class="column is-one-third has-background-primary">.is-one-third</div>
<div class="column is-two-thirds has-background-light">.is-two-thirds</div>
</div><div class="columns">
<div class="column is-two-thirds has-background-primary">.is-two-thirds</div>
<div class="column is-one-third has-background-light">.is-one-third</div>
</div><div class="columns">
<div class="column is-one-quarter has-background-primary">.is-one-quarter</div>
<div class="column is-three-quarters has-background-light">.is-three-quarters</div>
</div><div class="columns">
<div class="column is-three-quarters has-background-primary">.is-three-quarters</div>
<div class="column is-one-quarter has-background-light">.is-one-quarter</div>
</div><div class="container has-background-primary">
<p>Container</p>
</div/>Container
<div class="container is-fluid has-background-primary">
<p>Fluid container</p>
</div/>Fluid container
<div class="container is-widescreen has-background-primary">
<p>Widescreen container</p>
</div/>Widescreen container
<div class="container is-fullhd has-background-primary">
<p>Full HD container</p>
</div/>Full HD Container
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.
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.
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.
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.
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.
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.
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.
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.
Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを無しにするには、m-0 クラスを指定する。
<div class="m-0 has-background-primary">マージン無し</div>Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを2番目の大きさにするには、m-1 クラスを指定する。
<div class="m-1 has-background-primary">.m-1</div>Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを3番目の大きさにするには、m-2 クラスを指定する。
<div class="m-2 has-background-primary">.m-2</div>Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを4番目の大きさにするには、m-3 クラスを指定する。
<div class="m-3 has-background-primary">.m-3</div>Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを5番目の大きさにするには、m-4 クラスを指定する。
<div class="m-4 has-background-primary">.m-4</div>Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを6番目の大きさにするには、m-5 クラスを指定する。
<div class="m-5 has-background-primary">.m-5</div>Bulma CSSフレームワークでは、マージン（要素間の間隔）のサイズを m-0 から m-6 までの7段階で指定できる。マージンを一番大きくするには、m-6 クラスを指定する。
<div class="m-6 has-background-primary">一番大きいマージン</div>Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。
<div class="mt-0 has-background-primary">.mt-0</div>Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。
<div class="mt-1 has-background-primary">.mt-1</div>Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。
<div class="mt-2 has-background-primary">.mt-2</div>Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。
<div class="mt-3 has-background-primary">.mt-3</div>Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。
<div class="mt-4 has-background-primary">.mt-4</div>Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。
<div class="mt-5 has-background-primary">.mt-5</div>Bulma CSSフレームワークでは、上側のマージンを mt-0 から mt-6 までの7段階で指定できる。
<div class="mt-6 has-background-primary">.mt-6</div>Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。
<div class="mr-0 has-background-primary">.mr-0</div>Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。
<div class="mr-1 has-background-primary">.mr-1</div>Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。
<div class="mr-2 has-background-primary">.mr-2</div>Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。
<div class="mr-3 has-background-primary">.mr-3</div>Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。
<div class="mr-4 has-background-primary">.mr-4</div>Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。
<div class="mr-5 has-background-primary">.mr-5</div>Bulma CSSフレームワークでは、右側のマージンを mr-0 から mr-6 までの7段階で指定できる。
<div class="mr-6 has-background-primary">.mr-6</div>Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。
<div class="mb-0 has-background-primary">.mb-0</div>Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。
<div class="mb-1 has-background-primary">.mb-1</div>Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。
<div class="mb-2 has-background-primary">.mb-2</div>Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。
<div class="mb-3 has-background-primary">.mb-3</div>Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。
<div class="mb-4 has-background-primary">.mb-4</div>Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。
<div class="mb-5 has-background-primary">.mb-5</div>Bulma CSSフレームワークでは、下側のマージンを mb-0 から mb-6 までの7段階で指定できる。
<div class="mb-6 has-background-primary">.mb-6</div>Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。
<div class="ml-0 mt-1 has-background-primary">.ml-0</div>Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。
<div class="ml-1 mt-1 has-background-primary">.ml-1</div>Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。
<div class="ml-2 mt-1 has-background-primary">.ml-2</div>Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。
<div class="ml-3 mt-1 has-background-primary">.ml-3</div>Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。
<div class="ml-4 mt-1 has-background-primary">.ml-4</div>Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。
<div class="ml-5 mt-1 has-background-primary">.ml-5</div>Bulma CSSフレームワークでは、左側のマージンを ml-0 から ml-6 までの7段階で指定できる。
<div class="ml-6 mt-1 has-background-primary">.ml-6</div>Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。
<div class="mx-0 mt-1 has-background-primary">.mx-0</div>Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。
<div class="mx-1 mt-1 has-background-primary">.mx-1</div>Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。
<div class="mx-2 mt-1 has-background-primary">.mx-2</div>Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。
<div class="mx-3 mt-1 has-background-primary">.mx-3</div>Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。
<div class="mx-4 mt-1 has-background-primary">.mx-4</div>Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。
<div class="mx-5 mt-1 has-background-primary">.mx-5</div>Bulma CSSフレームワークでは、左右のマージンを mx-0 から mx-6 までの7段階で指定できる。
<div class="mx-6 mt-1 has-background-primary">.mx-6</div>Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。
<div class="my-0 has-background-primary">.my-0</div>Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。
<div class="my-1 has-background-primary">.my-1</div>Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。
<div class="my-2 has-background-primary">.my-2</div>Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。
<div class="my-3 has-background-primary">.my-3</div>Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。
<div class="my-4 has-background-primary">.my-4</div>Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。
<div class="my-5 has-background-primary">.my-5</div>Bulma CSSフレームワークでは、上下のマージンを my-0 から my-6 までの7段階で指定できる。
<div class="my-6 has-background-primary">.my-6</div><p class="has-text-weight-light">Light</p>Light
<p class="has-text-weight-normal">Normal</p>Normal
<p class="has-text-weight-medium">Medium</p>Medium
<p class="has-text-weight-semibold">Semibold</p>Semibold
<p class="has-text-weight-bold">Bold</p>Bold
<footer class="footer">
<div class="content has-text-centered">
<p>SE学院</p>
</div>
</footer><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>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>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>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>タイトルおよびサブタイトルのフォントサイズは、is-1クラスからis-6クラスまでの6段階で指定できる。ただし、titleクラスまたはsubtitleクラスと併用したときのみ有効である。
| クラス | CSSプロパティ |
|---|---|
| is-1 | font-size: 3rem; |
| is-2 | font-size: 2.5rem; |
| is-3 | font-size: 2rem; |
| is-4 | font-size: 1.5rem; |
| is-5 | font-size: 1.25rem; |
| is-6 | font-size: 1rem; |
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>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>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>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>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>Bulma CSSフレームワークでは、Font Awesome のアイコンを使うことができる。
<span class="icon">
<i class="fas fa-home"></i>
</span><span class="icon-text">
<span class="icon">
<i class="fas fa-home"></i>
</span>
<span>ホーム</span>
</span><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><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>Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。
<div class="p-0 has-background-primary">.p-0</div>Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。
<div class="p-1 has-background-primary">.p-1</div>Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。
<div class="p-2 has-background-primary">.p-2</div>Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。
<div class="p-3 has-background-primary">.p-3</div>Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。
<div class="p-4 has-background-primary">.p-4</div>Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。
<div class="p-5 has-background-primary">.p-5</div>Bulma CSSフレームワークでは、パディングを p-0 から p-6 までの7段階で指定できる。
<div class="p-6 has-background-primary">.p-6</div>Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。
<div class="pt-0 has-background-primary">.pt-0</div>Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。
<div class="pt-1 has-background-primary">.pt-1</div>Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。
<div class="pt-2 has-background-primary">.pt-2</div>Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。
<div class="pt-3 has-background-primary">.pt-3</div>Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。
<div class="pt-4 has-background-primary">.pt-4</div>Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。
<div class="pt-5 has-background-primary">.pt-5</div>Bulma CSSフレームワークでは、上側のパディングを pt-0 から pt-6 までの7段階で指定できる。
<div class="pt-6 has-background-primary">.pt-6</div>Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。
<div class="pr-0 has-background-primary">.pr-0</div>Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。
<div class="pr-1 has-background-primary">.pr-1</div>Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。
<div class="pr-2 has-background-primary">.pr-2</div>Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。
<div class="pr-3 has-background-primary">.pr-3</div>Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。
<div class="pr-4 has-background-primary">.pr-4</div>Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。
<div class="pr-5 has-background-primary">.pr-5</div>Bulma CSSフレームワークでは、下側のパディングを pr-0 から pr-6 までの7段階で指定できる。
<div class="pr-6 has-background-primary">.pr-6</div>Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。
<div class="pb-0 has-background-primary">.pb-0</div>Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。
<div class="pb-1 has-background-primary">.pb-1</div>Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。
<div class="pb-2 has-background-primary">.pb-2</div>Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。
<div class="pb-3 has-background-primary">.pb-3</div>Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。
<div class="pb-4 has-background-primary">.pb-4</div>Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。
<div class="pb-5 has-background-primary">.pb-5</div>Bulma CSSフレームワークでは、下側のパディングを pb-0 から pb-6 までの7段階で指定できる。
<div class="pb-6 has-background-primary">.pb-6</div><div class="pl-0 has-background-primary">.pl-0</div><div class="pl-1 has-background-primary">.pl-1</div><div class="pl-2 has-background-primary">.pl-2</div><div class="pl-3 has-background-primary">.pl-3</div><div class="pl-4 has-background-primary">.pl-4</div><div class="pl-5 has-background-primary">.pl-5</div><div class="pl-6 has-background-primary">.pl-6</div>Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。
<div class="px-0 has-background-primary">.px-0</div>Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。
<div class="px-1 has-background-primary">.px-1</div>Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。
<div class="px-2 has-background-primary">.px-2</div>Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。
<div class="px-3 has-background-primary">.px-3</div>Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。
<div class="px-4 has-background-primary">.px-4</div>Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。
<div class="px-5 has-background-primary">.px-5</div>Bulma CSSフレームワークでは、上下のパディングを px-0 から px-6 までの7段階で指定できる。
<div class="px-6 has-background-primary">.px-6</div>Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。
<div class="py-0 has-background-primary">.py-0</div>Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。
<div class="py-1 has-background-primary">.py-1</div>Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。
<div class="py-2 has-background-primary">.py-2</div>Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。
<div class="py-3 has-background-primary">.py-3</div>Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。
<div class="py-4 has-background-primary">.py-4</div>Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。
<div class="py-5 has-background-primary">.py-5</div>Bulma CSSフレームワークでは、上下のパディングを py-0 から py-6 までの7段階で指定できる。
<div class="py-6 has-background-primary">.py-6</div><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.
Bulma CSSでテキストを左寄せにするには、has-text-centered クラスを指定する。
<p class="has-text-left">左寄せ</p>左寄せ
<p class="has-text-right">右寄せ</p>右寄せ
<p class="has-text-primary">Primary</p>Primary
<p class="has-text-info">Info</p>Info
<p class="has-text-link">Link</p>Link
<p class="has-text-success">Success</p>Success
<p class="has-text-warning">Warning</p>Warning
<p class="has-text-danger">Danger</p>Danger
<p class="has-text-black">Black</p>Black
<p class="has-text-dark">Dark</p>Dark
<p class="has-text-grey-darker">Grey-darker</p>Grey-darker
<p class="has-text-grey-dark">Grey-dark</p>Grey-dark
<p class="has-text-grey">Grey</p>Grey
<p class="has-text-grey-light has-background-black">Grey-light</p>Grey-light
<p class="has-text-grey-lighter has-background-black">Grey-lighter</p>Grey-lighter
<p class="has-text-light has-background-black">Light</p>Light
<p class="has-text-white has-background-black">White</p>White
<section class="section has-background-primary">
<p>Section</p>
</section>Section
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 |
<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 | ゆうちょ銀行 |
<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 クラスを指定すると、マウスカーソルを乗せた行の色が変わるようになる。
<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 | ゆうちょ銀行 |
<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 | ゆうちょ銀行 |
<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 クラスを指定すると、その行の色が変わる。
<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 | ゆうちょ銀行 |
<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>Thomas, Jeremy. (2021) Documentation | Bulma