【HTML５・CSS３】 Bootstrapの使い方を徹底解説！
BootstrapはCSSの知識がなくても美しいデザインのサイトを簡単に作成できるフレームワークです。
Bootstrapとは
Bootstrapはアメリカのtwitter社が開発したCSSとJSのフレームワークです。あらかじめ用意されているCSSを使うことで、たとえCSSの知識がなくても綺麗なデザインのサイトを作成することができます。
Bootstrapの導入方法
Bootstrapを導入するには基本的に2つの方法があります。
1. ファイルをダウンロードする
公式サイトからダウンロードします。その後、ダウンロードしたファイルを解凍し、プロジェクトの適切なディレクトリに配置します。
2. CDNで使用する
HTMLファイルに以下のBootstrapのCSS・JSのCDNリンクを追加します。これにより、ファイルをダウンロードしなくても利用することができます。
1
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
1
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
具体的には以下のようにCSSは<head>内に、JSはHTMLファイルの終わりに追加します。JSが必要なコンポーネントもあるので、どちらとも追加しておきましょう。
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
CDNリンクってどういうリンクなのかな？
CDNは「Content Delivery Network（コンテンツ配信ネットワーク）」の略で、インターネット上にある多くのサーバーを使って、ウェブサイトの写真、動画、ページなどのデータを速く届けるシステムだよ。
普通、データは一つの場所（サーバー）から送られるけど、人が世界中にいるため、データが遠い場所から来ると時間がかかるよね。CDNは世界中にサーバーを持っていて、それぞれのサーバーにデータのコピーを保存することで、ユーザーは自分に近いサーバーからデータを受け取ることができ、ウェブサイト上のコンテンツが迅速に届けられるんだ。
Bootstrapの使い方
BootstrapではさまざまなカテゴリでCSSのクラス群が定義されています。これから一つ一つの使い方を解説していきます。
Layout
レイアウトに関連するクラス群で、コンテナ、グリッドシステム、カラム、行などを含みます。これらはページの構造を定義し、コンテンツのレイアウトを整理するために使用されます。
Breakpoints
ブレイクポイントは、デバイスやブラウザの幅に応じて、レイアウトがどのようにレスポンシブに変化するかを定義します。Bootstrapでは、デフォルトで6つのブレイクポイントが提供されており、これらはsm、md、lg、xl、xxl、そして最も小さい画面サイズのためのデフォルト設定として使用されます。
これらのブレイクポイントはcol-sm-2のようにクラス名で使用します。
| Breakpoint | Class infix | 画面幅 |
|---|---|---|
| Extra small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
Containers
コンテナはBootstrapの基本的なレイアウト要素です。コンテンツにmarginやpaddingを追加し、それを中央に配置するために使用されます。また、ページのメインコンテンツを包含するためのラッパーとして機能し、レスポンシブな固定幅（またはフル幅）のコンテナを提供します。
Bootstrapには3つの異なるコンテナがあります。
.containerは各レスポンシブブレークポイントでmax-widthを設定します。.container-fluidの場合、すべてのブレークポイントでwidth: 100%となります。.container-{breakpoint}は、指定されたブレークポイントまでwidth: 100%になります。
| クラス名 | Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|---|---|---|---|---|---|---|
| .contaier | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Grid
グリッドシステムはページのレイアウトを構築するためのシステムです。flexboxを基盤として構築されており、このシステムを使うことでコンテンツを行と列に効率的に配置することができます。以下では、このシステムの基本的な使用方法を順を追って解説します。
1. コンテナを設定
グリッドシステムを使うには、まず.containerまたは.container-fluidクラスを持つコンテナ要素でラップします。
1
2
3
<div class="container">
<!-- ここに行と列を配置 -->
</div>
2. 行を作成する
コンテナ内に.rowクラスを持つ<div>要素を作成します。.rowは列を水平方向に配置するためのラッパーとして機能します。
1
2
3
4
5
<div class="container">
<div class="row">
<!-- ここに列を配置 -->
</div>
</div>
3. 列を作成する
.row内に.col-*クラスを持つ列を作成します。*には1から12までの数値を指定できます。Bootstrapのグリッドシステムは12カラムレイアウトを採用しており、指定された数値は行内での列の幅を決定します。
1
2
3
4
5
6
<div class="container">
<div class="row">
<div class="col-6">カラム1</div>
<div class="col-6">カラム2</div>
</div>
</div>
上記の例では、両方のカラムに.col-6が指定されているため、それぞれのカラムは全体の幅の6/12、つまり50%（1/2）の幅を占めます。
1
2
3
4
5
6
7
<div class="container">
<div class="row">
<div class="col-2">カラム1</div>
<div class="col-5">カラム2</div>
<div class="col-5">カラム3</div>
</div>
</div>
上記の例では、カラム1に.col-2が、カラム2と3に.col-5指定されているため、カラム1は2/12(=1/6)で約16.6%に、カラム2と3は5/12で約41.6%の幅になります。
このようにBootstrapのグリッドシステムでは、指定する数値を12で割ることでカラムの幅が決定されます。そのため、カラム幅の合計が12になるように設定することが重要です。もし12を超える数値を指定した場合、余分になったカラムは次の行に折り返されて表示されます。これにより、意図しないレイアウトの変更が発生する可能性があるため、注意しましょう。
1
2
3
4
5
<div class="row">
<div class="col-6">カラム1</div>
<div class="col-6">カラム2</div>
<div class="col-3">カラム3</div>
</div>
上の例ではカラム1とカラム2の合計が12に達してしまうため、それ以降のカラムは次の行に折り返して表示されます。
列に具体的な数値を指定しない場合、つまり単に.colとする場合、列は利用可能なスペースを均等に分け合います。
1
2
3
4
5
6
7
<div class="container">
<div class="row">
<div class="col">カラム1</div>
<div class="col">カラム2</div>
<div class="col">カラム3</div>
</div>
</div>
この例では、3つのカラムはそれぞれ全体の1/3、約33%の幅を取ります。同様に4つであればそれぞれ全体の1/4になるので25%の幅を取ります。
他のカラムで固定の幅を指定し、特定のカラムで幅を指定しなかった場合は、利用可能な残りのスペースを使用します。
下の例だとカラム1は.col-3が指定されているため、3/12(=1/4)で25%に、カラム2は.col-2が指定されているため、2/12(=1/6)で約16.6%になります。指定した数値はカラム1の3、カラム2の2で合計5になります。残りのスペースは12から5を引いた7のため、幅を指定していないカラム3は7/12で約58.3%`の幅になります。
1
2
3
4
5
6
7
<div class="container">
<div class="row">
<div class="col-3">カラム1</div>
<div class="col-2">カラム2</div>
<div class="col">カラム3</div>
</div>
</div>
次の例だとカラム1は.col-3が指定されているため、3/12(=1/4)で25%に、カラム2は.col-2が指定されているため、2/12(1/6)で約16.6%になります。カラム1とカラム2の合計は5カラム分で、残りのスペースは12から5を引いた7カラム分です。この残りのスペースを幅を指定していないカラム3とカラム4で均等に分け合うため、それぞれのカラムの幅は7/2=3.5カラム分、つまり3.5/12で約29.17%になります。
1
2
3
4
5
6
7
8
<div class="container">
<div class="row">
<div class="col-3">カラム1</div>
<div class="col-2">カラム2</div>
<div class="col">カラム3</div>
<div class="col">カラム4</div>
</div>
</div>
4. レスポンシブな列
Bootstrapのグリッドシステムは12カラムのシステムと5段階のレスポンシブを持っています。レスポンシブでは異なる画面サイズに応じて列の幅を柔軟に設定することが可能です。これには、.col-{breakpoint}-{size}の形式のクラスを使用します。例えば、.col-sm-6は、スモールデバイス（sm）以上の画面幅で列を6/12（50%）の幅に設定します。
以下のコードスニペットでは、2つの列が作成されています。
1
2
3
4
5
6
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-lg-4 bg-primary text-white">カラム1</div>
<div class="col-sm-6 col-lg-8 bg-success text-white">カラム2</div>
</div>
</div>
この例では、sm画面サイズ（576px以上）で両方の列は12分割の中の6分割（つまり50%）の幅を持ちます。一方、lg画面サイズ（992px以上）でカラム1は全体の4/12（約33%）、カラム2は8/12（約66%）の幅に設定されています。このように、12カラムを持つBootstrapのグリッドクラスを使用することで、異なる画面サイズに適応するレスポンシブなレイアウトを簡単に作成できます。
上の画像のようにブラウザの幅が992px以下になるとsmサイズの幅が適用され、992px以上になるとlgサイズの幅が適用されているのが確認できます。
Utilities
様々なデザインやレイアウトの調整を迅速に行うために使用されるクラスのカテゴリです。
Sizing
幅と高さのユーティリティを使用して、要素のサイズを簡単に設定できます。
幅と高さは.w-{value}クラスと.h-{value}クラスを使用します。{value}には25, 50, 75, 100, autoのいずれかを指定でき、これによって要素の幅や高さをパーセンテージまたは自動で設定できます。ただし、これらの値以外の数値を直接指定することはできません。特定の幅や高さが必要な場合は、カスタムCSSを用いる必要があります。
例: .w-75は要素の幅を75%に設定し、.h-autoは高さを自動に設定します。
See the Pen bootstrap_grid_01 by miyajima yuya (@pikawaka) on CodePen.
Spacing
Spacingユーティリティを使用して、マージン（margin）やパディング（padding）を簡単に設定できます。以下に、その使い方を詳しく説明します。
1. 基本的な構文
Spacingクラスの構文は .{property}{sides}-{size}です。
{property}は、スペースを適用する種類で、mはマージン、pはパディングを意味します。
{sides}は、スペースを適用する側面を指定し、以下のようになります。
| sides | 意味 |
|---|---|
| t | 上 (top) |
| b | 下 (bottom) |
| s | 左 (start) |
| e | 右 (end) |
| x | 横方向（左と右） |
| y | 縦方向（上と下） |
| 空白 | 全側面（上下左右すべて） |
{size}はスペースの大きさを指定し、通常は0から5までの値を取ります（0はスペースなし、5は最大のスペースを意味します）。
例:
.mt-0 : 上マージンを0に設定します。
.pe-3 : 右パディングを3のサイズに設定します。
.mb-2 : 下マージンを2のサイズに設定します。
.py-1 : 上下のパディングを1のサイズに設定します。
.px-4 : 左右のパディングを4のサイズに設定します。
.p-3 : 上下左右すべてのパディングを3のサイズに設定します。
See the Pen bootstrap_spacing_01 by miyajima yuya (@pikawaka) on CodePen.
2. レスポンシブクラス
BootstrapのSpacingクラスはレスポンシブで、特定の画面サイズに基づいてスペースを適用することができます。.{property}{sides}-{breakpoint}-{size}の形式を使用します。
例えば、.pt-md-2は中サイズの画面で上パディングを2のサイズに設定します。
3. ネガティブマージン
一部のマージンクラスは負の値も利用できます。これはnを {size}の前に追加して表現します。
例えば、.me-n1は右マージンを-1のサイズに設定します。
これらのクラスを使用することで、要素のマージンとパディングを精密に調整し、望むレイアウトを柔軟に実現できます。また、レスポンシブクラスを利用することで、異なるデバイスサイズにおける視覚的な体験を最適化することが可能です。
Colors
Bootstrapではテキストの色や背景色のクラスが用意されています。
テキストの色
背景色
Flex
CSSのFlexboxの機能を利用して、簡単に要素のレイアウト、整列、サイズ調整を簡単に設定することができます。以下に、その使い方を詳しく説明します。
1. Flexコンテナを設定
.d-flexまたは.d-inline-flexクラスを使って、Flexコンテナを作成します。
.d-flexクラスは、要素をブロックレベルのFlexコンテナに変更します。これにより、要素は画面の全幅を使用して表示され、通常は縦方向にスタックされます。しかし、Flexboxの特性を利用して、子要素（フレックスアイテム）を様々な方法で整列させることができます。
.d-inline-flexクラスは、要素をインラインレベルのFlexコンテナに変更します。これにより、要素は必要な分の幅しか使用せず、他のインライン要素と同じ行に配置されます。
1
2
3
<div class="d-flex">
<!-- フレックスアイテム -->
</div>
2. 主軸の方向を設定
.flex-rowや.flex-columnクラスを使って、Flexアイテムの方向を設定します。
.flex-rowはフレックスアイテムを水平方向に並べます。
1
2
3
4
5
<div class="d-flex flex-row">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
.flex-columnはフレックスアイテムを垂直方向に並べます。
1
2
3
4
5
<div class="d-flex flex-column">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
3. アイテムの配置調整
.justify-content-{value}クラスで、アイテムを水平方向に配置します。{value}には start（デフォルト）、end、center、between、around、evenlyが使用できます。
1
2
3
4
5
6
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
.align-items-{value}クラスで、アイテムを垂直方向に配置します。{value}には start、end、center、baseline、stretch(デフォルト)
が使用できます。
1
2
3
4
5
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
startとbaselineは似ているように見えますが、実際には異なる挙動を示します。startはアイテムの上端が揃いますが、テキストのベースラインは揃いません。一方、baselineを使用した場合、フォントサイズが異なってもテキストのベースラインが揃うため、テキストが一直線状に配置されます。
4. 個々のアイテムの配置調整
.align-self-{value}クラスで、個々のフレックスアイテムの垂直方向の配置を調整します。{value}にはstart、end、center、baseline、stretch(デフォルト)が使用できます。
1
2
3
4
5
<div class="d-flex align-items-start">
<div class="align-self-end">
<!-- このアイテムだけが垂直方向の下に配置されます -->
</div>
</div>
5. レスポンシブでの調整
ブレークポイントをクラス内で指定することで、デバイスの幅によってレイアウトを変更させることができます。
1
2
3
<div class="d-flex flex-column flex-sm-row">
<!-- スモールデバイス以上ではアイテムが水平方向に、それ以下では垂直方向に配置されます -->
</div>
Components
コンポーネントにはボタン、フォーム、ナビゲーションバーなど、ウェブページを構成するさまざまな要素があります。これらは、デザインと機能性を備え、それぞれが特定の目的を果たすように作られています。
ユーザーはBootstarpで用意されているコンポーネントを組み合わせることで、簡単にデザイン性の優れたサイトを作成することができるのです。それではよく使われるコンポーネントを紹介していきます。
Navbar
ナビゲーションバーのコンポーネントです。ブランド名、ナビゲーションリンク、フォームなどを含めることができます。
以下のコードで上の画像のナビゲーションバーを作成できます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<nav class="navbar navbar-expand-md bg-primary-subtle">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
1. 折り畳まれる画面サイズの指定
<nav class="navbar navbar-expand-lg bg-body-tertiary">で囲むとナビゲーションバーを作成できます。.navbar-expand-mdクラスは、画面が768pxより大きいデバイスではナビゲーションリンクが展開され、768px以下のデバイスではハンバーガーメニューとして折り畳まれます。mdの部分は折り畳まれる画面サイズを指定します。
詳しい指定方法はBreakpointを参照して下さい。
lgの時
mdの時
2. ナビゲーションバーの背景色を指定
<nav class="navbar navbar-expand-md bg-primary-subtle">のbg-primary-subtleの部分はナビゲーションバーの背景色を指定しています。
指定方法は背景色を参照して下さい。
3. プロジェクト名を指定
.navbar-brandはプロジェクト名が入ります。
4. ナビゲーションリンクの作成
<ul class="navbar-nav">の中に<li class="nav-item">としてナビゲーションリンクを作成します。
Buttons
Buttonsコンポーネントは、ウェブサイトに様々なスタイルとサイズのボタンを追加できます。
基本的なボタンは.btnクラスを使用します。
1
<button type="button" class="btn">基本的なボタン</button>
.btnと.btn-*をセットで使うと*の箇所にスタイルを指定することでボタンにスタイルを追加することができます。
1
<button type="button" class="btn btn-primary">Primary</button>
See the Pen bootstrap_btn_01 by miyajima yuya (@pikawaka) on CodePen.
また、btn-outline-*に置き換えることでボタンの背景画像や色をすべて取り除くことができます。
1
<button type="button" class="btn btn-outline-primary">Primary</button>
ボタンのサイズはbtn-lgやbtn-smとすることで変更することができます。
1
2
3
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Normal button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button>要素にdisabledを追加するとボタンを非アクティブ状態にすることができます。
1
2
<button type="button" class="btn btn-primary">有効ボタン</button>
<button type="button" class="btn btn-primary" disabled>無効ボタン</button>
Card
コンテンツやアクションをグループ化するためのコンポーネントです。カードは画像、テキスト、リスト、リンクなど様々な要素を含むことができます。
1
2
3
4
5
6
7
8
9
<div class="card" style="width: 18rem;">
<img src="pikka.jpg" class="card-img-top" alt="...">
<h5 class="card-title">タイトル</h5>
<h6 class="card-subtitle">カードサブタイトル</h6>
<p class="card-text">テキストテキストテキストテキストテキストテキストテキスト</p>
<a href="#" class="card-link">リンク</a>
<button class="btn btn-primary">ボタン</button>
</div>
</div>
基本的なカードは以下のように作成します。
1. カードコンテナ
カードは..cardクラスを持つ<div>で始まります。これがカードのコンテナとなります。
1
2
3
<div class="card">
<!-- カードの内容 -->
</div>
2. カードのイメージ
画像に.card-img-topクラスを使用するとカードの上部に画像を表示させることができます。
1
2
3
<div class="card">
<img src="..." class="card-img-top" alt="...">
</div>
3. カードのボディ
カードのコンテンツは.card-bodyクラスを持つ<div>内に配置されます。テキスト、リスト、ボタンなど、カードの主要なコンテンツはここに入れます。
カードタイトルは<h*>タグに.card-titleを適用します サブタイトルは、<h*>タグに.card-subtitleを適用します。。<a>タグに.card-linkを適用するとリンクが追加されます。
1
2
3
4
5
6
7
8
9
<div class="card">
<div class="card-body">
<h5 class="card-title">カードのタイトル</h5>
<h6 class="card-subtitle">カードサブタイトル</h6>
<p class="card-text">カードのテキスト</p>
<a href="#" class="card-link">カードのリンク</a>
<button class="btn btn-primary">ボタン</button>
</div>
</div>
4. ヘッダーとフッター
.card-headerクラスを持つ<div>を使用して、カードのヘッダーを、.card-footerクラスを持つ<div>を使用して、カードのフッターを追加できます。
1
2
3
4
5
6
7
8
9
10
11
12
<div class="card" style="width: 18rem;">
<div class="card-header">
ヘッダー
</div>
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<p class="card-text">テキストテキストテキストテキスト</p>
</div>
<div class="card-footer">
フッター
</div>
</div>
Alerts
ユーザーにメッセージを通知するためのアラートのコンポーネントです。
アラートは .alertクラスと、スタイルを示す .alert-{color}クラスを持つ <div>要素で作成します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="alert alert-primary" role="alert">
primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
アラート内のテキストにリンクを含めたい場合は、リンクに .alert-linkクラスを追加します。
1
2
3
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
アラートのJavaScriptプラグインを使用すると、アラートインラインを消すことができます。そのためにはBootstrapのJavaScriptを導入している必要があります。
アラートを消すにはアラートに alert-dismissibleクラスを追加し、クローズボタン (<button> タグ) を含めます。このボタンにはdata-dismiss="alert"属性を設定します。
1
2
3
4
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Dropdowns
Dropdownsコンポーネントは、ユーザーがクリックまたはホバーすると表示される隠れたリストを持つドロップダウンメニューを作成するために使用されます。このコンポーネントは、ナビゲーションバー、タブ、ボタンなどと組み合わせて利用されることが多いです。以下にDropdownsコンポーネントの使い方を詳しく解説します。
※ドロップダウンはBootstrapのJavaScriptを導入している必要があります。
1. ドロップダウンコンテナの作成
ドロップダウンコンテナを作成するため.dropdownクラスを持つ<div>を作成します。コンテナにはトリガーとなるボタンやリンク、ドロップダウンメニューが入ります。
1
2
3
4
<div class="dropdown">
<!-- トリガー -->
<!-- ドロップダウンメニュー -->
</div>
2. ドロップダウンのトリガーの作成
ドロップダウンメニューを開くためのトリガーとなるボタンまたはリンクを作成します。これには、.dropdown-toggleクラスとdata-bs-toggle="dropdown"属性を追加します。
1
2
3
4
5
6
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<!-- ドロップダウンメニュー -->
</div>
3. ドロップダウンメニューの作成
.dropdown-menuクラスを持つ<div>を作成し、メニュー項目を<a>タグで追加します。メニュー項目には.dropdown-itemクラスを使用します。
1
2
3
4
5
6
7
8
9
10
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
すると以下のドロップダウンを作成することができます。
See the Pen
bootstrap_doropdown_01 by miyajima yuya (@pikawaka)
on CodePen.
<div>の代わりに<ul>を使い、<li>でメニュー項目を作成することもできます。
1
2
3
4
5
6
7
8
9
10
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
4. その他の使い方
ドロップダウンということでメニューは下に表示されますが、上、右、左にも表示させることができます。その際は、コンテナのクラス名を.dropdownから以下に変更します。
※表示する余白がない場合は逆方向に表示されます
| クラス名 | 表示方向 |
|---|---|
| dropup | 上向き |
| dropstart | 左向き |
| dropend | 右向き |
またデフォルトだとドロップダウンメニューはトリガーの左端から表示されますが、コンテナのクラス名を.dropudownから.dropdown-centerに変更することでトリガーの中央に配置することもできます。
1
2
3
4
5
6
7
8
9
10
<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Carousel
カルーセルは画像、テキスト、あるいはその他のコンテンツを含むスライドを作成し、ユーザーが手動または自動でスライドを切り替えられるコンポーネントです。以下に基本的な使い方を解説します。
※カルーセルはBootstrapのJavaScriptを導入している必要があります。
1. カルーセルの基本的な例
以下のコードは3つのスライドをもつ基本的なカルーセルです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="carouselExample" class="carousel slide">
<!-- インジゲーター -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<!-- スライド -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="image3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<!-- 前後のコントロール-->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
2. カルーセルコンテナ
まず.carouselと.slideクラスを使用し、カルーセルコンテナを作成します。また、各ボタンを作成するカルーセルと紐づけるためのidを定義します。また、data-bs-ride="carousel"属性を付けることでカルーセルの自動再生を有効にすることができます。
1
2
3
4
5
<div id="カルーセルのid" class="carousel slide" data-bs-ride="carousel">
<!-- インジケーター -->
<!-- スライド -->
<!-- コントロール -->
</div>
carousel-fadeを追加するとスライドの代わりにフェード遷移でスライドをアニメーションさせることができます。
1
2
3
4
5
<div id="カルーセルのid" class="carousel slide carousel-fade">
<!-- インジケーター -->
<!-- スライド -->
<!-- コントロール -->
</div>
3. インジケーター
インジゲーターは.carousel-indicatorsクラスを使用します。スライドの現在の位置を示し、任意のスライドに直接ジャンプするために使用します。省略も可能です。
data-bs-target属性にはカルーセルのidを指定し、data-bs-slide-to属性はジャンプ先のスライドのインデックス（0から始まる）を指定します。最初のスライドに対応するインジケーターにはclass="active"を付与します。
1
2
3
4
5
6
7
8
9
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" ></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" ></button>
</div>
<!-- スライド -->
<!-- コントロール -->
</div>
4. スライド
スライドは.carousel-innerクラスを使用します。.carousel-itemクラスが各スライドを表します。最初のスライドには.activeクラスを追加して、カルーセルがロードされた時に表示されます。class="d-block w-100"属性を使用することで、画像はカルーセルの幅に合わせて表示されます。カルーセルの幅に合わせないと、インジケーターやコントロールがうまく表示されません。
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="carousel-inner">
<!-- インジケーター -->
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="...">
</div>
<!-- コントロール -->
</div>
スライドには画像だけではくテキストなどその他のHTMLコンテンツを配置することもできます。その場合は、<div>や<h2>、<p>などを使います。
5. コントロール
コントロールは、ユーザーが手動でスライド間を移動するための前後のナビゲーションリンクです。これらのコントロールを使って、ユーザーは前のスライドに戻ったり、次のスライドに進んだりすることができます。
.carousel-control-prevと.carousel-control-nextのクラスは、コントロールのスタイリングと位置を定義します。prevクラスは前へ移動するコントロールに、nextクラスは次へ移動するコントロールに使用されます。
.data-bs-target属性は、インジゲーターの時と同様にコントロールが操作するカルーセルのidを指定します。カルーセルのHTML要素のidと一致させる必要があります。
data-bs-slide="prev"とdata-bs-slide="next"の属性は、コントロールがクリックされたときに前のスライドへ移動するか、次のスライドへ移動するかを指示します。
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="carouselExample" class="carousel slide">
<!-- インジゲーター -->
<!-- スライド -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>と<span class="carousel-control-next-icon" aria-hidden="true"></span>はコントロールに視覚的なアイコンを提供します。aria-hidden="true"属性は、アイコンがスクリーンリーダーによって読み上げられないようにします。
<span class="visually-hidden">Previous</span>と<span class="visually-hidden">Next</span>のスパンは、スクリーンリーダー用にコントロールの目的をテキストで提供しますが、視覚的には非表示になります。
Content
ウェブページ上でコンテンツ（内容）を表示するための基本的なHTML要素にスタイルを適用するクラスとコンポーネントを提供します。テキスト、画像、テーブル、リストなど、ウェブページの主要なコンテンツを整形するために使用されます。
Images
画像に関するスタイルを提供します。画像をレスポンシブにしたり、丸みを帯びた角を設定したり、サムネイルとして表示するためのクラスが含まれています。
1. レスポンシブな画像
<img>要素に.img-fluidクラスを使用すると親の幅によって拡大縮小するレスポンシブな画像を表示することができます。
1
<img src="..." class="img-fluid" alt="...">
2. 画像の丸み
<img>要素に.roundedクラスを使用すると、画像の角を丸くすることができます。さらに、.rounded-3や .rounded-5のように、具体的な数値をクラス名に追加して丸みの大きさを調整することもできます。また、.rounded-circleを使うと画像を完全な円形に、また長方形の画像に.rounded-pillを使用することで画像の両端を丸くすることができます。
1
2
3
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
See the Pen bootstrap_images_01 by miyajima yuya (@pikawaka) on CodePen.
また、.rounded-{side}クラスを使用して、それぞれの辺の両方の角だけ丸くすることができます。
丸みの大きさを調整したい場合は、.rounded-{side}-{size}の形式を使用します。例えば、.rounded-top-4を使えば、上側の角の丸みをサイズ4に設定することができます。
※1つの角だけ丸くするクラスは用意されていません。
1
2
3
4
5
6
7
8
9
10
11
<!-- 上側の角の2つに丸みを加える -->
<img src="..." class="rounded-top" alt="...">
<!-- 下側の角の2つに丸みを加える -->
<img src="..." class="rounded-bottom" alt="...">
<!-- 左側の角の2つに丸みを加える -->
<img src="..." class="rounded-start" alt="...">
<!-- 右側の角の2つに丸みを加える -->
<img src="..." class="rounded-end" alt="...">
3. 画像のサムネイル
<img>要素に.img-thumbnailクラスを使用すると、画像に枠線とパディングを追加し、サムネイルのような外観にすることができます。
1
<img src="..." class="img-thumbnail" alt="...">
4. 画像の配置
画像をテキストや他の要素の中に配置する場合、.float-*クラス（例えば.float-startや.float-end）を使用して画像を左右に浮かせることができます。また、.mx-autoと.d-blockを組み合わせて、画像を中央に配置することも可能です。
1
2
3
4
5
6
<!-- 画像を左に配置 -->
<img src="..." class="float-start" alt="...">
<!-- 画像を右に配置 -->
<img src="..." class="float-end" alt="...">
<!-- 画像を中央に配置 -->
<img src="..." class="mx-auto d-block" alt="...">
ただし、floatを使用すると、画像がテキストや他の要素から「浮いた」状態になり、レイアウトが予期せぬ形で崩れることがあります。このような場合、FlexboxやGridを使用すると、より現代的で柔軟なレイアウトを実現できます。Flexboxを使えば、以下のように画像を左右に配置することが簡単になります。
1
2
3
4
5
6
7
8
9
<!-- 画像を左に配置 -->
<div class="d-flex justify-content-start">
<img src="..." alt="...">
</div>
<!-- 画像を右に配置 -->
<div class="d-flex justify-content-end">
<img src="..." alt="...">
</div>
Tables
データを整理して表示するためのテーブルを簡単に作成し、スタイリングすることができます。以下に、Tablesコンポーネントの詳しい使い方について解説します。
1. 基本的なテーブル
<table>タグに.tableクラスを使用します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
2. ストライプ状のテーブル
<table>タグに.table-stripedクラスを追加すると、行がストライプ状になり、視覚的に区別しやすくなります。
1
<table class="table table-striped">
3. 枠線付きのテーブル
<table>タグに.table-borderedクラスを追加すると、テーブルの各セルに枠線が表示されます。
1
<table class="table table-bordered">
4. ホバーエフェクトのあるテーブル
<table>タグに. table-hoverクラスを追加すると、マウスオーバー時に行の背景色が変化し、インタラクティブな感じになります。
1
<table class="table table-hover">
5. サイズの小さいテーブル
<table>タグに. table-smクラスを追加すると、セルのパディングが小さくなり、コンパクトなテーブルになります。
1
<table class="table table-sm">
6. レスポンシブテーブル
.table-responsiveクラスを使ってテーブルをラップすると、テーブルが親コンテナに収まるようになり、必要に応じて水平スクロールが可能になります。
1
2
3
4
5
<div class="table-responsive">
<table class="table">
<!-- テーブルの内容 -->
</table>
</div>
7. 色違いのテーブル
<table>タグに.table-{color}クラスを追加すると、テーブルの色を変更することができます。{color}には以下の名前を使用します。
- .table-primary
- .table-secondary
- .table-success
- .table-danger
- .table-warning
- .table-info
- .table-light
- .table-dark
See the Pen bootstrap_table_01 by miyajima yuya (@pikawaka) on CodePen.
Forms
ウェブフォームを簡単に作成し、カスタマイズするためのクラスと構造を提供します。以下にFormsコンポーネントの詳しい使い方について解説します。
form control
テキストフィールド、選択リスト、チェックボックス、ラジオボタンなど、様々な種類のフォームコントロールを.form-controlクラスを使ってスタイリングできます。
1
2
3
4
5
6
7
8
9
10
11
<form>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
</textarea>
</div>
</form>
See the Pen bootstrap_form_01 by miyajima yuya (@pikawaka) on CodePen.
.form-controlに.form-control-lgや.form-control-smを追加して高さを設定できます。
1
2
3
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
Select
セレクトボックスの<select>に.form-selectクラスを使用するとボックス内に矢印を表示させることができます。
1
2
3
4
5
6
7
8
9
<select>
<option value="1">何もつけない時</option>
</select>
<select class="form-control">
<option value="1">form-controlの時</option>
</select>
<select class="form-select">
<option value="1">form-selectの時</option>
</select>
Checks & radios
チェックボックスとラジオボタンは.form-checkクラスを使ってスタイリングします。<input>タグには.form-check-inputクラスを、<label>タグには.form-check-label`クラスを使用します。
1
2
3
4
5
6
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
ラジオボタンは同じname属性を持つようグループ化することでそのグループ内で1つだけ選択できるようになります。
1
2
3
4
5
6
7
8
9
10
11
12
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadio1" value="option1">
<label class="form-check-label" for="exampleRadio1">
Radio option 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadio2" value="option2">
<label class="form-check-label" for="exampleRadio2">
Radio option 2
</label>
</div>
Floating labels
フローティングラベル（浮かび上がるラベル）を作成するために使用されます。フローティングラベルは、ユーザーがフォームフィールドに入力を始めると、ラベル（通常はフィールド内に表示される）が小さくなり、フィールドの上部に移動するデザインパターンです。これにより、フィールドが埋められた後も、ユーザーはどの情報がどのフィールドに入力されたかを容易に確認することができます。
フローティングラベルはラベルと入力フォームをラップする要素に.form-floatingクラスを利用します。
1
2
3
4
5
6
7
8
9
10
<form>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
</form>
Validation
フォーム内の入力値をチェックし、適切なフィードバックをユーザーに提供するための機能です。基本的なバリデーションの設定方法を解説します。
1. フォームにnovalidateを追加
<form>要素にnovalidateを追加することで、ブラウザのデフォルトのバリデーションを無効にします。
1
<form novalidate>
2. バリデーション用のCSSクラスを追加
.needs-validationクラスを<form>要素に追加し、各入力要素に.form-controlクラスを適用します。
1
2
3
4
5
6
7
<form class="needs-validation" novalidate>
<label class="form-label" for="username">名前:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="username" required>
<label class="form-label" for="pwd">パスワード:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
3. バリデーションフィードバックを設定
入力が無効な場合に表示するメッセージを.invalid-feedbackクラスを持つ要素に記述します。
1
2
3
4
5
6
7
8
9
<form class="needs-validation" novalidate>
<label class="form-label" for="username">名前:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="username" required>
<div class="invalid-feedback">名前を入力して下さい。</div>
<label class="form-label" for="pwd">パスワード:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="invalid-feedback">パスワードを入力して下さい。</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
4. JavaScriptでバリデーションを有効化
フォームを送信する際にバリデーションをトリガーするために、以下のJavaScriptを使用します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
Bootstrap Icons
Bootstrap Iconsは、Bootstrapフレームワークに付属する公式のアイコンライブラリで、数百のアイコンを提供しています。これらのアイコンはSVG形式で提供され、ウェブプロジェクトに簡単に組み込むことができます。以下に使い方を解説します。
1. 導入方法
一般的にはCDNを使用して導入します。以下のリンクをHTMLファイルの<head>セクション内に追加します。
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
2. アイコンの埋め込み方法
アイコンファイルをプロジェクトに追加したら、次にHTMLにアイコンを埋め込みます。アイコンは<i>タグまたは<span>タグを使用して追加することができます。アイコンの名前はクラス名として指定します。
クラス名は公式サイトで調べます。
1
2
<i class="bi クラス名"></i>
<span class="bi クラス名"></span>
例えば虫メガネのアイコンを使いたい場合は、searchというアイコンを使います。詳細ページにアイコンのクラス名が載っているので、この場合はbi-searchというクラス名を使用します。
1
<i class="bi bi-search"></i>
すると虫メガネのアイコンを表示させることができます。
3. 見た目の変更
アイコンの見た目を変えるには直接アイコンクラスにスタイルを適用させます。
1
<i class="bi bi-search" style="font-size: 2rem; color: blue;"></i>
まとめ
Bootstrapは、迅速なレスポンシブウェブデザインを実現するための強力なフレームワークです。その使いやすいコンポーネントとユーティリティクラスを駆使すれば、開発の手間を省きつつ、一貫性とモダンなスタイルのウェブサイトを短時間で構築できます。この記事を通じて、Bootstrapでデザインと開発の効率を向上させましょう。
この記事のまとめ
- BootstrapはCSSのフレームワークです。
- CSSの知識がなくても簡単に綺麗なデザインのサイトを作ることができます。
