Bulmaをブルマから学ぶ ～リターンズ２～
※タイトル画像はChatGPTで作成したイメージです
前回の内容です
じゃ、調子がいいから、次へ行くわよ。
ここから“本気で実務っぽく”なるわよ。😎
「今どこ見てるか分かるナビ」って、ちゃんとしたサイトほど当たり前に入ってるの。
さあ、やるわよ。
現在位置のメニューを自動で強調する
やることはシンプル。
✅ スクロールする
→ 今表示中のセクションを判定
→ 対応するナビ項目に is-active を付ける
つまり、“今どこにいるかが分かるナビ”にするってこと。
Step5：まず、HTMLを少しだけ整理
まずNavbarのリンクは、こうね。
（href="#..." が入ってないと始まらないわよ）
<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 を付ける。
<section class="hero is-info" id="home">
<section class="section" id="services">
<section class="section" id="contact">ここが揃ってないと、あと全部動かない。
“名前合わせ”は基本よ。
Step6：強調用のCSSを追加
次は見た目。
is-active が付いたときに「強調」されるようにするの。
<style> に追加しなさい。
<style>
.navbar-item.is-active {
background-color: #3273dc;
color: white;
font-weight: bold;
}
</style>これで、選ばれたメニューが「青く」なるわ。
Step7：スクロール検知JavaScriptを追加
ここからが本体。
Bulmaは見た目担当だから、こういう動きは JavaScriptで補うのよ。
</body> の直前に追加しなさい。
<script>
document.addEventListener("DOMContentLoaded", function () {
const sections = document.querySelectorAll("section[id]");
const navLinks = document.querySelectorAll(".navbar-item[href^='#']");
window.addEventListener("scroll", function () {
let current = "";
sections.forEach(section => {
const sectionTop = section.offsetTop - 80;
const sectionHeight = section.offsetHeight;
if (window.scrollY >= sectionTop &&
window.scrollY < sectionTop + sectionHeight) {
current = section.getAttribute("id");
}
});
navLinks.forEach(link => {
link.classList.remove("is-active");
if (link.getAttribute("href") === "#" + current) {
link.classList.add("is-active");
}
});
});
});
</script>仕組みを超やさしく言うと
1️⃣ id を持つ section を全部集める
2️⃣ 今どの section が画面にいるかを調べる
3️⃣ 対応するナビリンクだけに is-active を付ける
それだけ。
これでどうなる？
スクロールすると…
「ホーム」にいる → ホームが青くなる
「サービス」にいる → サービスが青くなる
「お問い合わせ」にいる → お問い合わせが青くなる
つまり、
“今どこにいるかが一瞬で分かるナビゲーション”
になるのよ。
これが入ってるだけで、サイトの完成度がグッと上がるわ。
サンプルコード
<!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;
}
.navbar-item.is-active {
background-color: #3273dc;
color: white;
font-weight: bold;
}
</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>
<script>
document.addEventListener("DOMContentLoaded", function () {
const sections = document.querySelectorAll("section[id]");
const navLinks = document.querySelectorAll(".navbar-item[href^='#']");
window.addEventListener("scroll", function () {
let current = "";
sections.forEach(section => {
const sectionTop = section.offsetTop - 80;
const sectionHeight = section.offsetHeight;
if (window.scrollY >= sectionTop &&
window.scrollY < sectionTop + sectionHeight) {
current = section.getAttribute("id");
}
});
navLinks.forEach(link => {
link.classList.remove("is-active");
if (link.getAttribute("href") === "#" + current) {
link.classList.add("is-active");
}
});
});
});
</script>
</body>
</html>ここまでできたあなたは…
ふふ…もう普通に実務寄りよ。
✅ Bulmaでレイアウトできる
✅ 背景画像を使える
✅ カードを作れる
✅ フォームを整えられる
✅ ページ内リンクを作れる
✅ スクロール連動ナビを作れる
もう「練習」って言っても、かなり立派。
あとはあなたのコンテンツを入れ替えるだけで、実案件っぽいページになるわよ。😏✨
