Bulma チートシート [CSSフレームワーク ブルマ]

CSSフレームワーク Bulma チートシート

目次

CSSフレームワークのBulmaとは

Bulmaは、オープンソースで開発されている無料のCSSフレームワークです。

レスポンシブWebインターフェイスを構築するために簡単に組み合わせることができ、すぐに使用できるフロントエンドコンポーネントを提供するモバイルファーストのフレームワークです。

BulmaではJavaScriptは使用されておらず、プレーンなCSSフレームワークになっています。

Bulmaの導入

Bulmaの導入は非常に簡単です。

CDNを利用してBulmaのスタイルを参照すれば、すぐに利用することができます。

CDNの利用

linkタグでhref属性にCDNのパスを指定します。

HTMLファイルに記述する場合は、以下のようになります。

まず、HTML5 DOCTYPEの宣言を行います。
headタグ内には、文字エンコーディングとviewportを指定し、Bulmaのスタイルを参照します。
Bulmaではアイコンの表示にFont Awesomeを使用できますので、Bulmaのスタイルと一緒にFont Awesomeのスタイルも参照しておきます。

上記のHTMLテンプレートをコピー&ペーストすれば、すぐにBulmaの動作を確認することができます。

CSSインポート(@import)

Bulmaのスタイルは別のCSSファイルから参照(インポート)することもできます。
CSS @importでインポートする場合は、次のようになります。

Bulmaの導入の詳細については、以下の記事もご覧ください。

CSSフレームワーク Bulmaを導入(インストール・CDNから参照)する
CSSフレームワークのBulmaを使うと、レイアウトやエレメント、フォーム要素などのスタイルを簡単に設定できます。また、Bulmaは...

クラスの別スタイルの指定

Bulmaでは、様々なクラスに色やサイズなどの別のスタイルが用意されています。それらはis-またはhas-で始まるルールで作成されています。

レスポンシブデザインのブレークポイント

Bulmaではviewportのサイズ(列幅)ごとにブレークポイントが設定されています。
ブレークポイントには以下の5つがあります。

ブレークポイント サイズ
モバイル(Mobile) ~ 768px
タブレット(Tablet) 769px ~ 1023px
デスクトップ(Desktop) 1024px ~ 1215px
ワイドスクリーン(Widescreen) 1216px ~ 1407px
フルHD(FullHD) 1408px ~

これらのブレークポイントは、画面のサイズによってレイアウトを変更する際に利用されます。

Title

titleクラスは、サイトのメインタイトルに使えます。

Bulmaチートシートtitleクラスサンプル

Subtitle

subtitleクラスは、サイトのサブタイトルに使えます。

Bulmaチートシートsubtitleクラスサンプル

Bulmaの見出し(表題と副題)Title Subtitle [CSSフレームワーク]
Webページでは、見出し(タイトル)は欠かせないものです。 見出しはページを見やすく飾ります。 Bulmaには見出しをス...

Container

containerクラスは、要素を横(水平)方向の中央に配置するコンテナです。

Bulmaチートシートcontainerクラスサンプル

コンテナ内の要素の幅は、画面の横幅によって変化します。

containerクラスは、viewport(ビューポート)の幅に応じて要素の幅を変化させるどうかを指定するクラスを追加することもできます。

viewportの幅に応じた幅の指定は、以下のクラスで行います。

is-widescreen
is-fullhd
is-max-desktop
is-max-widescreen

また、左右に32pxの余白を保って常に全幅(Full width)にするクラスの

is-fluid

も用意されています。

viewportによって幅を指定するクラスの一覧

クラス ~ 1023px 1024px ~ 1215px
(Desktop)
1216px ~ 1407px
(Widescreen)
1408px ~
(FullHD)
containerのみ 全幅 960px 1152px 1344px
container + is-widescreen 全幅 1152px 1344px
container + is-fullhd 全幅 1344px
container + is-max-desktop 全幅 960px
container + is-max-widescreen 全幅 960px 1152px
container + is-fluid 常に32pxの余白を設けて全幅

viewportによる表示の違い

~ 1023px

Bulmaチートシートcontainerクラスサンプル

1024px ~ 1215px (Desktop)

Bulmaチートシートcontainerクラスサンプル

1216px ~ 1407px (Widescreen)

Bulmaチートシートcontainerクラスサンプル

1408px ~ (FullHD)

Bulmaチートシートcontainerクラスサンプル

Bulmaのコンテナ Container [CSSフレームワーク]
Webページでは、水平方向に左寄せではなく、中央に要素(ブロック)を配置したい場合があります。 Bulmaには、水平方向の中央...

Hero

heroクラスは、全幅(最大幅)のバナーを作成します。
heroクラスを指定要素の子要素にhero-bodyクラスを指定した要素を配置し、その中にコンテンツの要素を配置します。

Bulmaチートシートheroクラスサンプル

Bulmaのヒーローバナー Hero Banner(Header) [CSSフレームワーク]
Webページをデザインしていると、横幅いっぱいに広がったバナーを配置したい時があります。 Bulmaには、このようなバナーを配...

Section

sectionクラスは、ページをセクションに分割する要素に指定します。

Bulmaチートシートsectionクラスサンプル

sectionには、is-mediumis-largeクラスを指定することで、高さを広げることができます。

Bulmaチートシートsectionクラスサンプル

Bulmaチートシートsectionクラスサンプル

Bulmaのセクション Section [CSSフレームワーク]
Webページでは、ページ内の一定の範囲を見出し(h1~h6)ごとや、何らかの区切り、かたまりなどで分けます。 これをセクションと言...

Footer

footerクラスは、フッター(ページの最後に配置する要素)に指定します。
footerクラスを指定した要素には、適度な下の余白が設定されます。

Bulmaチートシートfooterクラスサンプル

Bulmaのフッター Footer [CSSフレームワーク]
Webページでは、ヘッダーと共にフッターを設けるのが一般的です。 Bulmaにはフッターを配置するためのクラスが用意されていま...

Content

contentクラスは、ドキュメントのレイアウトを整えてくれます。
contentクラスを指定した要素内に配置した

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<a>
<p>
<sup>
<sub>
<blockquote>
<pre>
<ul>
<ol>
<li>
<dl>
<dt>
<dd>
<table>
<tr>
<th>
<td>
<figure>
<figcaption>

の各要素のスタイルが設定されます。

Bulmaチートシートcontentクラスサンプル

Bulmaのコンテンツ Content [CSSフレームワーク]
Bulmaには、テキストを記述する際のコンテナとなるクラスが用意されています。 Bulmaを適用(参照)したページでは、ヘッデ...

Columns

columnsクラスは、横(水平)方向に分割したカラムレイアウトを作成します。
columnsクラスをコンテナ要素に指定して、子要素にcolumnクラスを指定します。

ここでは、columnクラスを指定した要素を3つ配置して3列に分割しています。

Bulmaチートシートcolumnsクラスサンプル

columnクラスで分割した要素(列)は、すべて同じ幅になります。

Bulmaのグリッドシステム(columns)の基礎 [CSSフレームワーク]
CSSフレームワークのBulmaにはBootstrapと同様に、要素をグリッドのように格子状に配置するための仕組みが用意されています...

サイズ(列幅)の指定

列幅を割合で指定

columnクラスを指定した要素(列)は、割合を表すクラスを指定することで幅を設定することができます。

columnで指定できる幅を割合で指定するクラス

クラス名 サイズ(幅) 割合(%)
is-full 1分の1(1/1)全部 100%
is-four-fifths 5分の4(4/5) 80%
is-three-quarters 4分の3(3/4) 75%
is-two-thirds 3分の2(2/3) 66.60%
is-three-fifths 5分の3(3/5) 60%
is-half 2分の1(1/2)半分 50%
is-two-fifths 5分の2(2/5) 40%
is-one-third 3分の1(1/3) 33.30%
is-one-quarter 4分の1(1/4) 25%
is-one-fifth 5分の1(1/5) 20%

例えば、is-halfを指した場合は、以下のようになります。

Bulmaチートシートcolumnsクラスサンプル

幅を指定していない残りの列は余った幅で等幅で配置されます。
上記の例では、is-halfを指定しているので残りの50%の幅を2列で分けるので、25%ずつの幅になります。

列の幅を割合で指定するクラスの実行結果

Bulmaチートシートcolumnsクラスサンプル

列幅をサイズを表す数値(列数)で指定

columnクラスを指定した要素(列)の幅は、数値で指定することもできます。

columnで指定できる幅をサイズを表す数値で指定するクラス

クラス サイズ(幅) 割合(%)
is-1 12分の1(1/12) 8.3%
is-2 6分の1(1/6) 16.6%
is-3 4分の1(1/4) 25%
is-4 3分の1(1/3) 33.3%
is-5 12分の5(5/12) 41.6%
is-6 2分の1(1/2)半分 50%
is-7 12分の7(7/12) 58.3%
is-8 3分の2(2/3) 66.6%
is-9 4分の3(3/4) 75%
is-10 6分の5(5/6) 83.3%
is-11 12分の11(11/12) 91.6%
is-12 1分の1(1/1)全部 100%

列幅は12列を最大として、1~12の範囲で指定します。

列の幅をサイズを表す数値で指定するクラスの実行結果

Bulmaチートシートcolumnsクラスサンプル

余白の指定

columnsクラスを指定した列の配置では、余白を指定することができます。
余白はis-offset-列幅の割合、またはis-offset-列幅を表す数値(列数)で指定します。

Bulmaチートシートcolumnsクラスサンプル

Bulmaのグリッドシステム(columns)列のサイズ指定 [CSSフレームワーク]
前回に引き続き、CSSフレームワークのBulmaを使ったグリッドシステムの使い方について記載します。 前回は、Bulmaのco...

viewportの幅による列の改行指定

columnsクラスとcolumnクラスを使用したBulmaのカラムシステムでは、画面の横幅が狭くなると自動で改行(折り返し)されます。

Bulmaチートシートcolumnsクラスサンプル
Bulmaのブレークポイントには

  • モバイル(Mobile)
  • タブレット(Tablet)
  • デスクトップ(Desktop)
  • ワイドスクリーン(Widescreen)
  • フルHD(FullHD)

の5種類ありますが、デフォルトではタブレット以上で列が横向きに表示され、モバイル以下で縦向きに表示されます。

画面の横幅が狭くなりモバイルサイズになった場合でも列を横向きに表示したい場合は、is-mobileクラスを指定します。

Bulmaチートシートcolumnsクラスサンプル

幅が狭い時とは逆にブレークポイントがデスクトップ以上になった場合に、列を横向きに表示することもできます。

Bulmaチートシートcolumnsクラスサンプル

ブレークポイントごとに異なる列のサイズを指定

viewportのサイズごとに列サイズを指定することもできます。

例えば、モバイル時は10列分、タブレット時は9列分、デスクトップ時は8列分、ワイドスクリーン時は7列分、フルHD時は6列分にする場合は、以下のようになります。

モバイル

Bulmaチートシートcolumnsクラスサンプル

タブレット

Bulmaチートシートcolumnsクラスサンプル

デスクトップ

Bulmaチートシートcolumnsクラスサンプル

ワイドスクリーン

Bulmaチートシートcolumnsクラスサンプル

フルHD

Bulmaチートシートcolumnsクラスサンプル

Bulmaのグリッドシステム(columns)をレスポンシブWebデザインに対応させる [CSSフレームワーク]
CSSフレームワークのBulmaには、Bootstrapのグリッドシステムと同じように、コンテンツを網目状の升目に配置して、Webサ...

列(カラム)の余白

columnsクラスとcolumnクラスを使用したBulmaのカラムシステム列のには、0.75remの余白(padding)が設定されています。

Bulmaチートシートcolumnsクラスサンプル

この余白(Gap: ギャップ)は変更することができます。
余白をなくしたい場合はis-gaplessクラスを指定します。

Bulmaチートシートcolumnsクラスサンプル

余白のサイズを指定する場合は、is-0is-8のサイズを表すクラスを指定します。

クラス サイズ
is-0 0
is-1 0.25rem
is-2 0.5rem
is-3 0.75rem
is-4 1rem
is-5 1.25rem
is-6 1.5rem
is-7 1.75rem
is-8 2rem

余白のサイズを指定する場合は、is-variableを同時に追加する必要があります。

Bulmaチートシートcolumnsクラスサンプル

余白はブレークポイントごとに指定することもできます。

例えば、モバイル時は1、タブレット時は3、デスクトップ時は5、ワイドスクリーン時は7にする場合は、以下のようになります。

モバイル

Bulmaチートシートcolumnsクラスサンプル

タブレット

Bulmaチートシートcolumnsクラスサンプル

デスクトップ

Bulmaチートシートcolumnsクラスサンプル

ワイドスクリーン

Bulmaチートシートcolumnsクラスサンプル

Bulmaのグリッドシステム(columns)の列(column)の余白(Gap)を設定する [CSSフレームワーク]
CSSフレームワークのBulmaには、HTMLの要素をグリッド状に配置するためのクラスが用意されています。 Bulmaでグリッ...

複数行(マルチライン)

is-multilineクラスを指定することで、複数行に改行して表示することができます。

Bulmaチートシートcolumnsクラスサンプル

Bulmaのカラムシステムには、その他のオプションも用意されています。

Bulmaのグリッドシステム(columns)のオプション [CSSフレームワーク]
CSSフレームワークのBulmaには、Bootstrapのグリッドシステムと同じように、コンテンツを網目状の升目に配置して、Webサ...

フォームコントロール

Bulmaにはフォームコントロールに指定できるクラスとして

button
label
input
textarea
select
checkbox
radio
file
help

が用意されています。

フォームコントロールはfieldクラスでフィールドコンテナを作成し、controlクラスでコントロールコンテナを作成します。

Bulmaチートシートフォームコントロールのサンプル

フォームグループ

fieldクラスを指定したコンテナ要素にis-groupedクラスを指定することで、フォームをグルーピング(グループ化)することができます。

Bulmaチートシートフォームグループのサンプル

fieldクラスを指定したコンテナ要素には、has-addonsクラスを指定して、次のようにグルーピングすることもできます。

Bulmaチートシートフォームグループのサンプル

フォームグループのコントロールは、is-grouped-centeredクラスで中央寄せで配置、is-grouped-rightクラス右寄せで配置することができます。

Bulmaチートシートフォームグループのサンプル

controlクラスを指定下コンテナ要素にis-expandedクラスを指定すると、余白を埋めてサイズを拡張することができます。

Bulmaチートシートフォームグループのサンプル

Horizontal form(水平配置したフォーム)

fieldクラスを指定したコンテナ要素にis-horizontalすることで、ラベルとコントロールを水平に配置することができます。
ラベル側にはfield-labelクラスを指定し、コントロール側にはfield-bodyクラスを指定します。

Eメールテキストボックスのラベルのis-normalクラスは、ラベルの位置(垂直配置)を調整するために指定しています。

Bulmaチートシートフォームグループのサンプル

Bulmaのフォーム Form [CSSフレームワーク]
ユーザーの入力を受け付けるフォーム(Form)は、デザインによってその操作性は大きく異なってきます。 文字の大きさの調整や、適度な...
Bulmaのフォームフィールド Field [CSSフレームワーク]
ユーザーに情報の入力を求めるWebサイト(ページ)や、Webシステムでは、データを入力するためのフォーム(form)を配置します。 ...
Bulmaのフォームコントロール Control [CSSフレームワーク]
BulmaではWebページの入力フォーム(Form)にテキストボックスなどの要素を配置する際に、要素をラップするブロックコンテナを配...

Button

buttonクラスは

<button>
<a>
<input type=”submit”>
<input type=”reset”>

の各要素に指定することでボタンになります。

Bulmaチートシートbuttonクラスサンプル

ボタンのカラー(色)

ボタンの色は、Bulmaに用意されている色をis-*の形式で変更することができます。

Bulmaチートシートbuttonクラスサンプル

ボタンのサイズ(大きさ)

ボタンのサイズには、Small、Normal、Medium、Largeを指定することができます。

Bulmaチートシートbuttonクラスサンプル

ボタンのサイズはbuttonsクラスで囲って一括で指定することもできます。

Bulmaチートシートbuttonクラスサンプル

一括で指定する際は、arr-*の形式で指定します。

ボタンの横幅は、is-fullwidthクラスで横幅一杯に広げることもできます。

Bulmaチートシートbuttonクラスサンプル

ボタンのスタイル

is-outlinedクラス、is-invertedクラス、is-roundedクラスでボタンのスタイルが変更できます。

Bulmaチートシートbuttonクラスサンプル

is-invertedクラスは、デフォルト状態のボタンには適用されません。

ボタンの状態

is-hoveredクラス、is-focusedクラス、is-activeクラス、is-loadingクラスを指定することでボタンの状態を変更することができます。

Bulmaチートシートbuttonクラスサンプル

スタティック(静的)ボタン(テキストラベル)

is-staticクラスを指定することで、静的なスタティックボタンにすることができます。

Bulmaチートシートbuttonクラスサンプル

is-staticクラスを指定したボタンはクリックできなくなります。

Disabled(無効)

disabled属性を指定すると以下のようになります。

Bulmaチートシートbuttonクラスサンプル

アイコン付きボタン

ボタンにはアイコンを設定することができます。アイコンにはFont Awesomeのアイコンフォントが使用できます。

Bulmaチートシートbuttonクラスサンプル

ボタンのグルーピング(グループ化)

fieldクラスとis-grouped、またはhas-addonsクラスを使用することで、ボタンをグルーピングすることができます。

Bulmaチートシートbuttonクラスサンプル

Bulmaのボタン Button [CSSフレームワーク]
Webフォームのデザインでは、ボタンは欠かせない要素です。 ユーザーに何らかの動作を確定、またはキャンセルさせるためにはボタン...

Input

inputクラスは

<input type=”text”>
<input type=”email”>
<input type=”tel”>
<input type=”password”>

の各テキスト入力欄のボックス(input要素)に指定します。

Bulmaチートシートinputクラスサンプル

テキストボックスのカラー(色)

テキストボックスの色は、Bulmaに用意されている色をis-*の形式で変更することができます。

Bulmaチートシートinputクラスサンプル

テキストボックスのサイズ(大きさ)

テキストボックスのサイズには、Small、Normal、Medium、Largeを指定することができます。

Bulmaチートシートinputクラスサンプル

テキストボックスのスタイル

is-roundedクラスで入力欄のスタイルが変更できます。

Bulmaチートシートinputクラスサンプル

テキストボックスの状態

is-hoveredクラス、is-focusedクラス、is-loadingクラスを指定することで入力欄の状態を変更することができます。

Bulmaチートシートinputクラスサンプル

Disabled(無効)とReadonly(読み取り専用)

disabled属性、readonly属性を指定すると以下のようになります。

Bulmaチートシートinputクラスサンプル

アイコン付きテキストボックス

入力欄にはアイコンを設定することができます。アイコンにはFont Awesomeのアイコンフォントが使用できます。

Bulmaチートシートinputクラスサンプル

Bulmaのテキストボックス(入力欄) Input [CSSフレームワーク]
ユーザーの入力を受け付けるWebサイトやWebシステムでは、HTMLのフォームを配置します。 フォームに配置されるコントロール...

Textarea

textareaクラスは、複数行入力できるテキストボックスの<textarea>要素に指定します。

Bulmaチートシートtextareaクラスのサンプル

テキストエリアのカラー(色)

テキストエリアの色は、Bulmaに用意されている色をis-*の形式で変更することができます。

Bulmaチートシートtextareaクラスのサンプル

テキストエリアのサイズ(大きさ)

テキストエリアのサイズには、Small、Medium、Largeを指定することができます。

Bulmaチートシートtextareaクラスのサンプル

has-fixed-sizeクラスを指定することで、テキストエリアのサイズを固定することができます。

Bulmaチートシートtextareaクラスのサンプル

テキストエリアの状態

is-hoveredクラス、is-focusedクラス、is-loadingクラスを指定することでテキストエリアの状態を変更することができます。

Bulmaチートシートtextareaクラスのサンプル

Disabled(無効)とReadonly(読み取り専用)

disabled属性、readonly属性を指定すると以下のようになります。

Bulmaチートシートtextareaクラスのサンプル

Bulmaのテキストエリアボックス Textarea [CSSフレームワーク]
前回の記事では、テキストボックス(input要素)のスタイルを設定するinputクラスをご紹介しました。 input要...

Select

selectクラスは、リストから項目を選択するセレクトボックスのselect要素のコンテナに指定します。

Bulmaチートシートselectクラスのサンプル

multiple属性を付けた複数行選択(マルチセレクト)形式のリストボックスには、is-multipleクラスを指定します。

Bulmaチートシートselectクラスのサンプル

セレクトボックスのカラー(色)

セレクトボックスの色は、Bulmaに用意されている色をis-*の形式で変更することができます。

セレクトボックスのサイズ(大きさ)

セレクトボックスのサイズには、Small、Normal、Medium、Largeを指定することができます。

Bulmaチートシートselectクラスのサンプル

セレクトボックスのスタイル

is-roundedクラスで入力欄のスタイルが変更できます。

Bulmaチートシートselectクラスのサンプル

セレクトボックスの状態

is-hoveredクラス、is-focusedクラス、is-loadingクラスを指定することで入力欄の状態を変更することができます。

Bulmaチートシートselectクラスのサンプル

アイコン付きセレクトボックス

セレクトボックスにはアイコンを設定することができます。アイコンにはFont Awesomeのアイコンフォントが使用できます。

Bulmaチートシートselectクラスのサンプル

Bulmaのセレクトボックス Select [CSSフレームワーク]
WebサイトやWebシステムのフォームでは、ドロップダウンリストから項目を選択するselect要素が頻繁に使用されます。 Bu...

Checkbox

checkboxクラスは、<input type=”checkbox”>要素に指定します。

Bulmaチートシートcheckboxクラスのサンプル

Disabled(無効)

disabled属性を指定すると以下のようになります。

Bulmaチートシートcheckboxクラスのサンプル

Bulmaのチェックボックス Checkbox [CSSフレームワーク]
Webの入力フォームでは、ユーザーに是か非かの2択の選択肢を選んでもらうことがよくあります。 例えば、規約に同意するかどうかを...

Radio

radioクラスは、<input type=”radio”>要素に指定します。

Bulmaチートシートradioクラスのサンプル

Disabled(無効)

disabled属性を指定すると以下のようになります。

Bulmaチートシートradioクラスのサンプル

Bulmaのラジオボタン Radio button [CSSフレームワーク]
Webの入力フォームでは、ユーザーに選択式の項目を配置することがよくあります。 例えば、性別を選択するものや、支払い方法を選択...

File upload

fileクラスは、ファイル選択ボタンの<input type=”file”>要素のコンテナに指定します。
ファイル選択ボタンのラベルにはfile-labelクラスを指定します。
ファイル選択ボタンにはfile-inputクラスを指定します。

Bulmaチートシートfileクラスのサンプル

ファイル名の表示

ファイル名を表示する場合は、has-nameクラスを指定します。

Bulmaチートシートfileクラスのサンプル

ファイル選択ボタンの配置

is-centeredクラス、is-rightクラスで、中央揃え、右揃えにすることができます。

Bulmaチートシートfileクラスのサンプル

is-rightクラスを指定すると、ボタンが右側に配置されます。

ボックス化

is-boxedクラスを指定すると、ボックス化することができます。

Bulmaチートシートfileクラスのサンプル

ファイル選択ボタンのカラー(色)

ファイル選択ボタンの色は、Bulmaに用意されている色をis-*の形式で変更することができます。

Bulmaチートシートfileクラスのサンプル

ファイル選択ボタンのサイズ(大きさ)

ファイル選択ボタンのサイズには、Small、Normal、Medium、Largeを指定することができます。

Bulmaチートシートfileクラスのサンプル

is-fullwidthクラスを指定して全幅(横幅一杯)にすることもできます。

Bulmaチートシートfileクラスのサンプル

Bulmaのファイル選択ボタン File upload [CSSフレームワーク]
Webシステムでは、CSVファイルやエクセルファイルなどのデータファイルをサーバーにアップロードする機能を実装する場合があります。 ...

Table

tableクラスは、table要素に指定します。

Bulmaチートシートtableクラスのサンプル

is-stripedクラスを指定すると、ストライプ(縞模様)になります。

Bulmaチートシートtableクラスのサンプル

is-hoverableクラスを指定すると、マウスホバーで行選択のエフェクトが表示されます。

Bulmaチートシートtableクラスのサンプル

is-narrowクラスを指定すると、行の高さが狭くなります。

Bulmaチートシートtableクラスのサンプル

is-fullwidthクラスを指定すると、テーブルの幅が全幅(横幅が100%)になります。

Bulmaチートシートtableクラスのサンプル

テーブルにボーダー(罫線)を付ける場合は、is-borderedクラスを指定します。

Bulmaチートシートtableクラスのサンプル

テーブルのサイズ(横幅)が大きい場合は、table-containerクラスを指定したコンテナ要素でテーブルを囲むことでスクロールバーを表示することができます。

Bulmaチートシートtableクラスのサンプル

is-selectedクラスを使用すると、テーブルの行を選択して背景色を変えることができます。
is-selectedクラスは、選択する行の<tr>要素に指定します。

Bulmaチートシートtableクラスのサンプル

Bulmaのテーブル(表) Table [CSSフレームワーク]
テーブル(table)を使用したリストは、WebサイトやWebシステムのあらゆる場面で活躍します。 データを表形式で表示するこ...

Block

blockクラスは、コンテンツをブロックに分ける(区切る)際に指定します。
blockクラスを指定することで、ブロック間に適切な余白が設定されます。

Bulmaチートシートblockクラスのサンプル

Bulmaのブロック Block [CSSフレームワーク]
Webページをレイアウトしていると、適度なスペース(マージン)を確保した領域を配置したい場合があります。 Bulmaには、コン...

Box

boxクラスは、コンテンツをボックスで囲む時に使用します。

Bulmaチートシートboxクラスのサンプル

Bulmaのボックス Box [CSSフレームワーク]
Webページをレイアウトしていると、いくつかの要素の集まりを1つのボックスにまとめて配置したい場合があります。 Bulmaには...

Delete

deleteクラスは、閉じるボタンや削除ボタンに使用できます。

Bulmaチートシートdeleteクラスのサンプル

ボタンのサイズ(大きさ)

ボタンのサイズには、Small、Medium、Largeを指定することができます。

Bulmaチートシートdeleteクラスのサンプル

Bulmaのデリートボタン Delete [CSSフレームワーク]
WebページやWebシステムでは、しばしばメッセージボックスやモーダルダイアログボックスなどのユーザー対話型のUIを実装することがあ...

Icon

iconクラスは、アイコンフォントのコンテナです。

Bulmaチートシートiconクラスのサンプル

Bulmaのアイコン Icon [CSSフレームワーク]
Webページでは、アイコンを配置してデザインに変化を付けたり、ユーザーに分かりやすく内容を伝えたい場合があります。 Bulma...

Image

imageクラスは、画像(img要素)のコンテナです。

Bulmaチートシートimageクラスのサンプル

is-roundedクラスを指定して、画像を円形に切り抜くこともできます。

Bulmaチートシートimageクラスのサンプル

Bulmaのイメージ Image [CSSフレームワーク]
Webページにサイズの大きい画像を配置した際、画像の読み込みに時間がかかってしまう場合やまったく読み込まれない場合があります。 ...

Notification

notificationクラスは、通知ボックス(ブロック)を表示します。

Bulmaチートシートnotificationクラスのサンプル

通知ボックスのカラー(色)

通知ボックスの色は、Bulmaに用意されている色をis-*の形式で変更することができます。

Bulmaチートシートnotificationクラスのサンプル
Bulmaチートシートnotificationクラスのサンプル

Bulmaの通知メッセージボックス Notification [CSSフレームワーク]
Webページでは、何かの情報をユーザーに通知したり、警告したりすることがよくあります。 例えば、不正な値が入力された時の警告や...

Progress bars

progressクラスは、プログレスバー(進捗バー)を表示します。

Bulmaチートシートprogressクラスのサンプル

プログレスバーは、value属性を省略すると、マーキースタイルになります。

Bulmaチートシートprogressクラスのサンプル

プログレスバーのカラー(色)

プログレスバーの色は、Bulmaに用意されている色をis-*の形式で変更することができます。

Bulmaチートシートprogressクラスのサンプル

プログレスバーのサイズ(大きさ)

プログレスバーのサイズには、Small、Medium、Largeを指定することができます。

Bulmaチートシートprogressクラスのサンプル

Bulmaのプログレスバー(進捗バー) Progress Bar [CSSフレームワーク]
時間のかかる処理を行う際には、処理の進捗を表すプログレスバーを使用することで、ユーザーエクスペリエンスが向上します。 Bulm...

Tag

tagクラスは、タグラベル(バッジ)を作成する際に使用します。

Bulmaチートシートtagクラスのサンプル

タグのカラー(色)

タグの色は、Bulmaに用意されている色をis-*の形式で変更することができます。

Bulmaチートシートtagクラスのサンプル

タグのサイズ(大きさ)

タグのサイズには、Small、Medium、Largeを指定することができます。

Bulmaチートシートtagクラスのサンプル

タグのサイズはtagsクラスで囲って一括で指定することもできます。

Bulmaチートシートtagクラスのサンプル

一括で指定する際は、arr-*の形式で指定します。

タグのスタイル

is-roundedクラスを指定すると、丸いタグにすることができます。

Bulmaチートシートtagクラスのサンプル

is-deleteクラスを指定すると、×タグにすることができます。

Bulmaチートシートtagクラスのサンプル

Bulmaのタグラベル(バッジ)Tag [CSSフレームワーク]
Bulmaには、他のCSSフレームワークでバッジと呼ばれている小さな部品のタグラベルが用意されています。 タグラベル(バッジ)...

Breadcrumb

breadcrumbクラスは、パンくずリストを配置する際に使用します。

Bulmaチートシートbreadcrumbクラスのサンプル

パンくずリストの区切り文字(セパレーター)は、デフォルトでは「/」ですが

has-arrow-separatorクラス
has-bullet-separatorクラス
has-dot-separatorクラス
has-succeeds-separatorクラス

で変更することができます。

Bulmaチートシートbreadcrumbクラスのサンプル

パンくずリストの配置

is-centeredクラス、is-rightクラスで、中央揃え、右揃えにすることができます。

Bulmaチートシートbreadcrumbクラスのサンプル

パンくずリストのサイズ(大きさ)

セレクトボックスのサイズには、Small、Medium、Largeを指定することができます。

Bulmaチートシートbreadcrumbクラスのサンプル

Bulmaのパンくずリスト Breadcrumb [CSSフレームワーク]
Webサイトでは、現在表示されているページがどの階層にいるのかを示す「パンくずリスト」がよく利用されます。 Bulma...

Card

cardクラスは、カード型のUIを作成する際に使用できます。
カードにはヘッダー、イメージ、コンテンツ、フッターを配置することができます。
ヘッダーは、card-headerクラスで配置します。
イメージは、card-imageクラスで配置します。
コンテンツは、card-contentクラスで配置します。
フッターは、card-footerクラスで配置します。

Bulmaチートシートcardクラスのサンプル

Bulmaのカード Card [CSSフレームワーク]
Webサイトでは、商品紹介ページやダッシュボードのアイテムなど、いろいろな場面でカード型のUIを使用することがあります。 Bu...

Dropdown

dropdownクラスは、ドロップダウンメニューを作成する際に使用します。
dropdownクラスは、ドロップダウンメニューのメインコンテナになります。
ドロップダウンメニューを構成するクラスには

dropdown-trigger
dropdown-menu
dropdown-content
dropdown-item
dropdown-divider

があります。

Bulmaチートシートdropdownクラスのサンプル

ドロップダウンリストを展開するには、dropdownクラスを指定した要素にis-activeクラスを指定します。
ドロップダウンリストのアイテムを選択する際は、dropdown-itemクラスを指定した要素にis-activeクラスを指定します。

Bulmaのドロップダウンメニュー Dropdown [CSSフレームワーク]
Webページでは、ヘッダーやサイドバーにドロップダウンメニューを配置することがあります。 ドロップダウンメニューは、メニュバーのサ...

Menu

menuクラスは、縦(垂直方向)に並んだメニューを配置する際に使用します。

Bulmaチートシートmenuクラスのサンプル

メニューアイテムを選択する際は、a要素にis-activeクラスを指定します。

Bulmaの垂直ナビゲーションメニュー Menu [CSSフレームワーク]
Webページでは、サイドバーにナビゲーションのメニューを配置する場合があります。 Bulmaには、垂直のナビゲーションメニュー...

Message

messageクラスを使用すれば、メッセージブロック(ボックス)を表示することができます。

Bulmaチートシートmessageクラスのサンプル

メッセージブロックは、ヘッダーなしの本文のみで表示することもできます。

Bulmaチートシートmessageクラスのサンプル

メッセージブロックのカラー(色)

メッセージブロックの色は、Bulmaに用意されている色をis-*の形式で変更することができます。

Bulmaチートシートmessageクラスのサンプル
Bulmaチートシートmessageクラスのサンプル

メッセージブロックのサイズ(大きさ)

メッセージブロックのサイズには、Small、Medium、Largeを指定することができます。

Bulmaチートシートmessageクラスのサンプル

Bulmaのメッセージブロック(メッセージボックス) Message [CSSフレームワーク]
Webシステムでは、様々な場面でユーザーにメッセージを表示します。 ユーザーの操作に対して、情報や警告、またはエラーなど、メッセー...

Modal

modalクラスを使用すると、様々なモーダルウィンドウを表示できます。
モーダルを表示するためのクラスには

modal-background
modal-content
modal-close
modal-card
modal-card-head
modal-card-title
modal-card-body
modal-card-foot

があります。

Bulmaチートシートmodalクラスのサンプル

Bulmaのモーダルウィンドウ Modal [CSSフレームワーク]
Webページでは、特定の要素を表示している状態から、ユーザーの承認操作、またはキャンセル操作を受け付けるまで、他の操作を受け付けなく...

モーダルを表示する際には、modalクラスを指定している要素にis-activeクラスを指定します。

Navbar

navbarクラスは、ナビゲーションバーのメインコンテナクラスです。
ナビゲーションバーを構成するクラスには、以下のものがあります。

navbar-brand
navbar-burger
navbar-menu
navbar-start
navbar-end
navbar-item
navbar-link
navbar-dropdown
navbar-divider

Bulmaチートシートnavbarクラスのサンプル

Bulmaチートシートnavbarクラスのサンプル

Bulmaのナビゲーションバー Navbar [CSSフレームワーク]
WebアプリケーションやWebシステムでは、ページの上部や下部にナビゲーションバーを配置して、ユーザーの操作性を向上させます。 ...

Pagination

paginationクラスを使用すると、ページネーションを配置できます。
ページネーションに使用するクラスには

pagination-previous
pagination-next
pagination-list
pagination-link
pagination-ellipsis

が用意されています。

Bulmaチートシートpaginationクラスのサンプル

現在のカレントページを表すには、pagination-linkクラスを指定したページボタンの要素にis-currentクラスを指定します。

Bulmaのページネーション Pagination [CSSフレームワーク]
Webページでは、table要素などを使用してデータを表形式のリストで表示することがあります。 表示するデータ(行)の件数が少なけ...

Panel

panelクラスは、を使用すると、パネルが作成できます。
パネルを構成するクラスには

panel-heading
panel-tabs
panel-block

が用意されています。

Bulmaチートシートpanelクラスのサンプル

タブを選択する状態にする際は、panel-tabsクラスの子要素のa要素にis-activeクラスを指定します。
ブロックを選択する状態にする際は、panel-blockクラスを指定した要素にis-activeクラスを指定します。

パネルのカラー(色)

パネルの色は、Bulmaに用意されている色をis-*の形式で変更することができます。

Bulmaチートシートpanelクラスのサンプル

Bulmaのパネル Panel [CSSフレームワーク]
WebサイトやWebシステムでは、検索可能なメニューを配置したい場合があります。 トップに検索用のテキストを入力するボックスがあり...

Tabs

tabsクラスを使用すると、タブ(ナビゲーション)を配置することができます。

Bulmaチートシートtabsクラスのサンプル

タブの配置

is-centeredクラス、is-rightクラスで、中央揃え、右揃えにすることができます。

Bulmaチートシートtabsクラスのサンプル

タブのサイズ(大きさ)

タブのサイズには、Small、Medium、Largeを指定することができます。

Bulmaチートシートtabsクラスのサンプル

is-fullwidthクラスを指定すると全幅(横幅100%)のタブになります。

Bulmaチートシートtabsクラスのサンプル

タブのスタイル

is-boxedクラスを指定すると、クラシックなスタイルになります。

Bulmaチートシートtabsクラスのサンプル

is-toggleクラスを指定すると、トグルボタンスタイルになります。

Bulmaチートシートtabsクラスのサンプル

is-toggleクラスにis-toggle-roundedクラスを追加すると丸いボタンになります。

Bulmaチートシートtabsクラスのサンプル

Bulmaのタブ(水平ナビ) Tabs [CSSフレームワーク]
Webアプリケーションでは、ナビゲーションにタブを配置してページを切り替えるデザインのものを作成する場合があります。 Bulm...

Level

levelクラスは、水平方向に項目を並べます。
項目のアイテムにはlevel-itemクラスを指定します。
項目を左側に配置する際はlevel-leftクラスをlevelクラスを指定した要素の子要素に配置します。
項目を右側に配置する際はlevel-rightクラスをlevelクラスを指定した要素の子要素に配置します。
項目を中央に配置する際はlevel-itemクラスをlevelクラスを指定した要素の子要素に配置します。

Bulmaチートシートlevelクラスのサンプル

Bulmaのレベル Level [CSSフレームワーク]
Webページをデザインしていると、水平方向に項目を左側や右側に寄せて配置させたり、中央に配置させたり、均等割り付けで配置させたい場合...

Media Object

mediaクラスを使用すると、メディアオブジェクトを簡単に配置することができます。

Bulmaチートシートmediaクラスのサンプル

Bulmaのメディアオブジェクト Media Object [CSSフレームワーク]
ソーシャルメディアのインターフェースで普及している「メディアオブジェクト」は、ウェブ上のいたるところで見られるデザインのパターンです...

Tiles

tileクラスを使うと、要素をMetroスタイルのようなタイル形式で配置することができます。
tileクラスは、タイルレイアウトをする際のコンテナになります。

Bulmaのタイルレイアウトでは

is-ancestor
is-parent
is-child
is-vertical

の各クラスを使用して内部のタイルを構成していきます。

Bulmaチートシートtileクラスのサンプル

Bulmaのタイル Tiles [CSSフレームワーク]
Windowsのスタートメニューをクリックすると表示されるタイルは、Windowsを使っているユーザーの方であれば、一度は目にしたこ...

テキストカラーとバックカラー

Bulmaにはテキストカラー(前景色)とバックカラー(背景色)を設定するクラスが用意されています。
テキストカラーはhas-text-*形式で指定します。
バックカラーはhas-background-*形式で指定します。
「*」には、色を表すキーワードを指定します。

Bulmaチートシートカラーヘルパーのサンプル

テキストカラーとバックカラーの一覧については、以下の記事をご参照ください。

Bulma テキストと背景の色を指定するカラーヘルパー一覧 Color helpers [CSSフレームワーク]
Bulmaには、テキストの前景色(fore color)や背景色(back ground color)を指定するためのクラスが用意さ...