Bootstrapで100vhヒーローを美しく作る方法完全ガイド｜縦中央・余白・ヘッダー被りを初心者向けに解説
生徒
「Bootstrapで、画面いっぱいに広がるかっこいいヒーロー画面を作りたいです」
先生
「それなら100vhを使ったヒーローセクションが便利ですよ」
生徒
「でも、文字が真ん中に来なかったり、ヘッダーに隠れたりします…」
先生
「大丈夫です。Bootstrapのサイズや配置の仕組みを順番に見ていきましょう」
1. 100vhヒーローとは何かを理解しよう
100vhヒーローとは、ブラウザの縦の高さと同じ大きさを使った大きな表示エリアのことです。vhは画面の高さを基準にした単位で、100vhは画面ぴったりを意味します。トップページでよく見かける、大きな写真やキャッチコピーが中央に表示されている部分がこれです。
Bootstrapでは高さを指定するためのユーティリティが用意されており、難しい計算をしなくても画面いっぱいのレイアウトが作れます。初心者の方は、まず「画面の高さに合わせる」という考え方を覚えることが大切です。
2. Bootstrapで高さを指定する基本の考え方
Bootstrap5には、高さを指定するためのクラスがあります。その代表がvh-100です。このクラスを使うと、その要素の高さが画面いっぱいになります。難しいCSSを書かなくても、クラスを付けるだけでOKです。
これは、箱の高さを定規で測る代わりに「画面と同じ高さにする」と指示しているイメージです。プログラミング未経験の方でも、画面に合わせるという感覚で理解できます。
<div class="vh-100 bg-light">
<h1>ヒーローエリア</h1>
</div>
3. 縦中央に配置するための基本テクニック
100vhヒーローでよくある悩みが「文字が上に寄ってしまう」ことです。Bootstrapでは、フレックスという仕組みを使って簡単に中央寄せができます。これは、箱の中で物を整列させるルールのようなものです。
上下左右の真ん中に配置したい場合は、縦方向と横方向の両方を中央にする指定を行います。難しい言葉に見えますが、「真ん中に置く」と覚えてしまって大丈夫です。
<div class="vh-100 d-flex align-items-center justify-content-center bg-secondary text-white">
<h1>中央に表示される文字</h1>
</div>
4. 余白を整えて読みやすくするコツ
画面いっぱいに表示できても、文字がギリギリだと読みづらくなります。そこで重要なのが余白です。Bootstrapでは、余白を簡単に指定できるクラスが用意されています。
余白は、ノートに文字を書くときの行間や余白と同じです。少し空きを作るだけで、見た目がぐっときれいになります。初心者の方ほど、余白を意識することが大切です。
<div class="vh-100 d-flex align-items-center justify-content-center bg-dark text-white">
<div class="p-5 text-center">
<h1>余白のあるヒーロー</h1>
<p>文字が読みやすくなります</p>
</div>
</div>
5. ヘッダーに被らないようにする考え方
固定されたヘッダーがあると、100vhのヒーローがその下に隠れてしまうことがあります。これは、画面いっぱいの高さに、さらにヘッダー分が足されてしまうためです。
この場合は、ヒーローの上に余白を追加して調整します。ヘッダーの高さ分だけ空けるイメージです。難しい計算はせず、まずは少し余白を足して確認する方法がおすすめです。
<div class="vh-100 pt-5 d-flex align-items-center justify-content-center bg-info">
<h1>ヘッダー被りを防ぐ</h1>
</div>
6. スマホ表示でも崩れにくくする工夫
スマホでは、画面の高さがパソコンと違い、アドレスバーの表示などで見え方が変わります。そのため、100vhが少し大きく感じることがあります。
Bootstrapのユーティリティを使って、文字サイズや余白を調整すると、スマホでも見やすくなります。大切なのは「完璧を目指さず、見やすさを優先する」ことです。
7. よくある失敗とその避け方
初心者の方がよくやってしまうのが、すべてを一度に完璧にしようとすることです。まずは100vhで高さを合わせ、次に中央寄せ、最後に余白という順番で確認しましょう。
一つずつ確認することで、どこでレイアウトが崩れているのかが分かりやすくなります。これは料理で、調味料を少しずつ足して味見するのと同じ考え方です。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
