Bootstrapのアイコン付きボタン完全ガイド！初心者でもわかるBootstrap Iconsの配置・サイズ・色
生徒
「Bootstrapでボタンを作ったんですけど、アイコンも一緒に表示できますか？」
先生
「できますよ。Bootstrap Iconsを使えば、文字と一緒にアイコン付きボタンを簡単に作れます。」
生徒
「サイズや色も変えられるんですか？」
先生
「もちろんです。文字と同じように調整できます。順番に見ていきましょう。」
1. Bootstrapのボタンとは何かを理解しよう
Bootstrapのボタンとは、画面上で押せる部品のことです。申込み、送信、保存など、利用者に操作してもらうために使います。現実でいうと、リモコンのボタンのような存在です。Bootstrapではclassを指定するだけで、見た目が整ったボタンを作ることができます。
2. Bootstrap Iconsとは何かを知ろう
Bootstrap Iconsは、絵文字のような小さなイラスト集です。ゴミ箱、家、虫眼鏡など、意味が一目で伝わる記号を表示できます。文章だけよりも直感的に分かるため、初心者向けの画面でもよく使われます。
3. アイコン付きボタンの基本的な作り方
<button class="btn btn-primary">
<i class="bi bi-send"></i> 送信
</button>
ボタンの中にiタグを書くだけで、文字の横にアイコンが表示されます。アイコンは文字の一部として扱われるため、特別な設定は不要です。
4. アイコンの位置を調整する方法
<button class="btn btn-success">
保存 <i class="bi bi-check-circle ms-1"></i>
</button>
ms-1は「少し右に余白をあける」という意味です。文字とアイコンがくっつかないようにするための工夫で、初心者でも安心して使えます。
5. アイコンのサイズを変える方法
<button class="btn btn-warning">
<i class="bi bi-exclamation-triangle fs-3"></i> 注意
</button>
fsは文字の大きさを表します。数字が大きいほどアイコンも大きくなります。アイコンは文字と同じ扱いなので、拡大も簡単です。
6. アイコンの色を変更する方法
<button class="btn btn-light border">
<i class="bi bi-heart-fill text-danger"></i> お気に入り
</button>
text-dangerは赤色を意味します。文字と同じ色指定が使えるので、難しい知識は必要ありません。
7. ボタングループでアイコンを活用する
<div class="btn-group">
<button class="btn btn-outline-primary">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-outline-danger">
<i class="bi bi-trash"></i>
</button>
</div>
アイコンだけのボタンも作れます。スマートフォンのアプリのような見た目になり、操作が直感的になります。
8. 初心者がつまずきやすい注意点
アイコンが表示されない場合は、Bootstrap Iconsが正しく読み込まれていないことが多いです。また、iタグのクラス名が間違っていると表示されません。コピーするときは一文字ずつ確認しましょう。
【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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
