デザイン

DESIGN

公開：2024-06-14

Bootstrapとは？意味をわかりやすく簡単に解説

text: XEXEQ編集部

Bootstrapとは

Bootstrapは、Webサイトやアプリケーションを開発するためのオープンソースのフレームワークです。HTMLやCSS、JavaScriptを組み合わせることで、レスポンシブデザインに対応した美しいUIを簡単に作成できます。

Bootstrapは、Twitter社のエンジニアによって開発されました。当初は社内ツールとして利用されていましたが、2011年にオープンソース化され、現在では多くの開発者に愛用されています。

Bootstrapの特徴は、グリッドシステムとコンポーネントにあります。グリッドシステムを使うことで、様々なデバイスに適応したレイアウトを柔軟に設計できます。また、ナビゲーションバーやボタン、フォームなどの様々なUIコンポーネントが用意されており、<div class="container">や<button class="btn btn-primary">のようにクラス名を指定するだけで、簡単に統一感のあるデザインを実現できます。

Bootstrapは、バージョンアップを重ねながら進化を続けています。現在の最新バージョンはBootstrap 5で、FlexboxベースのグリッドシステムやJavaScriptプラグインの刷新など、多くの改善が加えられました。npm install bootstrap@5.0.0というコマンドを実行することで、最新版のBootstrapをプロジェクトに導入できます。

Bootstrapは、プロトタイピングやスモールプロジェクトに適しているだけでなく、大規模なWebサービスの開発にも活用されています。有名なサービスとしては、Spotify、Twitter、Airbnbなどが挙げられます。学習コストが低く、生産性の高いBootstrapは、現代のWeb開発に欠かせないツールの一つと言えるでしょう。

Bootstrapのグリッドシステムについて理解しよう

Bootstrapのグリッドシステムについて、以下3つを簡単に解説していきます。

• Bootstrapのグリッドシステムの基本的な仕組み
• レスポンシブデザインを実現するブレークポイント
• カラムの配置と幅の調整方法

Bootstrapのグリッドシステムの基本的な仕組み

Bootstrapのグリッドシステムは、ページを最大12カラムに分割し、それぞれのカラムに要素を配置していくことで、柔軟なレイアウトを実現します。基本的な構造は、<div class="container">または<div class="container-fluid">で全体を囲み、その中に<div class="row">を配置し、さらにその中に<div class="col-*-*">でカラムを定義します。

カラムのクラス名は、col-{ブレークポイント}-{カラム数}という形式で指定します。例えば、<div class="col-md-6">と記述すると、中サイズ（md）の画面幅で6カラム分の幅を占めるカラムを定義できます。これにより、画面サイズに応じた柔軟なレイアウト調整が可能になります。

以下は、3カラムのレイアウトを定義する基本的なコード例です。

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

レスポンシブデザインを実現するブレークポイント

Bootstrapでは、画面幅に応じてレイアウトを切り替えるブレークポイントが定義されています。デフォルトでは、次の5つのブレークポイントが用意されています。

xs（Extra small）: 576px未満
sm（Small）: 576px以上
md（Medium）: 768px以上
lg（Large）: 992px以上
xl（Extra large）: 1200px以上

各ブレークポイントに対応したクラス名を使い分けることで、画面サイズに応じたレイアウト調整ができます。例えば、<div class="col-sm-6 col-md-4">と記述すると、画面幅が576px以上の場合は6カラム、768px以上の場合は4カラムの幅を占めるようになります。

ブレークポイントは、CSSメディアクエリを使って定義されています。必要に応じて、独自のブレークポイントを追加したり、既存のブレークポイントを変更したりすることもできます。ただし、Bootstrapのデフォルトの設定を活用することで、一貫性のあるレスポンシブデザインを効率的に実現できるでしょう。

カラムの配置と幅の調整方法

Bootstrapのグリッドシステムでは、カラムの配置や幅の調整を柔軟に行うことができます。例えば、<div class="col-md-6 offset-md-3">と記述すると、中央に6カラム分の要素を配置し、左右に3カラム分の余白を確保できます。

カラムの幅は、合計で12になるように調整します。例えば、<div class="row">の中に<div class="col-md-8">と<div class="col-md-4">を配置すると、8:4の比率でカラムが分割されます。また、<div class="col">のように、カラム数を指定しない場合は、均等な幅で自動的に分割されます。

以下は、カラムの配置と幅の調整の例です。

<div class="container">
  <div class="row">
    <div class="col-md-8">Main Content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">Centered Content</div>
  </div>
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

Bootstrapの便利なコンポーネントを活用しよう

Bootstrapの便利なコンポーネントについて、以下3つを簡単に解説していきます。

• ナビゲーションバーの作成方法
• アイコンの使い方
• カルーセルの実装方法

ナビゲーションバーの作成方法

Bootstrapでは、<nav>要素と.navbarクラスを使ってナビゲーションバーを作成します。.navbar-expand-{ブレークポイント}クラスを追加することで、指定したブレークポイントでナビゲーションバーのレイアウトを切り替えることができます。

ナビゲーションバーの内容は、.navbar-navクラスを持つ<ul>要素の中に、.nav-itemクラスを持つ<li>要素としてリンクを配置します。また、.navbar-brandクラスを使ってブランドロゴやテキストを表示したり、.form-inlineクラスを使ってフォームを内包したりすることもできます。

以下は、シンプルなナビゲーションバーのコード例です。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
    </ul>
  </div>
</nav>

アイコンの使い方

Bootstrapでは、アイコンフォントを使ってアイコンを表示することができます。Bootstrap 4まではGlyphiconsが同梱されていましたが、Bootstrap 5からは外部のアイコンライブラリを使用する必要があります。Font AwesomeやBootstrap Iconsなどの人気のアイコンライブラリを利用するのがおすすめです。

アイコンを使用するには、HTMLファイルにアイコンフォントのCSSを読み込み、アイコンを表示したい要素に適切なクラス名を指定します。例えば、Font Awesomeを使う場合は、<i class="fas fa-user"></i>のようにクラス名を指定することで、ユーザーアイコンを表示できます。

以下は、Font Awesomeを使ったアイコン表示の例です。

<!-- Font AwesomeのCSSを読み込む -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">

<!-- アイコンを表示する -->
<button class="btn btn-primary">
  <i class="fas fa-save"></i> Save
</button>

カルーセルの実装方法

Bootstrapのカルーセルコンポーネントを使うと、複数の画像やコンテンツを切り替えて表示することができます。カルーセルは、.carouselクラスを持つ要素の中に、.carousel-innerクラスを持つ要素としてスライドを配置し、.carousel-itemクラスを使ってスライドのコンテンツを定義します。

カルーセルのナビゲーションには、.carousel-control-prevと.carousel-control-nextクラスを持つ要素を使います。また、.carousel-indicatorsクラスを使ってインジケーターを表示することもできます。カルーセルの動作は、JavaScript（jQuery）を使って制御します。

以下は、シンプルなカルーセルのコード例です。

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExample" data-slide-to="1"></li>
    <li data-target="#carouselExample" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Bootstrapを使ったレスポンシブ対応のテクニック

Bootstrapを使ったレスポンシブ対応のテクニックについて、以下3つを簡単に解説していきます。

• 画像のレスポンシブ対応方法
• テーブルのレスポンシブ対応方法
• フォームのレスポンシブ対応方法

画像のレスポンシブ対応方法

Bootstrapでは、.img-fluidクラスを使って画像のレスポンシブ対応を簡単に実現できます。.img-fluidクラスを画像に適用することで、画像の最大幅が親要素の幅に制限され、アスペクト比を維持したままリサイズされるようになります。

以下は、レスポンシブ対応した画像のコード例です。

<img src="image.jpg" class="img-fluid" alt="Responsive image">

また、<picture>要素と.img-fluidクラスを組み合わせることで、デバイスの解像度に応じて最適な画像を表示することもできます。これにより、高解像度のデバイスでは高品質の画像を、低解像度のデバイスでは軽量な画像を表示できるため、パフォーマンスの最適化にも役立ちます。

テーブルのレスポンシブ対応方法

Bootstrapでは、.table-responsiveクラスを使ってテーブルのレスポンシブ対応を実現できます。.table-responsiveクラスをテーブルの親要素に適用することで、画面幅が狭い場合にテーブルに横スクロールバーが表示されるようになります。

以下は、レスポンシブ対応したテーブルのコード例です。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

また、.table-responsive-{ブレークポイント}クラスを使うことで、特定のブレークポイントでのみテーブルをレスポンシブ化することもできます。例えば、.table-responsive-mdクラスを使えば、画面幅が768px未満の場合にのみ横スクロールバーが表示されるようになります。

フォームのレスポンシブ対応方法

Bootstrapでは、グリッドシステムとフォーム関連のクラスを組み合わせることで、フォームのレスポンシブ対応を実現できます。フォームの各要素を.rowと.col-*-*クラスを使って配置し、ラベルと入力欄の幅を調整します。

以下は、レスポンシブ対応したフォームのコード例です。

<form>
  <div class="form-group row">
    <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

上記の例では、ラベルには.col-sm-2クラスを、入力欄には.col-sm-10クラスを適用しています。これにより、画面幅が576px以上の場合は、ラベルと入力欄が横並びで表示され、画面幅が576px未満の場合は、ラベルと入力欄が縦並びで表示されます。

※上記コンテンツはAIで確認しておりますが、間違い等ある場合はコメントよりご連絡いただけますと幸いです。

「デザイン」に関するコラム一覧「デザイン」に関するニュース一覧