見出し画像

続・Bulmaをブルマから学ぶ

増田直実

※タイトル画像はChatGPTで作成したイメージです

前回の内容です

Bulmaで学ぶHTML画面デザインチュートリアル

さあ！いい？
このチュートリアルではね、最終的に こんなページを作るのよ。

最終的に作るページ（完成イメージ）

✅ 会社やお店の紹介ページっぽいWebサイト！

内容はこんな感じね：

  • 上部メニュー（Navbar）
    まずはここ。サイトの顔よ。ナビがないと始まらないわ。

  • 大きなタイトル（Hero）
    ドーン！って目立たせる場所。第一印象はここで決まるの。

  • 3つのサービス紹介（Columns + Card）
    サービスを3つ並べて紹介するわ。
    こういうのがあると一気に「ちゃんとした会社サイト」っぽくなるのよ。

  • お問い合わせフォーム（Form）
    お客さんに入力してもらう場所。
    これがないとビジネスにならないでしょ？

  • フッター（Footer）
    最後の締めよ。会社情報とかリンクを入れるのが定番ね。

どう？
これが完成したら、もう立派なWebページよ。
さ、次は手を動かす番ね！

【準備】まずBulmaを読み込む

さあ、最初の準備よ。
Bulmaを使うなら、まず読み込み。 これを忘れたら何も起きないんだから。

Step 0：HTMLのひな形を作る

まずは index.html を作りなさい。
で、次の内容を書いて。

「ひな形」っていうのは、要するに土台よ。
土台がないのに家は建たないでしょ？

さ、書いてみなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bulmaチュートリアル</title>

  <!-- Bulmaを読み込む（CDN） -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>
<body>

</body>
</html>
　

✅ この時点でできていること

よし、ここまで来たら準備は完了よ。

BulmaのCSSがちゃんと読み込まれたから、
これ以降は classを付けるだけでデザインが効くようになるの。

つまり、あなたがやることは簡単。

HTMLに class を付けるだけ。
それだけで見た目が整うんだから、最高でしょ？

Chapter1

まず「中央寄せ」を覚える（container）

いい？最初に覚えるのはこれ。
中央寄せ。
これができないと、ページが一気に素人っぽくなるのよ。

Step 1：文字を表示してみる

まず <body> の中に、これを書きなさい。

<section class="section">
  <div class="container">
    <h1 class="title">Bulmaを始めよう</h1>
    <p class="subtitle">少しずつ画面を作ります</p>
  </div>
</section>

✅ 解説よ

  • section → ページの区切り。余白もいい感じに入るの。

  • container → 横幅を制限して、中央に整える。これが超重要。

  • title → Bulmaの大見出し。

  • subtitle → Bulmaの小見出し。

この時点でね、もう「整ったページっぽい見出し」になるの。
ほら、Bulmaって楽でしょ？

　

Chapter2

ボタンを置く（button）

次はボタンよ。
Webページって、ボタンがあるだけで急にそれっぽくなるの。

Step 2：ボタンを追加する

subtitle の下にこれを追加しなさい。

<button class="button is-primary">はじめる</button>
<button class="button is-light">あとで</button>

全体はこうなるわ：

<section class="section">
  <div class="container">
    <h1 class="title">Bulmaを始めよう</h1>
    <p class="subtitle">少しずつ画面を作ります</p>

    <button class="button is-primary">はじめる</button>
    <button class="button is-light">あとで</button>
  </div>
</section>

✅ 解説よ

  • button → Bulmaのボタン

  • is-primary → 青系の目立つボタン（主役）

  • is-light → 薄い色のボタン（控えめ）

つまり、

「はじめる」＝メイン
「あとで」＝サブ

この差をデザインで表現してるの。
こういうのができると、ちゃんとしたサイトに見えるわよ。

　

Chapter3

画面上にメニューを作る（navbar）

さあ、ここから一気にWebサイトっぽくなるわよ。
上にメニューがあるだけで「企業サイト感」が出るの。

Step 3：ページ上部にメニューを追加

<body> の一番上にこれを書きなさい。

<nav class="navbar is-dark">
  <div class="navbar-brand">
    <a class="navbar-item">
      Bulma入門
    </a>
  </div>

  <div class="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item">ホーム</a>
      <a class="navbar-item">サービス</a>
      <a class="navbar-item">お問い合わせ</a>
    </div>
  </div>
</nav>

✅ 解説よ

  • navbar → 上部メニュー

  • is-dark → 黒っぽい色（締まって見える）

  • navbar-item → メニュー項目

  • navbar-end → 右寄せ

ここまで来たら、もう急に「Webサイトらしさ」が出るわ。
ほら、テンション上がってきたでしょ？

　

Bulma の navbar はね、画面幅が狭くなると（つまりスマホ扱いになると）
navbar-menu を 自動で非表示にするの。

だから「あれ？メニューが消えた！」って思っても、壊れたわけじゃないわよ。

もしメニューが見えない場合は、
ブラウザを 最大化にしたり、表示を縮小して画面幅を広げてみなさい。

そうすれば navbar-menu がちゃんと表示されるわ。　

Chapter4

トップ画面を作る（hero）

次はHeroよ。
ここはページの「顔」だから、派手にいきなさい。

Step 4：大きなタイトルを追加

Navbarの下にこれを追加するの。

<section class="hero is-info">
  <div class="hero-body">
    <p class="title">Bulmaで画面デザイン</p>
    <p class="subtitle">初心者向けチュートリアル</p>
  </div>
</section>

✅ 解説よ

  • hero → 画面の上部に大きく表示するエリア

  • is-info → 水色系（爽やかで情報っぽい）

Heroがあるだけで、一気に「ちゃんとしたトップページ」になるのよ。

　

Chapter5

3列レイアウトを作る（columns）

次はレイアウトよ。
横に並べるだけで「サービス紹介ページ」っぽくなるわ。

Step 5：サービス紹介エリアを作る

Heroの下にこれを追加しなさい。

<section class="section">
  <div class="container">
    <h2 class="title is-4">サービス紹介</h2>

    <div class="columns">
      <div class="column">
        <div class="box">
          <p class="title is-5">教育</p>
          <p>初心者向け研修を提供します。</p>
        </div>
      </div>

      <div class="column">
        <div class="box">
          <p class="title is-5">開発</p>
          <p>Webアプリ開発を支援します。</p>
        </div>
      </div>

      <div class="column">
        <div class="box">
          <p class="title is-5">相談</p>
          <p>IT導入の相談に対応します。</p>
        </div>
      </div>
    </div>

  </div>
</section>

✅ 解説よ

  • columns → 横に並べる枠

  • column → 1つの列

  • box → 枠付きのカード風デザイン

これで「3つ並んだサービス紹介」が完成よ。
もう完全に企業サイトっぽいでしょ？

　

Chapter6

カードを使って「もっとデザインっぽくする」（card）

さっきの box も悪くないけど…
もっと今風にしたいなら card を使いなさい。

Step 6：boxをcardに変更する

先ほどの box の部分を、こう変えるの。

例（教育）：

<div class="card">
  <div class="card-content">
    <p class="title is-5">教育</p>
    <p>初心者向け研修を提供します。</p>
  </div>
</div>

これを3つ全部に適用するのよ。

　

いい？
box と card は初心者のうちは見た目が似てるから、最初は違いが分かりにくいの。
それ、普通よ。安心しなさい。

でもね、用途はちゃんと違うのよ。

box と card の違い（ざっくり）

✅ box

box は一言で言うと…

「ただの枠」よ。

  • 文章やフォームを囲むのに向く

  • 中に何を入れてもOK（構造が自由）

  • シンプルで軽い

つまり、必要最低限の「囲み枠」が欲しいときに使うの。

例：
注意書き、入力フォーム、説明文の枠…そういうやつね。

✅ card

card は一言で言うと…

「紹介用のUI部品」よ。

  • 「見出し＋画像＋本文」みたいな形を想定してる

  • card-image や card-content など専用の構造がある

  • 商品紹介、会社紹介、記事一覧に向く

  • 影や余白が整っていて、より“UI部品っぽい”

つまり「それっぽい紹介カード」を作りたいときは、迷わず card よ。

例：
商品カード、プロフィールカード、記事カード…こういうの。

どっちを使えばいい？

答えはこれ。

  • ただ囲いたいだけ → box

  • 「紹介カード」っぽくしたい → card

これで迷わないでしょ？

ふふ。
これを理解できたら、あなたはもう初心者卒業に近いわよ😏✨

Chapter7

フォームを作る（form）

次はお問い合わせフォーム。
これがないと「会社サイト」として完成しないのよ。

Step 7：お問い合わせフォームを作る

サービス紹介の下に追加しなさい。

<section class="section">
  <div class="container">
    <h2 class="title is-4">お問い合わせ</h2>

    <div class="field">
      <label class="label">お名前</label>
      <div class="control">
        <input class="input" type="text" placeholder="例：山田太郎">
      </div>
    </div>

    <div class="field">
      <label class="label">メールアドレス</label>
      <div class="control">
        <input class="input" type="email" placeholder="example@example.com">
      </div>
    </div>

    <div class="field">
      <label class="label">内容</label>
      <div class="control">
        <textarea class="textarea" placeholder="お問い合わせ内容を入力してください"></textarea>
      </div>
    </div>

    <div class="field">
      <div class="control">
        <button class="button is-primary">送信</button>
      </div>
    </div>

  </div>
</section>

✅ 解説よ

Bulmaのフォームは基本これだけ。

  • field → 1つの入力ブロック

  • label → 項目名

  • input → 入力欄

  • textarea → 複数行入力欄

これだけでフォームが整うの。
便利すぎてズルいくらいよね。

　

Chapter8

フッターを付ける（footer）

最後はフッター。
ここでサイトをきれいに締めるのよ。

Step 8：ページの最後に追加

</body> の直前にこれを書きなさい。

<footer class="footer">
  <div class="content has-text-centered">
    <p>© 2026 Bulma Tutorial Site</p>
  </div>
</footer>

✅ 解説よ

  • has-text-centered → 文字を中央寄せ

フッターがあると、ページが「完成品」になるの。
これ、意外と大事なのよ。

　

【完成版】このチュートリアルの最終HTML（まとめ）

さあ、ここまで作ったら完成よ。
もう立派な会社紹介ページじゃない。

あとはあなたが文章や画像を変えて、好きなサイトに仕上げればいいの。

…いい？
ここまでできたなら、もう初心者じゃないわよ。😏✨


いいなと思ったら応援しよう！