【Bootstrap】サンプルの使い方とカスタマイズ方法を簡単に解説

公開：2024年9月10日更新：2025年11月7日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

Bootstrapには「公式が提供するサンプル集」や「無料で使えるテンプレート」が豊富に用意されており、それらを活用することによって効率的にサイトを作成できます。

しかし、サンプルやテンプレートの入手先が複数ある上に。テンプレートをどのようにカスタマイズすれば良いのか、具体的な手順が分からない方がいると思います。

この記事では、Bootstrapのサンプルを入手する方法、サンプルコードで作成できる主要コンポーネント、テンプレートをカスタマイズする方法について、詳しく解説していきます。

Bootstrapのサンプルを入手する方法
公式サイトから入手する
Start Bootstrapから入手する
Bootstrapのサンプルコードで作成できる主要コンポーネント
ナビゲーションメニュー
カード
スライダー
Bootstrapのテンプレートをカスタマイズする方法
背景画像を変更する
文章を変更する
ボタンの色を変更する

Bootstrapのサンプルを入手する方法

Bootstrapのサンプルやテンプレートは、公式サイトや専門サイトから無料で入手できます。入手先によって提供されるサンプルの種類や特徴が異なるため、自分の作りたいサイトに合った入手先を選ぶことが重要です。

入手方法として、以下2つが挙げられます。

公式サイト
Start Bootstrap

用途に応じて使い分けることによって、効率的にサイト制作を進められます。以下では各入手方法について、詳しく解説していきます。

公式サイトから入手する

Bootstrap公式サイトのExamplesページには、すぐに使えるサンプル集が豊富に用意されています。サンプル集は用途別に4つのカテゴリに分類されており、自分の作りたいサイトに合ったサンプルを見つけられます。

主なカテゴリは、以下のとおりです。

カテゴリ	特徴
Starters	WebpackやViteなど主要なフレームワークと組み合わせて使用
スニペット	ヘッダーやフッター、カードなど頻繁に使用されるパターン
カスタムコンポーネント	アルバムやブログ、ダッシュボードなど完成度の高いテンプレート
フレームワーク	グリッドシステムやナビバーなど基本的なコンポーネントの実装例

公式サイトのサンプルはレスポンシブに対応しているので、HTMLファイルをダウンロードしてそのまま使用できます。特定のコンポーネントだけ使いたい場合はスニペット、サイト全体を一度に作成したい場合はカスタムコンポーネントを選択すると良いでしょう。

Start Bootstrapから入手する

Start BootstrapはBootstrapテンプレートを提供する専門サイトで、デザイン性の高いテンプレートが豊富に揃っています。公式サイトと比較して、よりおしゃれでモダンなデザインのテンプレートが多く、ポートフォリオサイトやランディングページの作成に適しています。

主な特徴は、以下の通りです。

特徴	内容
テンプレートの豊富さ	無料で入手可能なテンプレートが豊富に用意されている
デザイン性	おしゃれでモダンな印象を与えられる
レスポンシブ対応	既にレスポンシブ対応済みで設定不要
使いやすさ	zipファイルを解凍するだけで使用可能

Start Bootstrapからテンプレートをダウンロードする方法は、非常に簡単です。サイトにアクセスして好きなテンプレートを選択し、Free Downloadボタンをクリックするだけで、必要なHTMLやCSS、JavaScriptファイルが全て含まれたzipファイルがダウンロードされます。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

Bootstrapのサンプルコードで作成できる主要コンポーネント

Bootstrapのサンプルコードを使用することによって、以下のような主要コンポーネントを簡単に作成できます。全てレスポンシブ対応済みで、コードを貼り付けるだけで動作します。

ナビゲーションメニュー
カード
スライダー

それぞれのコンポーネントは異なる用途で使用され、組み合わせることによって完成度の高いサイトを構築できます。以下では、各コンポーネントの使い方などについて、サンプルコード付きで詳しく解説していきます。

ナビゲーションメニュー

ナビゲーションメニューはサイトの上部に配置されるメニューバーで、Bootstrapではnavbarクラスを使用して作成します。レスポンシブ対応されており、画面幅が狭くなると、自動でハンバーガーメニューに切り替わります。

ナビゲーションメニューのサンプルコードは、以下の通りです。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand text-dark" href="#">Portfolio</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <div class="navbar-nav">
      <a class="nav-link text-dark" href="#">Home</a>
      <a class="nav-link text-dark" href="#skill">Skill</a>
      <a class="nav-link text-dark" href="#works">Works</a>
      <a class="nav-link text-dark" href="#contact">Contact</a>
    </div>
  </div>
</nav>

上記のコードでは、navbar-lightとbg-lightクラスで明るい背景色を指定しています。背景色を変更したい場合は、bg-lightをbg-darkやbg-primaryに変更するだけで、ダークグレーや青色のナビゲーションメニューに変更できます。

画面幅が992px未満になると、ハンバーガーメニューに切り替わるため、スマートフォンやタブレットでも快適に操作できます。ブラウザの幅を変更して動作を確認してみてください。

カード

カードは画像とテキストを組み合わせた構成部品で、Bootstrapではcardクラスを使用して作成します。商品紹介やポートフォリオ、ブログ記事の一覧表示など幅広い用途で使用されます。

カードのサンプルコードは、以下の通りです。

<div class="container py-4">
  <h2>Works</h2>
  <div class="card-deck">
    <div class="card">
      <img src="img/sample.jpg" class="card-img-top" alt="Sample">
      <div class="card-body">
        <h5 class="card-title">Work1</h5>
        <p class="card-text">This is sample description.</p>
      </div>
    </div>
    <div class="card">
      <img src="img/sample.jpg" class="card-img-top" alt="Sample">
      <div class="card-body">
        <h5 class="card-title">Work2</h5>
        <p class="card-text">This is sample description.</p>
      </div>
    </div>
    <div class="card">
      <img src="img/sample.jpg" class="card-img-top" alt="Sample">
      <div class="card-body">
        <h5 class="card-title">Work3</h5>
        <p class="card-text">This is sample description.</p>
      </div>
    </div>
  </div>
</div>

上記のコードではcard-deckクラスを使用して、カードを等間隔で横並びに配置しています。小さい画面では自動的に縦に並ぶため、デバイスに応じた最適な表示が可能です。

画像のパスや文字を変更するだけで、オリジナルのコンテンツに置き換えられます。ブラウザの幅を変更して、レスポンシブ対応の動作を確認してみてください。

スライダー

スライダーは複数の画像を自動的に切り替えて表示する機能で、Bootstrapではcarouselクラスを使用して作成します。トップページのメインビジュアルや商品の複数画像を表示する際に、非常に効果的です。

スライダーのサンプルコードは、以下の通りです。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/sample1.jpg" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="img/sample2.jpg" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="img/sample3.jpg" class="d-block w-100" alt="Slide 3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

上記のコードでは、data-ride="carousel"を指定することによって、自動的に画像が切り替わるように設定しています。最初に表示する画像にはactiveクラスを付ける必要があります。

左右の矢印ボタンで画像を切り替えることも可能で、ユーザーが自分のペースで閲覧できるようになっています。下部のインジケーターをクリックすることによって、特定のスライドに直接移動できます。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

Bootstrapのテンプレートをカスタマイズする方法

ダウンロードしたテンプレートの背景画像や文章、ボタンの色などを変更することによって、自分のサイトに合わせてカスタマイズできます。HTMLファイルとCSSファイルを編集するだけで、簡単にオリジナルのサイトを作成できます。

以下のカスタマイズ方法について、詳しく解説していきます。

背景画像
文章
ボタンの色

背景画像を変更する

テンプレートのトップ部分に表示される背景画像を変更することで、サイトの印象を大きく変えられます。背景画像の変更は、CSSファイルを編集するだけで簡単に実現できます。

背景画像を変更する手順は、以下の通りです。

好きな画像をダウンロードする
assetsフォルダのimgディレクトリに保存する
CSSフォルダ内のstyle.cssファイルを開く
header.mastheadのbackgroundプロパティにあるurl部分を変更する
変更後のファイルを保存してブラウザで確認する

具体的なCSS変更例は、以下の通りです。

 #変更前
header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 4.5rem);
  background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../assets/img/bg-masthead.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

 #変更後
header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 4.5rem);
  background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../assets/img/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

上記のコードでは、url部分を変更することによって、異なる背景画像を表示できます。linear-gradientで半透明のオーバーレイを追加しているため、画像の上に配置されたテキストが読みやすくなっています。

文章を変更する

テンプレートに記載されている英語の文章を日本語に変更したり、自分の情報に置き換えたりすることによって、オリジナルのサイトを作成できます。文章の変更は、HTMLファイルを編集するだけで簡単に実現できます。

文章を変更する手順は、以下の通りです。変更したい箇所を探す際は、テキストエディタの検索機能を使用すると効率的に見つけられます。

index.htmlファイルをテキストエディタで開く
変更したい文章を探す
h1タグやpタグ内の文章を好きな内容に変更する
変更後のファイルを保存してブラウザで確認する

ボタンの色を変更する

テンプレートに配置されているボタンの色を変更することで、サイトデザインに統一感を持たせられます。ボタンの色変更は、HTMLのクラス名を変更するだけで簡単に実現できます。

ボタンの色を変更する手順は、以下の通りです。

index.htmlファイルをテキストエディタで開く
変更したいボタンのコードを探す
btnクラスのカラークラスを変更する
変更後のファイルを保存してブラウザで確認する

具体的なHTML変更例は、以下の通りです。

 #変更前
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">詳しく見る</a>

 #変更後
<a class="btn btn-success btn-xl js-scroll-trigger" href="#about">詳しく見る</a>

上記のコードでは、btn-primaryをbtn-successに変更することによって、ボタンの色を青色から緑色に変更できます。Bootstrapにはbtn-primaryやbtn-success、btn-danger、btn-warning、btn-infoなどの色クラスが用意されており、クラス名を変更するだけで簡単に色を変更できます。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。