当ブログでは、CSSフレームワークの「Bulma」の使い方を日本語ドキュメントとしてまとめています。
Bulmaの学習、クラスのリファレンスなどにご利用ください。
目次
Bulma 入門
Bulmaの導入（ダウンロードとインストール）
CSSフレームワーク Bulmaを導入（インストール・CDNから参照）する
CSSフレームワークのBulmaを使うと、レイアウトやエレメント、フォーム要素などのスタイルを簡単に設定できます。また、Bulmaは...
johobase.com
グリッドシステム Columns
Bulmaのグリッドシステム（columns）の基礎 [CSSフレームワーク]
CSSフレームワークのBulmaにはBootstrapと同様に、要素をグリッドのように格子状に配置するための仕組みが用意されています...
johobase.com
Bulmaのグリッドシステム（columns）列のサイズ指定 [CSSフレームワーク]
前回に引き続き、CSSフレームワークのBulmaを使ったグリッドシステムの使い方について記載します。
前回は、Bulmaのco...
johobase.com
Bulmaのグリッドシステム（columns）をレスポンシブWebデザインに対応させる [CSSフレームワーク]
CSSフレームワークのBulmaには、Bootstrapのグリッドシステムと同じように、コンテンツを網目状の升目に配置して、Webサ...
johobase.com
Bulmaのグリッドシステム（columns）の列（column）の余白（Gap）を設定する [CSSフレームワーク]
CSSフレームワークのBulmaには、HTMLの要素をグリッド状に配置するためのクラスが用意されています。
Bulmaでグリッ...
johobase.com
Bulmaのグリッドシステム（columns）のオプション [CSSフレームワーク]
CSSフレームワークのBulmaには、Bootstrapのグリッドシステムと同じように、コンテンツを網目状の升目に配置して、Webサ...
johobase.com
エレメント Elements
ブロック Block
Bulmaのブロック Block [CSSフレームワーク]
Webページをレイアウトしていると、適度なスペース（マージン）を確保した領域を配置したい場合があります。
Bulmaには、コン...
johobase.com
ボックス Box
Bulmaのボックス Box [CSSフレームワーク]
Webページをレイアウトしていると、いくつかの要素の集まりを1つのボックスにまとめて配置したい場合があります。
Bulmaには...
johobase.com
ボタン Button
Bulmaのボタン Button [CSSフレームワーク]
Webフォームのデザインでは、ボタンは欠かせない要素です。
ユーザーに何らかの動作を確定、またはキャンセルさせるためにはボタン...
johobase.com
コンテンツ Content
Bulmaのコンテンツ Content [CSSフレームワーク]
Bulmaには、テキストを記述する際のコンテナとなるクラスが用意されています。
Bulmaを適用（参照）したページでは、ヘッデ...
johobase.com
削除ボタン・閉じるボタン Delete
Bulmaのデリートボタン Delete [CSSフレームワーク]
WebページやWebシステムでは、しばしばメッセージボックスやモーダルダイアログボックスなどのユーザー対話型のUIを実装することがあ...
johobase.com
アイコンの表示・挿入 Icon
Bulmaのアイコン Icon [CSSフレームワーク]
Webページでは、アイコンを配置してデザインに変化を付けたり、ユーザーに分かりやすく内容を伝えたい場合があります。
Bulma...
johobase.com
イメージ（画像）Image
Bulmaのイメージ Image [CSSフレームワーク]
Webページにサイズの大きい画像を配置した際、画像の読み込みに時間がかかってしまう場合やまったく読み込まれない場合があります。
...
johobase.com
通知ボックス Notification
Bulmaの通知メッセージボックス Notification [CSSフレームワーク]
Webページでは、何かの情報をユーザーに通知したり、警告したりすることがよくあります。
例えば、不正な値が入力された時の警告や...
johobase.com
プログレスバー（進捗バー） Progress Bar
Bulmaのプログレスバー（進捗バー） Progress Bar [CSSフレームワーク]
時間のかかる処理を行う際には、処理の進捗を表すプログレスバーを使用することで、ユーザーエクスペリエンスが向上します。
Bulm...
johobase.com
テーブル（表）Table
Bulmaのテーブル（表） Table [CSSフレームワーク]
テーブル（table）を使用したリストは、WebサイトやWebシステムのあらゆる場面で活躍します。
データを表形式で表示するこ...
johobase.com
タグラベル（バッジ）Tag
Bulmaのタグラベル（バッジ）Tag [CSSフレームワーク]
Bulmaには、他のCSSフレームワークでバッジと呼ばれている小さな部品のタグラベルが用意されています。
タグラベル（バッジ）...
johobase.com
タイトルとサブタイトル（表題と副題） Title Subtitle
Bulmaの見出し（表題と副題）Title Subtitle [CSSフレームワーク]
Webページでは、見出し（タイトル）は欠かせないものです。
見出しはページを見やすく飾ります。
Bulmaには見出しをス...
johobase.com
コンポーネント Components
パンくずリスト Breadcrumb
Bulmaのパンくずリスト Breadcrumb [CSSフレームワーク]
Webサイトでは、現在表示されているページがどの階層にいるのかを示す「パンくずリスト」がよく利用されます。
Bulma...
johobase.com
カード Card
Bulmaのカード Card [CSSフレームワーク]
Webサイトでは、商品紹介ページやダッシュボードのアイテムなど、いろいろな場面でカード型のUIを使用することがあります。
Bu...
johobase.com
ドロップダウンメニュー Dropdown
Bulmaのドロップダウンメニュー Dropdown [CSSフレームワーク]
Webページでは、ヘッダーやサイドバーにドロップダウンメニューを配置することがあります。
ドロップダウンメニューは、メニュバーのサ...
johobase.com
垂直ナビゲーションメニュー Menu
Bulmaの垂直ナビゲーションメニュー Menu [CSSフレームワーク]
Webページでは、サイドバーにナビゲーションのメニューを配置する場合があります。
Bulmaには、垂直のナビゲーションメニュー...
johobase.com
メッセージブロック Message
Bulmaのメッセージブロック（メッセージボックス） Message [CSSフレームワーク]
Webシステムでは、様々な場面でユーザーにメッセージを表示します。
ユーザーの操作に対して、情報や警告、またはエラーなど、メッセー...
johobase.com
モーダルウィンドウ Modal
Bulmaのモーダルウィンドウ Modal [CSSフレームワーク]
Webページでは、特定の要素を表示している状態から、ユーザーの承認操作、またはキャンセル操作を受け付けるまで、他の操作を受け付けなく...
johobase.com
Bulmaのナビゲーションバー Navbar [CSSフレームワーク]
WebアプリケーションやWebシステムでは、ページの上部や下部にナビゲーションバーを配置して、ユーザーの操作性を向上させます。
...
johobase.com
ページネーション Paginatio
Bulmaのページネーション Pagination [CSSフレームワーク]
Webページでは、table要素などを使用してデータを表形式のリストで表示することがあります。
表示するデータ（行）の件数が少なけ...
johobase.com
パネル Panel
Bulmaのパネル Panel [CSSフレームワーク]
WebサイトやWebシステムでは、検索可能なメニューを配置したい場合があります。
トップに検索用のテキストを入力するボックスがあり...
johobase.com
タブ（水平ナビ） Tabs
Bulmaのタブ（水平ナビ） Tabs [CSSフレームワーク]
Webアプリケーションでは、ナビゲーションにタブを配置してページを切り替えるデザインのものを作成する場合があります。
Bulm...
johobase.com
入力フォーム Forms
フォーム Form
Bulmaのフォーム Form [CSSフレームワーク]
ユーザーの入力を受け付けるフォーム（Form）は、デザインによってその操作性は大きく異なってきます。
文字の大きさの調整や、適度な...
johobase.com
フィールド Field
Bulmaのフォームフィールド Field [CSSフレームワーク]
ユーザーに情報の入力を求めるWebサイト（ページ）や、Webシステムでは、データを入力するためのフォーム（form）を配置します。
...
johobase.com
コントロール Control
Bulmaのフォームコントロール Control [CSSフレームワーク]
BulmaではWebページの入力フォーム（Form）にテキストボックスなどの要素を配置する際に、要素をラップするブロックコンテナを配...
johobase.com
テキスト（インプット）ボックス Input
Bulmaのテキストボックス（入力欄） Input [CSSフレームワーク]
ユーザーの入力を受け付けるWebサイトやWebシステムでは、HTMLのフォームを配置します。
フォームに配置されるコントロール...
johobase.com
テキストエリアボックス Textarea
Bulmaのテキストエリアボックス Textarea [CSSフレームワーク]
前回の記事では、テキストボックス（input要素）のスタイルを設定するinputクラスをご紹介しました。
input要...
johobase.com
セレクトボックス Select
Bulmaのセレクトボックス Select [CSSフレームワーク]
WebサイトやWebシステムのフォームでは、ドロップダウンリストから項目を選択するselect要素が頻繁に使用されます。
Bu...
johobase.com
チェックボックス Checkbox
Bulmaのチェックボックス Checkbox [CSSフレームワーク]
Webの入力フォームでは、ユーザーに是か非かの2択の選択肢を選んでもらうことがよくあります。
例えば、規約に同意するかどうかを...
johobase.com
Bulmaのラジオボタン Radio button [CSSフレームワーク]
Webの入力フォームでは、ユーザーに選択式の項目を配置することがよくあります。
例えば、性別を選択するものや、支払い方法を選択...
johobase.com
ファイル選択ボタン File upload
Bulmaのファイル選択ボタン File upload [CSSフレームワーク]
Webシステムでは、CSVファイルやエクセルファイルなどのデータファイルをサーバーにアップロードする機能を実装する場合があります。
...
johobase.com
レイアウト Layout
コンテナ Container
Bulmaのコンテナ Container [CSSフレームワーク]
Webページでは、水平方向に左寄せではなく、中央に要素（ブロック）を配置したい場合があります。
Bulmaには、水平方向の中央...
johobase.com
レベル Level
Bulmaのレベル Level [CSSフレームワーク]
Webページをデザインしていると、水平方向に項目を左側や右側に寄せて配置させたり、中央に配置させたり、均等割り付けで配置させたい場合...
johobase.com
メディアオブジェクト Media Object
Bulmaのメディアオブジェクト Media Object [CSSフレームワーク]
ソーシャルメディアのインターフェースで普及している「メディアオブジェクト」は、ウェブ上のいたるところで見られるデザインのパターンです...
johobase.com
ヒーローバナー（ヘッダー） Hero
Bulmaのヒーローバナー Hero Banner（Header） [CSSフレームワーク]
Webページをデザインしていると、横幅いっぱいに広がったバナーを配置したい時があります。
Bulmaには、このようなバナーを配...
johobase.com
セクション Section
Bulmaのセクション Section [CSSフレームワーク]
Webページでは、ページ内の一定の範囲を見出し（h1～h6）ごとや、何らかの区切り、かたまりなどで分けます。
これをセクションと言...
johobase.com
Bulmaのフッター Footer [CSSフレームワーク]
Webページでは、ヘッダーと共にフッターを設けるのが一般的です。
Bulmaにはフッターを配置するためのクラスが用意されていま...
johobase.com
タイル Tiles
Bulmaのタイル Tiles [CSSフレームワーク]
Windowsのスタートメニューをクリックすると表示されるタイルは、Windowsを使っているユーザーの方であれば、一度は目にしたこ...
johobase.com
ヘルパー Helpers
カラー（前景色と背景色）ヘルパー Color Helpers
Bulma テキストと背景の色を指定するカラーヘルパー一覧 Color helpers [CSSフレームワーク]
Bulmaには、テキストの前景色（fore color）や背景色（back ground color）を指定するためのクラスが用意さ...
johobase.com
スペーシング（マージンとパディング）ヘルパー Spacing Helpers
Bulmaのスペーシングヘルパー Spacing helpers [CSSフレームワーク]
Bulmaでは、すべての方向にマージンとパディングのヘルパークラスが提供されています。
今回は、スペースを簡単に設定できるBu...
johobase.com
タイポグラフィヘルパー Typography helpers
Bulmaのタイポグラフィヘルパー Typography helpers [CSSフレームワーク]
Webページでは、ケースに合わせて様々なスタイルのフォントを使用します。
Bulmaには、テキストのフォントサイズや太さをはじ...
johobase.com
レスポンシブヘルパー Responsive helpers
Bulma viewportの幅に応じた表示と非表示 Responsive helpers [CSSフレームワーク]
Bulmaには、viewport（ビューポート）の幅に応じてコンテンツを表示するか、非表示にするかを切り替えるクラスが用意されていま...
johobase.com
Tips 使用例（実装例）サンプル
ログイン情報コントロールボックス
ログイン情報（ユーザーID、パスワード）を入力するコントロール [CSSフレームワーク Bulma]
CSSフレームワークのBulmaを利用することで、WebページのUIを簡単に実装することができます。
今回は、Bulmaを使っ...
johobase.com
住所情報コントロールボックス
住所情報を入力するコントロールボックス [CSSフレームワーク Bulma]
CSSフレームワークのBulmaには、入力フォームのスタイルを設定するための様々なクラスが用意されています。
今回は、Bulm...
johobase.com
料理レシピの部品
料理のレシピサイトで使えそうなスタイル [CSSフレームワーク Bulma]
CSSフレームワークに用意されている様々なクラスを組み合わせることで、Webサイトやブログに印象的なデザインの要素を配置することがで...
johobase.com
Bulmaのクラス（部品）を組み合わせてWebページを作成する
Bulmaのクラス（部品）を組み合わせてWebページを作成する
今回は、Bulmaが提供してくれている様々なクラスを使用して一般的なWebページを作成したいと思います。
ここでは、以下のペー...
johobase.com
