Bulmaをブルマから学ぶ
※タイトル画像はChatGPTで作成したイメージです
ねえ！CSSフレームワークの“Bulma”を使って、Web画面をデザインする方法を勉強してみない？
これ、使いこなせたらかなり便利よ！
1. Bulmaを使う方法（導入方法）
ねえ、聞いて！
Bulmaは基本的にCSSファイルを読み込むだけで使えるの。
つまり、面倒な設定とかほとんどいらないってことよ。
HTMLの <head>タグ の中に、これを追加するだけ。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
これだけでBulmaが使えるようになるのよ。
簡単でしょ？
2. Bulmaのデザイン（部品）の探し方
次はね、Bulma公式の Components を見てみるの。
Buttons（ボタン）
Navbar（メニュー）
Card（カード）
Hero（大きな見出し）
Form（入力フォーム）
…いろんなパーツがまとめてあるから。
それで、探すときはね、公式サイトで迷うより
「Bulma card」
「Bulma navbar」
「Bulma form」
などでGoogle検索する方が速いわよ。
ほんと、効率が違うから。
3. BulmaをHTMLに適用する方法
Bulmaは基本的に、classを付けるだけ。
変な呪文みたいなコードを書かなくていいの。
じゃあ、次の手順で練習してみましょ
① 「Bulma card」で Google検索
② このサンプルを使ってみましょう
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img
src="https://bulma.io/assets/images/placeholders/1280x960.png"
alt="Placeholder image"
/>
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="https://bulma.io/assets/images/placeholders/96x96.png"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
<a href="#">#responsive</a>
<br />
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bulma練習</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>
<body>
ここにコピーペーストします。
</body>
</html>③ ブラウザで表示してみましょう
4. サンプルコードを修正する
最後に、サンプルコードをちょっと改造して…
会社紹介カードを作ってみなさい！
たとえばこんな感じね：
会社の写真
会社名
業種
紹介文
ボタン
Bulmaの考え方は同じなのよ。
card / card-image / card-content / media を
「会社用」に置き換えるだけ。
さ、やってみなさい！
会社紹介カード（改造版サンプル）
<div class="card">
<!-- 会社の写真（上部） -->
<div class="card-image">
<figure class="image is-16by9">
<img
src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1280&q=80"
alt="オフィスの様子"
/>
</figure>
</div>
<div class="card-content">
<!-- 会社ロゴ＋会社名（mediaレイアウト） -->
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="https://placehold.co/96x96/0000FF/FFFFFF?text=ABC"
alt="会社ロゴ"
/>
</figure>
</div>
<div class="media-content">
<p class="title is-4">ABCソリューションズ株式会社</p>
<p class="subtitle is-6">業種：システム開発 / IT研修</p>
</div>
</div>
<!-- 会社紹介本文 -->
<div class="content">
私たちは企業向けの業務システム開発と、新入社員向けIT研修を中心に提供しています。
現場で使える「実践的な教育」と「運用まで見据えた開発」を大切にしています。
<br /><br />
<!-- タグっぽい表示 -->
<span class="tag is-info is-light">#業務システム</span>
<span class="tag is-link is-light">#研修</span>
<span class="tag is-success is-light">#DX支援</span>
<br /><br />
<time datetime="2026-02-15">更新日：2026年2月15日</time>
</div>
<!-- ボタン -->
<div class="buttons">
<a class="button is-primary" href="#">会社概要</a>
<a class="button is-light" href="#">お問い合わせ</a>
</div>
</div>
</div>
変更点（会社紹介用にしたポイント）
はいはい、ここが変更点よ。
つまり「会社紹介用にカスタマイズしたポイント」ってことね！
画像比率：is-4by3 → is-16by9
会社の写真って、だいたい横長が多いでしょ？だからこうするの。名前 / ID：個人名 → 会社名、ID → 業種
個人の投稿じゃないんだから、会社情報に置き換えるのは当然よね。本文：投稿文 → 会社の説明文
適当なつぶやきじゃなくて、ちゃんと会社紹介を書きなさい。リンク：a のハッシュタグ風 → Bulmaの tag
キーワードを見せるなら、tag を使った方がずっとスマートよ。
会社の特徴を並べるのに向いてるの。ボタン：最後に buttons を使って「会社概要」「お問い合わせ」
最後は行動させる導線が必要なの。
「会社概要」と「お問い合わせ」、これが基本セットよ！
5. 改造版サンプルの詳細
<div class="card">
<!-- 会社の写真（上部） -->
<div class="card-image">
<figure class="image is-16by9">
<img
src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1280&q=80"
alt="オフィスの様子"
/>
</figure>
</div><div class="card">
いい？card は Bulma の 「カード部品」よ。
枠線とか影とか余白とか、面倒なデザインを勝手に整えてくれるの。
つまり、情報を「ひとまとめ」にして見せたいときに最高ってわけ。
<div class="card-image">
card-image は、カードの上に画像を置くためのエリアよ。
Bulmaが「ここは画像ゾーンね」って理解して、ちゃんと整えてくれるの。
<figure class="image is-16by9">
Bulmaでは画像を扱うとき、figure を使うことが多いの。
（HTML的には div でもいいけど、Bulmaの流儀ってやつよ）
image は Bulma の画像用クラス。
そして is-16by9 はね、縦横比（アスペクト比）を 16:9 に固定するって意味。
つまり、画像のサイズが多少変わっても、枠はちゃんと 16:9の形に整うのよ。
デザイン崩れを防ぐための重要ポイントね。
<img src="..." alt="オフィスの様子" />
src は表示する画像のURL。
alt は画像が表示できないときの代替文字。
こういうのをちゃんと書くのは基本よ。
検索エンジンにも優しいしね。
ちなみにこの画像は Unsplash（無料の写真素材サイト） の画像よ。
<div class="card-content">
<!-- 会社ロゴ＋会社名（mediaレイアウト） -->
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="https://placehold.co/96x96/0000FF/FFFFFF?text=ABC"
alt="会社ロゴ"
/>
</figure>
</div>
<div class="media-content">
<p class="title is-4">ABCソリューションズ株式会社</p>
<p class="subtitle is-6">業種：システム開発 / IT研修</p>
</div>
</div><div class="card-content">
card-content はカードの本文エリア。
余白がいい感じに付いて、文章が読みやすくなるの。
自分で余白調整する必要？
そんなの、時間のムダよ。
<div class="media">
media は、左に画像（アイコン）右にテキスト（名前など）を並べるためのレイアウト部品よ。
SNSのプロフィール表示みたいな見せ方を作りたいときに、すごく便利なの。
<div class="media-left">
これは左側に配置する部分。
つまり「ロゴとかアイコンを置く場所」ね。
<figure class="image is-48x48">
これは 48×48ピクセルの正方形の画像枠を作る指定よ。
プロフィール画像のサイズを揃えるためのものね。
揃ってないとダサいから、ここは大事よ？
<img src="..." alt="会社ロゴ" />
src は画像URL。
alt は代替文字。
この画像は Placeholdサービスを使ってるのね。
つまり「仮画像」ってことよ。
<div class="media-content">
media-left の右側に来るテキスト領域よ。
会社名とか業種とか、説明を入れる場所ね。
<p class="title is-4">ABCソリューションズ株式会社</p>
title は Bulma の見出しスタイル。
is-4 はサイズレベル4よ。
数字が小さいほど文字が大きいの。
<p class="subtitle is-6">業種：システム開発 / IT研修</p>
subtitle は控えめな見出し用のスタイル。
is-6 は小さめサイズね。
会社名が主役で、業種はサブ情報。
ちゃんとバランス取れてるじゃない。
<!-- 会社紹介本文 -->
<div class="content">
私たちは企業向けの業務システム開発と、新入社員向けIT研修を中心に提供しています。
現場で使える「実践的な教育」と「運用まで見据えた開発」を大切にしています。
<br /><br />
<!-- タグっぽい表示 -->
<span class="tag is-info is-light">#業務システム</span>
<span class="tag is-link is-light">#研修</span>
<span class="tag is-success is-light">#DX支援</span>
<br /><br />
<time datetime="2026-02-15">更新日：2026年2月15日</time>
</div><div class="content">
Bulmaの content は文章の見た目を整えるクラスよ。
行間、段落の余白、リンクの色…そういうのを全部まとめて
「読みやすい文章スタイル」にしてくれるの。
文章が多いところには絶対つけたほうがいいわ。
<br />
これはHTMLの改行。
単純だけど、使いすぎるとレイアウトが汚くなるから注意しなさい。
<span> ... </span>
span は HTML のインライン要素。
つまり、改行されず横に並ぶのが特徴よ。
<span class="tag">#業務システム</span>
Bulmaの tag を付けると、文字の周りに枠や背景が付いて
「ラベル」っぽい見た目になるの。
会社の特徴をキーワードとして見せたいときに向いてるわね。
Bulmaでは is-○○ で色を指定できるの
is-info
→ 水色系（情報っぽい色）
is-link
→ 青系（信頼感・リンクっぽい色）
is-success
→ 緑系（成功・安心感）
色を使うときは意味を持たせなさい。
ただ派手にするだけじゃ、センス悪いわよ。
<time datetime="2026-02-15">更新日：2026年2月15日</time>
time は日時情報を表すHTMLタグ。
datetime="2026-02-15" は機械が理解する形式。
「更新日：2026年2月15日」は人間向け表示。
こういうのを書ける人は、地味に評価されるのよ。
検索エンジンにも優しいしね。
<!-- ボタン -->
<div class="buttons">
<a class="button is-primary" href="#">会社概要</a>
<a class="button is-light" href="#">お問い合わせ</a>
</div><div class="buttons">
buttons は複数ボタンをまとめるコンテナよ。
これを付けると、
・ボタン同士の間隔が自動で空く
・横に並んで見やすくなる
・レイアウトが整う
っていう効果があるの。
つまり、めちゃ便利。
<a class="button is-primary" href="#">会社概要</a>
ここ重要よ。
普通 a はリンクだけど、Bulmaでは
class="button" を付けると ボタンの見た目になるの。
これが Bulma の「簡単にUI作れる」強さよ。
class="button is-primary"
is-primary はメインカラー指定。
つまり「重要なボタンですよ！」って強調できるの。
だから「会社概要」みたいな目立たせたいものに使うのが正解ね。
class="button is-light"
is-light は薄い色の控えめボタン。
つまり
「会社概要」＝メイン（強調）
「お問い合わせ」＝サブ（控えめ）
っていう 優先順位をデザインで表現してるの。
こういうのができると、見た目が一気にプロっぽくなるわ。
href="#"
これは仮のリンクよ。
実際にはこうやって指定するの。
例：
<a class="button is-primary" href="about.html">会社概要</a>
<a class="button is-light" href="contact.html">お問い合わせ</a>
6. Bulma利用の流れ（まとめ）
いい？Bulmaの使い方は、流れを覚えたら一気に楽になるの。
基本はこの4ステップよ。
手順①：まずCSSファイルを貼る
最初にやることはこれ。
BulmaのCSSを読み込まないと何も始まらないの。
つまり、HTMLの <head> の中に Bulma のリンクを追加する。
これで準備完了よ。
手順②：公式で部品を探す
次は、Bulma公式の Components を見て、欲しい部品を探すの。
たとえば、
「Navbar」「Card」「Form」など
こういうのが全部そろってるわ。
つまり、ゼロから作るんじゃなくて、最初から完成形が用意されてるのよ。
手順③：サンプルHTMLをコピーして貼る
そして見つけたら、サンプルHTMLをそのままコピペ。
Bulmaはね、基本的に
「コピペで使える」思想で作られてるの。
これが初心者に優しい理由よ。
手順④：classを少し変えてデザイン調整
最後に、classを少し変えるだけでデザインが変わるの。
たとえばこうね：
例：
<button class="button is-danger is-large">削除</button>button → ボタンの基本形
is-danger → 赤系（危険・削除っぽい）の色
is-large → 大きめサイズ
ほら、たったこれだけで
「削除ボタンらしい見た目」になるでしょ？
つまりBulmaは、
部品を探して → コピペして → classを変えるだけ。
シンプルでしょ？
余計な苦労する必要ないのよ。
7. Bulmaでよく使うデザインパーツ
初心者がまず覚えると便利なのは、このあたりよ。
ここを押さえるだけで、画面が一気に「それっぽく」なるの。
button（ボタン）
button is-primary とかで簡単に見た目が整うわ。card（カード）
情報をまとめて見せるならこれ。会社紹介にもピッタリよ。navbar（ナビバー）
Webサイトの上にあるメニュー。これがあると急に本格的になるの。form（フォーム）
入力欄、チェックボックス、セレクトボックス。全部きれいに揃うわ。columns（カラムレイアウト）
画面を左右に分割したいときに使うの。レスポンシブ対応も簡単よ。tag（タグ）
キーワードを表示するならこれ。ラベルっぽくなるのが便利。notification / message（通知）
「成功しました」「エラーです」みたいな表示に向いてるわ。
まずはこの辺を使いこなせば十分よ。
欲張って全部覚えようとしなくていいの。
8. Bulmaを使う上での注意点
ここ、かなり重要よ。ちゃんと覚えておきなさい。
Bulmaは「JavaScriptなし」
Bulmaはね、JavaScriptが付いてないの。
Bootstrapと違って、Bulmaは基本的に CSSのみ。
つまりどういうことかというと…
自動で動く機能は用意されてない
たとえば、
ナビバーの開閉
モーダル表示
アコーディオン
こういう「動きのあるUI」は、Bulmaだけでは動かないの。
見た目は作れるけど、動かすには…
自分でJavaScriptを書く必要があるってこと。
でも逆に言えば、
「余計なJavaScriptが勝手に動かない」から、シンプルで軽いのよ。
Bulmaはそういう思想なの。
ふぅ…ここまで理解できたなら十分よ。
Bulmaはね、難しく考えなくていいの。
CSSを読み込んで、公式で部品を探して、コピペして、classをちょっと変える。
たったそれだけで、ちゃんとしたWeb画面が作れるんだから。
でも勘違いしないで。
Bulmaは便利だけど、全部やってくれるわけじゃないの。
動きが欲しいなら、JavaScriptは自分で書きなさい。
さ、あとは手を動かすだけよ。
…できるわよね？
