Bootstrap 5ボタン入門：.btn・.btn-primaryの種類とサイズ・形を初心者向けに完全解説
生徒
「Webページにある押せるボタンって、どうやって作っているんですか？」
先生
「Bootstrapを使うと、決められたクラス名を付けるだけで、きれいなボタンを簡単に作れます。」
生徒
「難しい設定やデザインの知識がなくても大丈夫なんですか？」
先生
「大丈夫です。まずは基本となる.btnと色の種類から順番に見ていきましょう。」
1. Bootstrap 5のボタンとは何か
Bootstrap 5のボタンとは、Webページ上でクリックできる操作用の部品です。例えば「送信」「保存」「購入」など、ユーザーが何か行動するときに使われます。Bootstrapでは、あらかじめデザインされたボタンの形や色が用意されているため、自分で細かく見た目を考えなくても統一感のある画面を作れます。
パソコン初心者の方は、ボタンを「家電のリモコンのスイッチ」のようなものだと考えると分かりやすいです。押すと何かが起こる、その役割をWebページで担当するのがボタンです。
2. .btnクラスの基本的な役割
.btnは、Bootstrap 5でボタンを作るための最も基本となるクラスです。HTMLのbuttonタグやaタグに付けることで、見た目がボタンらしく整います。まずは.btnだけを使った一番シンプルな例を見てみましょう。
<button class="btn">基本のボタン</button>
.btnを付けるだけで、文字だけだった表示が、背景色や余白を持ったボタンになります。これがBootstrapボタンの出発点です。
3. 色を決める.btn-primaryなどの種類
Bootstrap 5では、ボタンの色をクラス名で簡単に指定できます。.btn-primaryは代表的な青色のボタンで、「一番伝えたい操作」によく使われます。他にも成功を表す緑色や注意を示す赤色など、意味を持った色が用意されています。
<button class="btn btn-primary">送信</button>
<button class="btn btn-success">完了</button>
<button class="btn btn-danger">削除</button>
色の違いは、信号機をイメージすると理解しやすいです。青は進む、緑は安全、赤は注意というように、見る人に直感的な意味を伝えられます。
4. ボタンのサイズを変える方法
Bootstrap 5では、ボタンの大きさもクラスで指定できます。文字が小さくて押しにくい場合や、目立たせたい場合にサイズ調整が役立ちます。サイズは主に大・通常・小の三種類です。
<button class="btn btn-primary btn-lg">大きいボタン</button>
<button class="btn btn-primary">通常ボタン</button>
<button class="btn btn-primary btn-sm">小さいボタン</button>
スマートフォンでは指で押すため、大きめのボタンが好まれます。このように、使う場面を想像してサイズを選ぶことが大切です。
5. 角丸や枠線だけのボタン表現
Bootstrap 5のボタンは、形の印象も変えられます。角が丸いボタンはやさしい印象を与え、枠線だけのボタンは控えめな操作として使われます。これらもクラス指定だけで実現できます。
<button class="btn btn-primary rounded-pill">丸いボタン</button>
<button class="btn btn-outline-primary">枠線ボタン</button>
丸い形はキャンディのように親しみやすく、枠線だけのものは「補助的な操作」を表現するのに向いています。
6. ボタンにアイコンを入れて分かりやすくする
Bootstrapアイコンを使うと、文字だけよりも直感的に意味が伝わります。ゴミ箱の絵なら削除、紙飛行機なら送信といったように、視覚的な補助になります。
<button class="btn btn-danger">
<i class="bi bi-trash"></i> 削除
</button>
文字が読めなくても意味が伝わるため、初心者にも優しいデザインになります。
7. ボタンを使うときの基本的な注意点
ボタンは多すぎると、どれを押せばよいか分からなくなります。Bootstrap 5では見た目が簡単に整う分、使いすぎに注意が必要です。一番大切な操作だけを目立つ色にし、他は控えめなデザインにすると、画面が分かりやすくなります。
これは机の上にあるスイッチを整理する感覚と同じです。必要なものだけを分かりやすい位置に置くことで、操作ミスを減らせます。
【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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
