目次
- １．Bootstrapとは
- ２．使い方
- ３．Containers（コンテナ）
- ４．Grid system （グリッドシステム）
- ５．Gutters（ガター）
- ６．Typography（タイポグラフィ）
- ７．Tables（テーブル）
- ８．Figures（図）
- ９．Forms（フォーム）
- １０．Accordion（アコーディオン）
- １１．その他のクラス
- １２．CSSの基本知識
１．Bootstrapとは
BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。（引用：Wiki）
主にHTML要素のCSSフレームワーク（デザインテンプレート）として使われ、class属性に指定するだけで見やすいデザインを作成できる。また、ボタンやjavascriptの拡張機能がHTMLおよびCSSベースのデザインテンプレートとして用意されている。
Bootstrapの日本語サイト
https://getbootstrap.jp/
２．使い方
（１）CDNを使ったBootstrapの導入
Bootstrapを使うためにインストールする方法とCDN（Content Delivery Network）からスクリプトファイルを読み込む方法があります。ここでは、CDNを使う方法について記載します。
①CSS
<head>内に他のスタイルシートよりも先に入れます。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">②JS
ドロップダウン、ポップオーバー、ツールチップを利用する際はpopper.jsが必要になります。
最初にpopoer.js を読み込み、次にJavaScriptプラグインを読み込みます。
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>（２）基本テンプレート
sample1.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Bootstrapのページ</title>
</head>
<body>
<!-- ここに本文を置く -->
<h1 class="bg-secondary text-white display-4 px-3">Bootstrap</h1>
<div class="container">
<p>This is sample page.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>・Bootstrap は HTML5 doctype を使用する必要があります。 <!doctype html>
・レスポンシブ用メタタグを追加します。 <meta name=”viewport” content=”width=device-width, initial-scale=1″>
“viewport”は仮想の表示領域を設定する属性値で、”width=device-width”で閲覧している画面サイズに合わせてサイズ変更、”initial-scale=1″でページを表示したときの初期倍率を指定できます。
３．Containers (コンテナ)
コンテナはBootstrap基本的なレイアウト要素で、コンテナの中にBootstrapの各要素を記述することで、デバイスのサイズに応じてコンテンツに適切な余白を与え整列させることができます。containerはウィンドウの横幅に応じて段階的に横幅が変動し、各レスポンシブブレークポイントで 幅が設定されます。ブレークポイントはデフォルトの設定では、Extra small<576px、Small≥576px、Medium≥768px、Large
≥992px、X-Large≥1200px、XX-Large≥1400pxとなっています。
Bootstrapには.container、container-fluid、.container-{breakpoint} の3つの異なるコンテナがあり、下図のように幅が変わります。
.containerクラスを設定したときの例を示します。
<h1 class="bg-secondary text-white display-1 px-3">Bootstrap</h1>
<div class="container bg-info">
<p>This is sample page.</p>
</div>
.container-fluidクラスを設定したときの例を示します。
横幅はどのデバイス（画面幅）でも画面幅全体になります。
４．Grid system (グリッドシステム)
（１）カラム数を指定しないで分割
グリッドシステムは、一連のコンテナ、行、列を使用してコンテンツをレイアウトします。
下記の例ではコンテナを３分割します。col-sm（Small≥576px）では幅が576px未満になると３行の100%表示になります。
sample2.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Bootstrapのページ</title>
</head>
<body>
<!-- ここに本文を置く -->
<div class="container bg-info">
<div class="row">
<div class="col-sm bg-primary">
One of three columns
</div>
<div class="col-sm bg-secondary">
One of three columns
</div>
<div class="col-sm bg-success">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
・container、row、colクラスのレイアウトの役割
containerクラスはコンテンツの器となります。
rowクラスは行をまとめる役割をします。
colクラスはブレークポイント（smなど）とカラム数を指定することができます。カラム数は画面を12分割した列の数です。
（２）カラム数を指定して分割
（３）ブレークポイントの異なるカラムを設定
”.col-sm”、”.col-lg”のブレークポイントの異なる２つのクラスを指定した例です。
sample4.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Bootstrapのページ</title>
</head>
<body>
<!-- ここに本文を置く -->
<div class="container bg-info">
<div class="row">
<div class="col-sm col-lg bg-primary">
One of three columns
</div>
<div class="col-sm col-lg bg-secondary">
One of three columns
</div>
<div class="col-sm col-lg bg-success">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
５．Gutters (ガター)
ガターはカラム間にパディングを入れます。
.gx-クラスを使うと水平方向のガター、.gy-クラスを使うと垂直方向のガター、.g-*クラスは水平・垂直ガターを設定することができます。
sample5.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Bootstrapのページ</title>
</head>
<body>
<!-- ここに本文を置く -->
<div class="container overflow-hidden bg-info">
<div class="row g-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
６．Typography (タイポグラフィ)
（１）Headings
HTMLの見出し<h1>から<h6>が利用できます。または、.h1 から .h6 クラスも利用できます。 <h1>sample text</h1>
<p class=”h1″>sample text</p>
（２）Display headings
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>（３）Lead
.leadを追加して目立たせることができます。
<p class="lead">
This is a lead paragraph.
</p>
（４）Inline text elements
一般的なインラインのためのスタイリング要素です。
<!-- Inline text elements -->
<p>mark tag to <mark>highlight</mark> text.</p>
<p>del tag to <del>This line of text is meant to be treated as deleted text.</del></p>
<p>s tag to <s>This line of text is meant to be treated as no longer accurate.</s></p>
<p>ins tag to <ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p>u tag to <u>This line of text will render as underlined.</u></p>
<p>small tag to <small>This line of text is meant to be treated as fine print.</small></p>
<p>strong tag to <strong>This line rendered as bold text.</strong></p>
<p>em tag to <em>This line rendered as italicized text.</em></p>
（５）Abbreviations
要素で略語を表し、title=”…” で指定すると略語が点線の下線付きで表示され、ホバーしたときtitle=”…” で指定した内容が表示されます。文字サイズを少し小さくするときは.initialism を追加します。
<!-- Abbreviations -->
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
７．Tables (テーブル)
に .tableクラスを追加することでbootstrap の標準のテーブルとなります。
（１）基本テーブル
sample9.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Bootstrapのページ</title>
</head>
<body>
<!-- Tables (テーブル) -->
<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>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
（２）zebra-striping
zebra-striping を追加するには、.tableに.table-stripedを追加します。
sample10.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Bootstrapのページ</title>
</head>
<body>
<!-- Tables (テーブル) -->
<table class="table table-striped">
<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>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
（３）Hoverable rows
テーブル内でマウスオーバー行をホバー状態にするためには.tableに.table-hoverを追加します。
sample11.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Bootstrapのページ</title>
</head>
<body>
<!-- Tables (テーブル) -->
<table class="table table-hover">
<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>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
（４）その他のテーブルクラス
・ .table-bordered
テーブルとセルの四方の境界線をつける
・.table-borderless
テーブルとセルの四方の境界線を削除
・ .table-sm
セルの padding を半分にしてテーブルをコンパクトにする
・.table-responsive
.table を .table-responsiveでラップすることで、すべてのビューポートに対応したレスポンシブテーブルにすることができます。
sample12.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Bootstrapのページ</title>
</head>
<body>
<!-- Tables (テーブル) -->
<div class="table-responsive">
<table class="table">
<tr>
<th>#</th>
<th>1+++</th>
<th>2+++</th>
<th>3+++</th>
<th>4+++</th>
<th>5+++</th>
<th>6+++</th>
<th>7+++</th>
<th>8+++</th>
<th>9+++</th>
<th>10++</th>
</tr>
<tr>
<td>1</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<th>e</th>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>g</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
８．Figures (図)
.figure-captionクラス
.figure-caption クラスを使用して、画像に関連するテキストを表示します。
sample13.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Bootstrapのページ</title>
</head>
<body>
<!-- Figures (図) -->
<figure class="figure">
<img src="sample13.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
９．Forms (フォーム)
.form-textでフォームに関連するテキストを表示できます。
sample14.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Bootstrapのページ</title>
</head>
<body>
<!-- Figures (図) -->
<div class="container bg-info">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
１０．Accordion(アコーディオン)
sample15.html
（引用：Bootstrap v5.0のﾄﾞｷｭﾒﾝﾄ）
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Bootstrapのページ</title>
</head>
<body>
<!-- Accordion(アコーディオン) -->
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
１１．その他のクラス
様々なサンプルを下記からダウンロードできます。
https://getbootstrap.jp/docs/5.0/getting-started/download/
１２．CSSの基本知識
（１）Webページのスタイルの適用方法
CSSをHTMLに組み込む方法は、①HTMLのタグの中に直接、style属性でCSSを記述する方法、②内部参照（HTMLのhead内部にCSSを書き込む方法）、③外部参照（CSSファイルを作成しHTMLとリンクさせる方法）の３つがあります。
②、または③の場合、セレクタ（HTMLタグ名、クラス名、id名）に対してスタイルを定義します。
（２）メディアクエリ
Webページのスタイルを記述するCSSの仕様の一つで、表示された画面環境に応じて適用するスタイルを切り替える機能です。
下記の例では、画面サイズが480pxまではここで指定したスタイルシートが使われます。
①link要素として指定する場合
<link rel="stylesheet" href="style.css" media="screen and (max-width:480px)">②スタイルシート（CSSファイル）で指定する場合
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む */
}（３）Sass（Syntactically Awesome StyleSheet）
CSSの拡張言語のことで、Bootstorapでも使われている
（４）レイアウト
HTMLページのレイアウトには大きく分けてフレックスボックスとグリッドレイアウトがあります。
①フレックスボックス
一次元のレイアウトモデルで、親要素となるコンテナとその中に入るアイテムから成ります。コンテナのタグにdisplay: flexを定義します。
②グリッド
二次元レイアウトモデルで、アイテムをタグで囲んで、そのタグにdisplay: grid、親要素の列（grid-templete-columns）と行（grid-template-rows）を定義します。
（本サイト内のページ）
CSSの基本
（参考文献）
・Bootstrap v5.0のﾄﾞｷｭﾒﾝﾄ
https://getbootstrap.jp/
サンプルプログラムの一部は、Bootstrap v5.0のﾄﾞｷｭﾒﾝﾄから引用しています。
The end