当ブログでは、CSSフレームワークの「Bulma」の使い方を日本語ドキュメントとしてまとめています。
Bulmaの学習、クラスのリファレンスなどにご利用ください。
目次
Bulma 入門
Bulmaの導入(ダウンロードとインストール)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bulmaのフォーム Form [CSSフレームワーク]
ユーザーの入力を受け付けるフォーム(Form)は、デザインによってその操作性は大きく異なってきます。
文字の大きさの調整や、適度な...
フィールド Field

Bulmaのフォームフィールド Field [CSSフレームワーク]
ユーザーに情報の入力を求めるWebサイト(ページ)や、Webシステムでは、データを入力するためのフォーム(form)を配置します。
...
コントロール Control

Bulmaのフォームコントロール Control [CSSフレームワーク]
BulmaではWebページの入力フォーム(Form)にテキストボックスなどの要素を配置する際に、要素をラップするブロックコンテナを配...
テキスト(インプット)ボックス Input

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bulmaのスペーシングヘルパー Spacing helpers [CSSフレームワーク]
Bulmaでは、すべての方向にマージンとパディングのヘルパークラスが提供されています。
今回は、スペースを簡単に設定できるBu...
タイポグラフィヘルパー Typography helpers

Bulmaのタイポグラフィヘルパー Typography helpers [CSSフレームワーク]
Webページでは、ケースに合わせて様々なスタイルのフォントを使用します。
Bulmaには、テキストのフォントサイズや太さをはじ...
レスポンシブヘルパー Responsive helpers

Bulma viewportの幅に応じた表示と非表示 Responsive helpers [CSSフレームワーク]
Bulmaには、viewport(ビューポート)の幅に応じてコンテンツを表示するか、非表示にするかを切り替えるクラスが用意されていま...
Tips 使用例(実装例)サンプル
ログイン情報コントロールボックス

ログイン情報(ユーザーID、パスワード)を入力するコントロール [CSSフレームワーク Bulma]
CSSフレームワークのBulmaを利用することで、WebページのUIを簡単に実装することができます。
今回は、Bulmaを使っ...
住所情報コントロールボックス

住所情報を入力するコントロールボックス [CSSフレームワーク Bulma]
CSSフレームワークのBulmaには、入力フォームのスタイルを設定するための様々なクラスが用意されています。
今回は、Bulm...
料理レシピの部品

料理のレシピサイトで使えそうなスタイル [CSSフレームワーク Bulma]
CSSフレームワークに用意されている様々なクラスを組み合わせることで、Webサイトやブログに印象的なデザインの要素を配置することがで...
Bulmaのクラス(部品)を組み合わせてWebページを作成する

Bulmaのクラス(部品)を組み合わせてWebページを作成する
今回は、Bulmaが提供してくれている様々なクラスを使用して一般的なWebページを作成したいと思います。
ここでは、以下のペー...