Bootstrapの魅力と、このサイトで使っているクラス一覧
Bootstrapは、世界中で広く使われているフロントエンドフレームワークです。HTMLとクラス名を指定するだけで、レスポンシブで整ったデザインがすぐに完成します。
このページでは、当サイト（theta.jp）で使用されているBootstrapの主なクラスとその用途を一覧で紹介します。
🔹 Bootstrapを使うメリット
- モバイル・タブレット・PCすべてに対応（レスポンシブ）
- 洗練されたデザインがすぐに実装可能
- UIパーツ（ボタン、カード、ナビゲーションなど）が豊富
- コードの統一感とメンテナンス性が向上
📦 このサイトで使っているBootstrapクラス一覧
| クラス名 | 用途 |
|---|---|
.container | レイアウトの中央寄せ・幅固定 |
.row | グリッドシステムの行（.colと組み合わせ） |
.col-md-6 | 中サイズ以上で50%幅に分割 |
.text-center | テキストを中央揃えに |
.text-primary | テーマカラー（青系）で文字を装飾 |
.display-4 | 大きく目立つ見出し |
.lead | リード文（文章の冒頭説明）用 |
.btn | ボタン基本クラス |
.btn-primary | メインカラーのボタン |
.btn-outline-secondary | 線だけのボタン（サブ用） |
.btn-lg | 大きめのボタンサイズ |
.alert | 注意・通知用の枠（色変更も可能） |
.card | 角丸で影のあるボックス |
.list-group | 情報を箇条書きで整える |
.img-fluid | 画像をレスポンシブに表示 |
.rounded | 画像やボックスの角を丸く |
.shadow | ボックスに影をつける |
.mt-5 | 上に大きめの余白（margin-top） |
.mb-4 | 下に余白（margin-bottom） |
.gap-3 | 要素間にスペース（gap）を付ける |
.carousel | スライドショー機能（トップページに使用） |
.carousel-item | スライドの各アイテムを構成 |
.carousel-caption | スライド内のテキストエリア |
このように、Bootstrapのクラスを活用することで、短時間で統一感のあるデザインを実現しています。
Web制作における効率とクオリティを両立させたい方に、Bootstrapは非常におすすめです。
当サイトのようなデザインや機能をご希望の方は、
お気軽にお問い合わせください