見出し画像

Bulmaをブルマから学ぶ ～アドバンス～

増田直実

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

前回の内容です

見た目が一気に良くなる技（プロっぽくする）

いい？ここからは「機能」じゃなくて「見た目」の勝負よ。
画面がダサいと、内容が良くても損するの。現実ってそういうものなの。

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

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

      <div class="columns">

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

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


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

    </div>
  </section>

  <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>

  <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>
  <footer class="footer">
    <div class="content has-text-centered">
      <p>© 2026 Bulma Tutorial Site</p>
    </div>
  </footer>
</body>

</html>

Step0：準備（Font Awesomeを読み込む）

まずはアイコンを使えるようにするわよ。
これを入れるだけで、急に画面が引き締まるの。

<head> の中に1行追加しなさい。
（Bulmaのlinkの下あたりね）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

これで、

<i class="fa-solid fa-..."></i>

って書けば、アイコンが使えるようになるわ。

Step1：Heroに背景画像を入れる

さあ、ここが一番効くポイントよ。
Heroに背景画像を入れて、上から半透明の暗い色をかぶせると…

一気にプロっぽくなる。

これ、鉄板のテクニックだから覚えなさい。

✅ Heroをこの形に置き換えて

 hero 部分を丸ごと差し替えなさい。

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

      <div class="buttons">
        <a class="button is-primary">
          <span class="icon"><i class="fa-solid fa-circle-info"></i></span>
          <span>会社概要</span>
        </a>

        <a class="button is-light">
          <span class="icon"><i class="fa-solid fa-envelope"></i></span>
          <span>お問い合わせ</span>
        </a>
      </div>
    </div>
  </div>
</section>

見た？
ボタンにアイコンを付けるだけでも「急にそれっぽい」わよ。

　

✅ 次に、背景画像用のCSSを追加する

<head> の最後（</head> の直前）に <style> を追加しなさい。

<style>
  /* Heroの背景画像＋暗いフィルター */
  .hero-bg {
    background-image:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=80");
    background-size: cover;
    background-position: center;
  }
</style>

ポイントよ

  • linear-gradient(...) が「暗いフィルター」
    → 文字が読みやすくなるの。背景が明るいと文字が負けるからね。

  • background-size: cover;
    → 画面いっぱいに自然に広がる。これが一番きれい。

　

Step2：アイコン（Font Awesome）をボタンや見出しに付ける

さっきのHeroボタンに、もうアイコン付けたわね。

<span class="icon"><i class="fa-solid fa-envelope"></i></span>

ここも覚えておきなさい

  • fa-solid → 塗りつぶし系のアイコン

  • fa-envelope → 封筒アイコン

つまり、class名を変えるだけでアイコンが変わるのよ。
便利すぎるわ。

Step3：Cardに画像＋アイコン＋余白を付ける

次は「サービス紹介」をもっと見栄え良くするわよ。
カードに画像が付くだけで、もう別物になるの。

✅ サービス紹介ブロックをこれに置き換えて

columns 部分を丸ごと差し替えなさい。

<section class="section">
  <div class="container">
    <h2 class="title is-4">
      <span class="icon"><i class="fa-solid fa-briefcase"></i></span>
      サービス紹介
    </h2>

    <div class="columns is-variable is-5">
      <!-- 1 -->
      <div class="column is-4-desktop is-6-tablet">
        <div class="card card-hover">
          <div class="card-image">
            <figure class="image is-16by9">
              <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&q=80" alt="研修">
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-5">
              <span class="icon"><i class="fa-solid fa-chalkboard-user"></i></span>
              教育
            </p>
            <p class="content">初心者向け研修を、現場で使える形で提供します。</p>
            <a class="button is-link is-light is-small">詳しく</a>
          </div>
        </div>
      </div>

      <!-- 2 -->
      <div class="column is-4-desktop is-6-tablet">
        <div class="card card-hover">
          <div class="card-image">
            <figure class="image is-16by9">
              <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=1200&q=80" alt="開発">
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-5">
              <span class="icon"><i class="fa-solid fa-code"></i></span>
              開発
            </p>
            <p class="content">業務システムの設計から実装・運用まで支援します。</p>
            <a class="button is-link is-light is-small">詳しく</a>
          </div>
        </div>
      </div>

      <!-- 3 -->
      <div class="column is-4-desktop is-6-tablet">
        <div class="card card-hover">
          <div class="card-image">
            <figure class="image is-16by9">
              <img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1200&q=80" alt="相談">
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-5">
              <span class="icon"><i class="fa-solid fa-comments"></i></span>
              相談
            </p>
            <p class="content">DX推進や開発体制づくりの相談に対応します。</p>
            <a class="button is-link is-light is-small">詳しく</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

ここでの「プロっぽさ」要素

いい？ここが「見た目改善の黄金セット」よ。

  • card-image で横長画像を上に入れる

  • 見出しにアイコンを付ける

  • columns is-variable is-5 で余白をきれいに整える

  • 小さめボタンで「導線」を作る

これができると、画面が急に洗練されるの。

　

Step4：余白を調整して美しくする（CSS追加）

最後の仕上げよ。
カードにホバー効果を付けると「触りたくなるUI」になるの。

さっきの <style> に追記しなさい（同じstyleタグ内でOK）。

<style>
  .hero-bg {
    background-image:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=80");
    background-size: cover;
    background-position: center;
  }

  /* カードを少し浮かせて、ホバーで気持ちよく */
  .card-hover {
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.15);
  }

  /* タイトルとアイコンの間隔を少し整える */
  .title .icon {
    margin-right: 0.35rem;
  }
</style>

ここまでで「急にプロっぽく」なる理由

理由はシンプルよ。

  • 背景画像＋暗フィルター（Hero）
    → トップが映える

  • アイコンで情報が一瞬で伝わる
    → 見る人が迷わない

  • カード画像で視覚的に理解できる
    → 説明しなくても伝わる

  • 余白とホバー演出で洗練される
    → 触ったときの気持ちよさが違う

　
<!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">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <style>
    /* Heroの背景画像＋暗いフィルター */
    .hero-bg {
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
        url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=80");
      background-size: cover;
      background-position: center;
    }

    .hero-bg {
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
        url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=80");
      background-size: cover;
      background-position: center;
    }

    /* カードを少し浮かせて、ホバーで気持ちよく */
    .card-hover {
      border-radius: 14px;
      overflow: hidden;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
    }

    /* タイトルとアイコンの間隔を少し整える */
    .title .icon {
      margin-right: 0.35rem;
    }
  </style>

</head>

<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>
  <section class="hero is-medium hero-bg">
    <div class="hero-body">
      <div class="container">
        <p class="title has-text-white">
          Bulmaで画面デザイン
        </p>
        <p class="subtitle has-text-white">
          初心者向けチュートリアル
        </p>

        <div class="buttons">
          <a class="button is-primary">
            <span class="icon"><i class="fa-solid fa-circle-info"></i></span>
            <span>会社概要</span>
          </a>

          <a class="button is-light">
            <span class="icon"><i class="fa-solid fa-envelope"></i></span>
            <span>お問い合わせ</span>
          </a>
        </div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h2 class="title is-4">
        <span class="icon"><i class="fa-solid fa-briefcase"></i></span>
        サービス紹介
      </h2>

      <div class="columns is-variable is-5">
        <!-- 1 -->
        <div class="column is-4-desktop is-6-tablet">
          <div class="card card-hover">
            <div class="card-image">
              <figure class="image is-16by9">
                <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&q=80"
                  alt="研修">
              </figure>
            </div>
            <div class="card-content">
              <p class="title is-5">
                <span class="icon"><i class="fa-solid fa-chalkboard-user"></i></span>
                教育
              </p>
              <p class="content">初心者向け研修を、現場で使える形で提供します。</p>
              <a class="button is-link is-light is-small">詳しく</a>
            </div>
          </div>
        </div>

        <!-- 2 -->
        <div class="column is-4-desktop is-6-tablet">
          <div class="card card-hover">
            <div class="card-image">
              <figure class="image is-16by9">
                <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=1200&q=80"
                  alt="開発">
              </figure>
            </div>
            <div class="card-content">
              <p class="title is-5">
                <span class="icon"><i class="fa-solid fa-code"></i></span>
                開発
              </p>
              <p class="content">業務システムの設計から実装・運用まで支援します。</p>
              <a class="button is-link is-light is-small">詳しく</a>
            </div>
          </div>
        </div>

        <!-- 3 -->
        <div class="column is-4-desktop is-6-tablet">
          <div class="card card-hover">
            <div class="card-image">
              <figure class="image is-16by9">
                <img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1200&q=80"
                  alt="相談">
              </figure>
            </div>
            <div class="card-content">
              <p class="title is-5">
                <span class="icon"><i class="fa-solid fa-comments"></i></span>
                相談
              </p>
              <p class="content">DX推進や開発体制づくりの相談に対応します。</p>
              <a class="button is-link is-light is-small">詳しく</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <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>

  <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>
  <footer class="footer">
    <div class="content has-text-centered">
      <p>© 2026 Bulma Tutorial Site</p>
    </div>
  </footer>
</body>

</html>

ふふ…ここまでできたら、もう立派よ。
「初心者が作った練習ページ」じゃなくて、
ちゃんとした「企業サイトっぽいページ」になるわ。😏✨


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