見出し画像

Bulmaをブルマから学ぶ ～リターンズ～

増田直実

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

前回の内容です

再び、帰ってきたわよ。
今回はね、
ホーム／サービス／お問い合わせをクリックしたら、その場所へスッと移動させるわ。

覚えておきなさい。

Bulmaは見た目担当。
これは HTMLの id と aタグの href だけでできるの。
JavaScript？
いらないわ。

Step1：移動先に “目印（id）” を付ける

まずは「ここに来いよ」っていう目印をつけるの。

移動したいセクションに id="..." を付けなさい。

✅ 例：

  • Hero（トップ） → id="home"

  • サービス紹介 → id="services"

  • お問い合わせ → id="contact"

あなたのHTMLでは、こうするのよ。

<section class="hero is-medium hero-bg" id="home">
<section class="section" id="services">
<section class="section" id="contact">

会社紹介はこうよ

<section class="section" id="company">

って増やせばいいだけ。簡単でしょ？

Step2：Navbarのリンク先を「#id」にする

次はリンク側。

href="#id" にするだけよ。

<div class="navbar-end">
  <a class="navbar-item" href="#home">ホーム</a>
  <a class="navbar-item" href="#services">サービス</a>
  <a class="navbar-item" href="#contact">お問い合わせ</a>
</div>

これでクリックすると、その id の場所へジャンプするわ。

# がつくのがポイントよ。

Step3：「スッ…」と移動させる（スムーズスクロール）

ジャンプってカクッと動くでしょ？
あれ、ちょっとダサいのよ。

だからCSSで滑らかにするわ。

<head>の<style> 内に追加しなさい。

<style>
  html {
    scroll-behavior: smooth;
  }
</style>

これだけで、
スッ…と気持ちよくスクロールするの。

Step4：固定Navbarの“見出しが隠れる問題”対策（重要）

is-fixed-top を使うとね、
ジャンプ先の見出しがナビに隠れるの。

それはダサい。

だからこうするの。

もし固定ナビにするなら：

<nav class="navbar is-dark is-fixed-top" role="navigation">

そして<head>の<style>にこれを追加。

<style>
  section[id] {
    scroll-margin-top: 4rem;
  }
</style>

4remは目安よ。
ナビが大きいなら 5rem にしなさい。

“見た目が隠れない”っていうのは、実務では超重要よ。

　
　

まとめ：最低限やること（3点）

覚えるのはこれだけ。

✔ 各セクションに id を付ける
✔ Navbarのリンクを href="#id" にする
✔ scroll-behavior: smooth; を追加

たったこれだけ。

サンプルコード

<!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;
    }

    /* すでにあるCSSの下に追記OK */

    /* セクション見出しの間隔を少し美しく */
    .section .title {
      margin-bottom: 0.25rem;
    }

    .section .subtitle {
      margin-top: 0.25rem;
    }

    /* フォームの箱を少し上品に */
    .box {
      border-radius: 14px;
    }

    html {
      scroll-behavior: smooth;
    }

    section[id] {
      scroll-margin-top: 4rem;
    }
  </style>

</head>

<body>
  <nav class="navbar is-dark is-fixed-top" role="navigation">
    <div class="navbar-brand">
      <a class="navbar-item">
        Bulma入門
      </a>
    </div>

    <div class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#home">ホーム</a>
        <a class="navbar-item" href="#services">サービス</a>
        <a class="navbar-item" href="#contact">お問い合わせ</a>
      </div>
    </div>
  </nav>
  <section class="hero is-medium hero-bg" id="home">
    <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" id="services">
    <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" id="company">
    <div class="container">
      <h2 class="title is-4">
        <span class="icon"><i class="fa-solid fa-building"></i></span>
        会社紹介
      </h2>
      <p class="subtitle is-6">3つの特徴をカードでまとめます</p>

      <div class="columns is-variable is-5">
        <!-- Card 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-1522071820081-009f0129c71c?auto=format&fit=crop&w=1200&q=80"
                  alt="チーム">
              </figure>
            </div>

            <div class="card-content">
              <div class="media">
                <div class="media-left">
                  <figure class="image is-48x48">
                    <img class="is-rounded" src="https://placehold.co/96x96?text=ABC" alt="ロゴ">
                  </figure>
                </div>
                <div class="media-content">
                  <p class="title is-5">ABCソリューションズ</p>
                  <p class="subtitle is-6">業務システム / 教育</p>
                </div>
              </div>

              <div class="content">
                現場で役立つシステム開発と、新人研修をワンストップで提供します。
                <br><br>
                <span class="tag is-info is-light">#業務システム</span>
                <span class="tag is-success is-light">#研修</span>
                <span class="tag is-link is-light">#伴走</span>
              </div>

              <div class="buttons">
                <a class="button is-primary is-small" href="#">会社概要</a>
                <a class="button is-light is-small" href="#">実績</a>
              </div>
            </div>
          </div>
        </div>

        <!-- Card 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-1556761175-129418cb2dfe?auto=format&fit=crop&w=1200&q=80"
                  alt="会議">
              </figure>
            </div>

            <div class="card-content">
              <div class="media">
                <div class="media-left">
                  <figure class="image is-48x48">
                    <img class="is-rounded" src="https://placehold.co/96x96?text=DX" alt="ロゴ">
                  </figure>
                </div>
                <div class="media-content">
                  <p class="title is-5">DX支援</p>
                  <p class="subtitle is-6">改善提案 / 仕組み化</p>
                </div>
              </div>

              <div class="content">
                業務の棚卸しから改善案の提案、運用定着まで支援します。
                <br><br>
                <span class="tag is-warning is-light">#業務改善</span>
                <span class="tag is-info is-light">#可視化</span>
                <span class="tag is-success is-light">#定着</span>
              </div>

              <div class="buttons">
                <a class="button is-link is-small" href="#">支援内容</a>
                <a class="button is-light is-small" href="#">相談</a>
              </div>
            </div>
          </div>
        </div>

        <!-- Card 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-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&q=80"
                  alt="オフィス">
              </figure>
            </div>

            <div class="card-content">
              <div class="media">
                <div class="media-left">
                  <figure class="image is-48x48">
                    <img class="is-rounded" src="https://placehold.co/96x96?text=DEV" alt="ロゴ">
                  </figure>
                </div>
                <div class="media-content">
                  <p class="title is-5">開発体制づくり</p>
                  <p class="subtitle is-6">設計 / テスト / 品質</p>
                </div>
              </div>

              <div class="content">
                設計レビュー、テスト方針、開発プロセス整備で品質を上げます。
                <br><br>
                <span class="tag is-dark is-light">#設計</span>
                <span class="tag is-link is-light">#テスト</span>
                <span class="tag is-success is-light">#品質</span>
              </div>

              <div class="buttons">
                <a class="button is-success is-small" href="#">取り組み</a>
                <a class="button is-light is-small" href="#">事例</a>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <section class="section" id="contact">
    <div class="container">
      <h2 class="title is-4">
        <span class="icon"><i class="fa-solid fa-envelope"></i></span>
        お問い合わせ
      </h2>

      <div class="box">
        <div class="columns is-variable is-5">
          <!-- 左列 -->
          <div class="column">
            <div class="field">
              <label class="label">お名前</label>
              <div class="control has-icons-left">
                <input class="input" type="text" placeholder="例：山田 太郎">
                <span class="icon is-left"><i class="fa-solid fa-user"></i></span>
              </div>
            </div>

            <div class="field">
              <label class="label">メールアドレス</label>
              <div class="control has-icons-left">
                <input class="input" type="email" placeholder="example@example.com">
                <span class="icon is-left"><i class="fa-solid fa-at"></i></span>
              </div>
            </div>

            <div class="field">
              <label class="label">ご用件</label>
              <div class="control">
                <div class="select is-fullwidth">
                  <select>
                    <option>研修の相談</option>
                    <option>開発の相談</option>
                    <option>DX支援の相談</option>
                    <option>その他</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

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

            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input type="checkbox">
                  個人情報の取り扱いに同意します
                </label>
              </div>
            </div>

            <div class="field is-grouped is-grouped-right">
              <div class="control">
                <button class="button is-primary">
                  <span class="icon"><i class="fa-solid fa-paper-plane"></i></span>
                  <span>送信</span>
                </button>
              </div>
              <div class="control">
                <button class="button is-light" type="reset">クリア</button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

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

</html>

どう？
これで“ただの練習ページ”が、ちゃんとしたWebサイトの動きになったでしょ？

こういう細かい完成度の積み重ねが、
「素人っぽい」と「プロっぽい」を分けるのよ。😏✨


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