（１）Bootstrapを使う
Bootstrapのサイトへ行き、最新バージョンを使う
今回はCDNを使う
cssのcdnはheaderに貼り付ける
動きなども使うのであればjavascriptのcdnをbodyタグの最後の直前に貼り付ける
なお、Bootstrapのサイトにあるtemplateを使うのが便利（使う際は、lang属性をjpに変更）*以下はtemplate
.html
<!doctype html>
<html lang="jp">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.
com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha38
4-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN
5t9UJ0Z" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.
min.js"integrity="sha384DfXdz2htPH0lsSSs5nCTpuj/zy4C
+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="
anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1
/dist/umd/popper.min.js" integrity="sha3849/reFTGAW83EW2RDu
2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"crossorigin
="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.
2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSd
UtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin
="anonymous"></script>
</body>
</html>
（２）テキスト、色、背景など
.html
<body>
<h1>Hello, world!</h1>
<!-- bootstarpでh１を小さく表示（１から６間で） -->
<h1 class="h6">Hello, world!</h1>
<!-- h1をさらに大きく表示 （１から４まで）-->
<h1 class="display-1">Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
<!-- 文章を目立たせる -->
<p class="lead">Lorem ipsum dolor sit amet, consectetur</p>
<p>ちょこちょこ</p>
<!-- 右寄せのテキストにする -->
<p class="text-right">ちょこちょこ</p>
<!-- 中央へ寄せる -->
<p class="text-center">ちょこちょこ</p>
<!-- 左へ寄せる -->
<p class="text-left">ちょこちょこ</p>
<br>
<!-- sm,md,lg,xlでレスポンジブルデザインとする -->
<!-- extra small 576px未満
small 576px以上768px未満
medium 768px以上992px未満
large 992px以上1200px未満
extra large 1200px以上 -->
<p class="text-sm-right">右寄せテキスト、small以上</p>
<p class="text-md-right">右寄せテキスト、medium以上</p>
<p class="text-lg-right">右寄せテキスト、large以上</p>
<p class="text-xl-right">右寄せテキスト、extra-large以上</p>
<hr>
<p class="text-sm-center">中央テキスト、small以上</p>
<p class="text-md-center">中央テキスト、medium以上</p>
<p class="text-lg-center">中央テキスト、large以上</p>
<p class="text-xl-center">中央テキスト、extra-large以上</p>
<hr>
<p class="text-sm-left">左寄せテキスト、small以上</p>
<p class="text-md-left">左寄せテキスト、medium以上</p>
<p class="text-lg-left">左寄せテキスト、large以上</p>
<p class="text-xl-left">左寄せテキスト、extra-large以上</p>
<br>
<!-- 縦の上下幅を変更する -->
<span class="align-baseline">太郎</span>
<span class="align-top">太郎</span>
<span class="align-bottom">太郎</span>
<span class="align-middle">太郎</span>
<span class="align-text-top">太郎</span>
<span class="align-text-bottom">太郎</span>
<!-- h1はブロック要素のため幅っぱいに背景色 -->
<h1 class="bg-primary">バックグラウンド</h1>
<!-- h1要素にインライン要素を加えて背景色（文字の箇所のみ背景色) -->
<h1 class="bg-primary d-inline">バックグラウンド</h1>
<!-- div要素もブロック要素のため幅いっぱいに背景色 -->
<div class="bg-warning">バックグラウンド</div>
<!-- div要素にインライン要素を加えて背景色（文字の箇所のみ背景色） -->
<div class="bg-warning d-inline">バックグラウンド</div>
<!--span要素はインライン要素のため、文字の箇所のみ背景色 -->
<span class="bg-success">バックグラウンド</span>
<!-- span要素にブロック要素を加えて背景色（幅いっぱい背景色) -->
<span class="bg-success d-block">バックグラウンド</span>
<!-- div要素はブロック要素のため、横に並べることができない（縦になる）
が、以下のようにすると横に並べることができる -->
<div class="bg-warning d-inline">バックグラウンド</div>
<div class="bg-warning d-inline">バックグラウンド</div>
<!-- divはブロック要素のため、インライン要素のpのように右寄せ、左寄
せは以下のようにする -->
<div class="float--left">divの左寄せ</div>
<br>
<div class="float-right">divの右寄せ</div>
<br>
<div class="float-sm-right">divの右寄せ、small以上</div>
<br>
<div class="float-md-right">divの右寄せ,medium以上</div>
<br>
<div class="float-lg-right">divの右寄せ,large以上</div>
<br>
<div class="float-xl-right">divの右寄せ,extra large以上</div>
<div class="clearfix bg-success">
<button class="btn btn-primary float-right">右のボタン
</button>
<button class="btn btn-primary float-left">左のボタン
</button>
</div>
<!-- 常に最上部に位置付ける -->
<h3 class="fixed-top">最上部に位置付ける</h3>
<!-- 常に最下部に位置付ける -->
<h3 class="fixed-bottom">最下部に位置付ける</h3>
<!-- textの色について -->
<p class="text-primary">textをprimaryにする（水色）</p>
<p class="text-secondary">textをsecondaryにする（灰色）</p>
<p class="text-success">textをsuccessにする（緑色）</p>
<p class="text-warning">textをwarningにする（黄色）</p>
<p class="text-danger">textをdangerにする（赤色）</p>
<p class="text-light">textをlightにする（白色）</p>
<!-- 背景色について -->
<div class="bg-primary">背景を水色にする</div>
<div class="bg-secondary">背景を灰色にする</div>
<div class="bg-success">背景を緑色にする</div>
<div class="bg-warning">背景を黄色にする</div>
<div class="bg-danger">背景を赤色にする</div>
<div class="bg-light">背景を白色にする</div>
見えなくする
<p class="invisible">Hello</p>
<!-- marginとpadding
m - margin
p - padding
b - bottom
t - top
r - right
l - left
x - x軸左右
y - y軸上下
autoは可能な限り広げる
w- width
h -height
25,50,75,100%,auto -->
<!-- 以下はmb、mtの使用例 -->
<p class="bg-success">Margin</p>
<p class="bg-success mb-0">Margin</p>
<p class="bg-success mt-1">Margin</p>
<!-- 以下はmr、mxの使用例 -->
<span class="bg-primary mr-5">margin</span>
<span class="bg-primary">margin</span>
<span class="bg-primary">margin</span>
<span class="bg-primary mx-2">margin</span>
<!-- 全方向にmarginを設定する場合はmとする -->
<p class="bg-primary m-5">margin</p>
<!-- paddingの例 -->
<h1 class="bg-warning pb-3">paddingを触る</h1>
<!-- 中央よせ -->
<div class="mx-auto bg-info" style="width: 200px;">中央に寄せる
</div>
<div class="mx-auto bg-info w-25">中央に寄せる</div>
<!-- 枠線を作る -->
<h1 class="border">ボーダー</h1>
<h1 class="border-top">ボーダー</h1>
<h1 class="border-bottom">ボーダー</h1>
<h1 class="border border-primary">ボーダー</h1>
<h1 class="border border-warning">ボーダー</h1>
<!-- 枠線の角を丸くする -->
<h1 class="border rounded">ボーダー</h1>
<!-- 枠線を全体的に丸くする -->
<h1 class="border rounded-circle">ボーダー</h1>
<h1 class="border rounded-circle border-danger w-25
text-center">ボーダー</h1>
</script>
</body>
（３）ボタン、ナブバー、リンク、リスト
.html
<!-- ボタンの種類 -->
<button type="button" class="btn btn-primary">青色</button>
<button type="button" class="btn btn-success">灰色</button>
<button type="button" class="btn btn-info">水色</button>
<button type="button" class="btn btn-warning">黄色</button>
<button type="button" class="btn btn-danger">赤色</button>
<button type="button" class="btn btn-light">白色</button>
<!-- リンク、インプット、サブミットをボタン化する -->
<a class="btn btn-primary" href="#" role="button">リンク</a>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-warning" type="submit" value="Submit">
<!-- アウトラインのボタン -->
<button class="btn btn-outline-primary" type="button">
ボタン</button>
<button class="btn btn-outline-warning" type="button">
ボタン</button>
<!-- 大きいボタンと小さいボタン -->
<button type="button" class="btn btn-primary btn-lg">
大きいボタン</button>
<button type="button" class="btn btn-primary btn-sm">
小さいボタン</button>
<!-- 横にボタンを連結する -->
<div class="btn-group">
<button class="btn btn-primary" type="button">左</button>
<button class="btn btn-warning" type="button">中央</button>
<button class="btn btn-primary" type="button">右</button>
</div>
<!-- 縦にボタンを連結する -->
<div class="btn-group-vertical">
<button class="btn btn-primary" type="button">上</button>
<button class="btn btn-warning" type="button">中央</button>
<button class="btn btn-primary" type="button">下</button>
</div>
<!-- ドロップダウンを作る -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle"
type="button" data-toggle="dropdown">
ドロップダウン
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">リンクその１</a>
<a class="dropdown-item" href="#">リンクその２</a>
<a class="dropdown-item" href="#">リンクその３</a>
</div>
</div>
<!-- navbar-expand-lgでlg以下の時にボタン表示、md、smにもできる -->
<nav class="navbar bg-light navbar-light navbar-expand-md">
<a class="navbar-brand" href="#">ナブゲーションバー</a>
<button class="navbar-toggler" data-toggle="collapse"
data-target="#navbarCC">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarCC" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">テスト１</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">テスト２</a>
</li>
<!-- テスト３はドロップダウンメニューを追加 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-
toggle="dropdown" href="#">テスト３</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
ドロップダウンメニュー</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- リンク集を作る（タブ状にする）左寄せ -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#">リンク１</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク２</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク３</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク４</a>
</li>
</ul>
<!-- リンク集を作る（タブ状にする）中央寄せ -->
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">リンク１</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク２</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク３</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク４</a>
</li>
</ul>
<!-- リンク集を作る（タブ状にする）右寄せ -->
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">リンク１</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク２</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク３</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク４</a>
</li>
</ul>
<!-- リンク集を作る（タブ状にする）幅いっぱい等分割 -->
<ul class="nav nav-tabs nav-fill">
<li class="nav-item">
<a class="nav-link" href="#">リンク１</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク２</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク３</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク４</a>
</li>
</ul>
<!-- リストを作る -->
<ul class="list-group">
<li class="list-group-item">リスト１</li>
<li class="list-group-item" >リスト２</li>
<li class="list-group-item" >リスト３</li>
<li class="list-group-item" >リスト４</li>
</ul>
<!-- リストを作る（リンク） -->
<div class="list-group">
<a class="list-group-item" href="#">リンク１</a>
<a class="list-group-item" href="#">リンク２</a>
<a class="list-group-item" href="#">リンク３</a>
</div>
<!-- リストを作る（背景色） -->
<ul class="list-group list-unstyled">
<li class="list-group-item">デフォルト</li>
<li class="list-group-item-primary">Primary</li>
<li class="list-group-item-secondary">Secondary</li>
<li class="list-group-item-success">Success</li>
<li class="list-group-item-info">Info</li>
</ul>
<!-- リストを作る（バッジ） -->
<ul class="list-group">
<li class="list-group-item">リストアイテム１</li>
<li class="list-group-item">リストアイテム２
<span class="badge badge-danger">チェック</span>
</li>
</ul>
<!-- どこのページか明らかにする -->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">ホーム</a>
</li>
<li class="breadcrumb-item">
<a href="#">コンテンツ１のページ</a>
</li>
<li class="breadcrumb-item">コンテンツ２のページ<li>
</ol>
（４）CSS要素など
.html
<body>
<!-- フォームを作る -->
<!-- コンテナクラスで囲む（いい感じにまとめる） -->
<div class="container">
<form>
<!-- インプットタグを作成する -->
<div>
<label for="name">名前</label>
<input class="form-control" type="text" id="name">
<!-- 大きめのフォントにする -->
<label for="name">名前</label>
<input class="form-control form-control-lg"
type="text" id="name">
<!-- 小さめのフォントにする -->
<label for="name">名前</label>
<input class="form-control form-control-sm"
type="text" id="name">
<!-- 説明文を加える -->
<label for="name">名前</label>
<input class="form-control" type="text" id=
"name" placeholder="名前">
<small class="form-text text-muted">５文字以内にして
ください</small>
</div>
<!-- セレクトボタンを作成する -->
<div class="form-group">
<label for="gender">性別</label>
<select name="gender" class="form-control" id=
"gender">
<option>おとこ</option>
<option>おんな</option>
</select>
</div>
<!-- ファイルアップロード（その１） -->
<div class="form-group">
<label for="file">ファイル選択</label>
<input type="file" id="file" class="form-
control-file">
<small>最大3MB</small>
</div>
<!-- ファイルアップロード（その２） -->
<div class="custom-file">
<input type="file" id="myfile" class="custom-
file-input">
<label class="custom-file-label" for="myfile">
ファイルを選択してください。</label>
</div>
<br><br>
<!-- インプットを作る（横に並べる） -->
<div class="form-group">
<input type="text" class="form-control" place
holder="ユーザー名">
<input type="text" class="form-control" place
holder="パスワード">
</div>
<!-- インプットを作る（横に並べる） -->
<div class="form-inline">
<input type="text" class="form-control mr-3"
placeholder="ユーザー名">
<input type="text" class="form-control mr-3"
placeholder="パスワード">
</div>
<!-- チェックボックスを作る -->
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type=
"checkbox"> 次回から自動で
</label>
</div>
<!-- フォームの入力補助（あらかじめ＠マークをフォーム表示） -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input class="form-control" type="text" place
holder="メールアドレス">
</div>
<!-- フォーム内部の最後にボタンを入れる -->
<div class="input-group">
<input class="form-control" type="text" place
holder="検索">
<div class="input-group-append">
<button class="btn btn-primary"
type="button">Search</button>
</div>
</div>
<br><br>
<!-- アラート表示する -->
<div class="alert alert-primary">
<strong>Primary</strong> 記事が投稿されました。
</div>
<!-- アラートをフォーム内のx印を押して消す -->
<div class="alert alert-primary alert-dismissible">
<button class="close" type="button" data-
dismiss="alert">
<!-- htmlの構文として×はx印を表示させる -->
×
</button>
<strong>削除できるよ</strong>
</div>
<!-- テーブルを作る -->
<table class="table">
<thead>
<tr>
<th>#</th>
<th>姓</th>
<th>名</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>鈴木</td>
<td>一郎</td>
<td>suzuki@gmail.com</td>
</tr>
<tr>
<th scope="row">2</th>
<td>takagi</td>
<td>花子</td>
<td>takagi@yahoo.com</td>
</tr>
</tbody>
</table>
<br><br>
<!-- テーブルを作る（色を反転させる） -->
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
<th>姓</th>
<th>名</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>鈴木</td>
<td>一郎</td>
<td>suzuki@gmail.com</td>
</tr>
<tr>
<th scope="row">2</th>
<td>高木</td>
<td>花子</td>
<td>takagi@yahoo.com</td>
</tr>
</tbody>
</table>
<br><br>
<!-- テーブルを作る（ストライプにする） -->
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>姓</th>
<th>名</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>鈴木</td>
<td>一郎</td>
<td>suzuki@gmail.com</td>
</tr>
<tr>
<th scope="row">2</th>
<td>高木</td>
<td>花子</td>
<td>takagi@yahoo.com</td>
</tr>
</tbody>
</table>
<!-- テーブルを作る（縦横両方の線を入れる） -->
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>姓</th>
<th>名</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>鈴木</td>
<td>一郎</td>
<td>suzuki@gmail.com</td>
</tr>
<tr>
<th scope="row">2</th>
<td>takagi</td>
<td>花子</td>
<td>takagi@yahoo.com</td>
</tr>
</tbody>
</table>
<br><br>
<!-- テーブルを作る（枠線を全て消す） -->
<table class="table table-borderless">
<thead>
<tr>
<th>#</th>
<th>姓</th>
<th>名</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>鈴木</td>
<td>一郎</td>
<td>suzuki@gmail.com</td>
</tr>
<tr>
<th scope="row">2</th>
<td>takagi</td>
<td>花子</td>
<td>takagi@yahoo.com</td>
</tr>
</tbody>
</table>
<br><br>
<!-- テーブルを作る（マウスのポインタに反応させる） -->
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>姓</th>
<th>名</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>鈴木</td>
<td>一郎</td>
<td>suzuki@gmail.com</td>
</tr>
<tr>
<th scope="row">2</th>
<td>takagi</td>
<td>花子</td>
<td>takagi@yahoo.com</td>
</tr>
</tbody>
</table>
<br><br>
<!-- テーブルを作る（テーブルの背景（ヘッダー）を変える） -->
<table class="table table-hover">
<thead class="table-primary">
<tr>
<th>#</th>
<th>姓</th>
<th>名</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>鈴木</td>
<td>一郎</td>
<td>suzuki@gmail.com</td>
</tr>
<tr>
<th scope="row">2</th>
<td>takagi</td>
<td>花子</td>
<td>takagi@yahoo.com</td>
</tr>
</tbody>
</table>
<br><br>
<!-- テーブルを作る（小さめのテーブルを作る） -->
<table class="table table-hover table-sm table-
striped">
<thead>
<tr>
<th>#</th>
<th>姓</th>
<th>名</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>鈴木</td>
<td>一郎</td>
<td>suzuki@gmail.com</td>
</tr>
<tr>
<th scope="row">2</th>
<td>takagi</td>
<td>花子</td>
<td>takagi@yahoo.com</td>
</tr>
</tbody>
</table>
<!-- カードを使う① -->
<div class="card">
<div class="card-body">
明日は晴れるかな。それとも雨かな。
</div>
</div>
<br><br>
<!-- カードを使う② -->
<div class="card">
<div class="card-body">
<h4 class="card-title">タイトル</h4>
<!-- text-mutedは文章を薄くする -->
<h6 class="card-subtitle text-muted">サブ
タイトル</h6>
<p class="card-text">明日の天気は低気圧が近づ
いており、雨模様</p>
<a class="btn btn-primary" href="#">続き</a>
</div>
</div>
<br><br>
<!-- カードを使う③画像を組み込む（上に表示する） -->
<div class="card">
<img class="card-img-top" src="gazo.png" alt="">
<div class="card-body">
<h4>タイトル</h4>
<p class="card-text">クラロワのナイトは</p>
<a class="btn btn-primary" href="#">続き</a>
</div>
</div>
<!-- カードを使う④画像を組み込む（下に表示する） -->
<div class="card">
<div class="card-body">
<h4>タイトル</h4>
<p class="card-text">クラロワのナイトは</p>
<a class="btn btn-primary" href="#">続き</a>
</div>
<img class="card-img-bottom" src="gazo.png">
</div>
<br><br>
<!-- カードを使う④（ヘッダーを使う） -->
<div class="card">
<div class="card-header">
ヘッダー
</div>
<div class="card-body">
<h4 class="card-title">タイトル</h4>
<!-- text-mutedは文章を薄くする -->
<h6 class="card-subtitle text-muted">サブ
タイトル</h6>
<p class="card-text">明日の天気は低気圧が近づいて
おり、雨模様</p>
<a class="btn btn-primary" href="#">続き</a>
</div>
</div>
<br><br>
<!-- カードを使う⑤（中央寄せ） -->
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">タイトル</h4>
<!-- text-mutedは文章を薄くする -->
<h6 class="card-subtitle text-muted">サブ
タイトル</h6>
<p class="card-text">明日の天気は低気圧が近づ
いており、雨模様</p>
<a class="btn btn-primary" href="#">続き</a>
</div>
</div>
<br><br>
<!-- カードを使う⑥画像の中に文字を組み込む -->
<div class="card text-white">
<img class="card-img-top" src="gazo.png" alt="">
<div class="card-img-overlay">
<h4>タイトル</h4>
<p class="card-text">クラロワのナイトは</p>
<a class="btn btn-primary" href="#">続き</a>
</div>
</div>
<br><br>
<!-- カードを使う⑦背景色を変える -->
<div class="card bg-dark text-white">
<img class="card-img-top" src="gazo.png" alt="">
<div class="card-body">
<h4>タイトル</h4>
<p class="card-text">クラロワのナイトは</p>
<a class="btn btn-primary" href="#">続き</a>
</div>
</div>
<br><br>
<!-- カードを横に並べる -->
<div class="card-columns">
<div class="card">
<div class="card-body">
<h4 class="card-title">タイトル</h4>
<p class="card-text">本日は晴天なり</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">タイトル</h4>
<p class="card-text">雨だなあ</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">タイトル</h4>
<p class="card-text">晴れ時々曇り</p>
</div>
</div>
</div>
<!-- ジャンボトロンを使う -->
<div class="jumbotron">
<p>本日は晴天なり</p>
<p>明日は曇り</p>
<a href="#" class="btn btn-primary">続き</a>
</div>
<br><br>
<!-- ジャンボトロンを使う（背景色を変える） -->
<div class="jumbotron" style="background:red;">
<p>本日は晴天なり</p>
<p>明日は曇り</p>
<a href="#" class="btn btn-primary">続き</a>
</div>
<br><br>
<!-- ジャンボトロンを使う（背景色を変える） -->
<div class="jumbotron" style="background:red;">
<p>本日は晴天なり</p>
<p>明日は曇り</p>
<a href="#" class="btn btn-primary">続き</a>
</div>
<br><br>
</form>
</div>
<!-- ジャンボトロンの背景は枠いっぱいとし、中身をレスポンシブルに -->
<!-- contaierの外側に以下を記載する -->
<div class="jumbotron jumbotron-fluid" style=
"background:red;">
<div class="container">
<p>本日は晴天なり</p>
<p>明日は曇り</p>
<a href="#" class="btn btn-primary">続き</a>
</div>
</div>
（５）グリッドシステム
・containerクラス
・rowクラス
・columnクラス（colクラス）最大１２本
グリッドシステムは１つのrowに合計１２本のカラムとなるように表示させる
以下のように、３本colを表示させると、画面いっぱいに３分割されて表示される
rowは制限なくいくつでも作成できる
.html
<body>
<div class="container" style="margin-top:50px;">
<div class="row">
<div class="col" style="border:1px solid
black;height:100px;"></div>
<div class="col" style="border:1px solid
black;height:100px;"></div>
<div class="col" style="border:1px solid
black;height:100px;"></div>
</div>
一方で、カラム数を指定して（以下であれば６本分）１２本に満たない場合、左寄せで６本分のカラムのみ表示される
.html
<div class="row mt-3">
<div class="col-6" style="border:1px solid
black;height: 100px;"></div>
</div>
また、以下のように６本分指定したのちに、３本カラムを加えているので、残りの6本分のカラムを２本、２本、２本に分類して表示される
.html
<div class="row mt-3">
<div class="col-6" style="border:1px solid
black;height: 100px;"></div>
<div class="col" style="border:1px solid
black;height:100px;"></div>
<div class="col" style="border:1px solid
black;height:100px;"></div>
<div class="col" style="border:1px solid
black;height:100px;"></div>
</div>
なお、カラムの数が１２を越えると下にはみ出す
また、レスポンシブルにグリッドシステムが適用されるサイズを指定する
デフォルトでは、エキストラサイズ以上であれば適用されるが（実質全てのサイズに適用）、以下のようにsm以上ではグリッドシステムが適用され、６本のカラムと２本のカラム、４本のカラムが並列になるが、sm以下では、６本のカラムの下に１本ずつ折り返される
.html
<!-- extra small 576px未満
small 576px以上768px未満
medium 768px以上992px未満
large 992px以上1200px未満
extra large 1200px以上 -->
<div class="row mt-3">
<div class="col-6" style="border:1px solid
black;height: 100px;"></div>
<div class="col-sm-2" style="border:1px solid
black;height:100px;"></div>
<div class="col-sm-4" style="border:1px solid
black;height:100px;"></div>
</div>
＜sm以上の場合>
＜sm以下の場合＞
オフセットについて
オフセットとは、空白を組み込む処理
例えば、カラムが６本であると、左から６つのグリッドとなるが、以下のようにすると左から空白が３本できて、真ん中に６つのグリッドができあがる
.html
<div class="container" style="margin-top:50px;">
<div class="row mt-3">
<div class="col-6 offset-md-3" style="border:1px solid
black;height: 100px;"></div>
</div>
</div>
オフセットを利用して以下のようにもできる
md以上で適用される（md以下だと、下に折り返し結果としてrowが３つになる）
.html
<div class="row mt-3">
<div class="col-3 offset-md-1" style="border:1px solid
black;height: 100px;"></div>
<div class="col-2 offset-md-1" style="border:1px solid
black;height: 100px;"></div>
<div class="col-3 offset-md-1" style="border:1px solid
black;height: 100px;"></div>
</div>
グリッドシステムにcssの要素を加えることもできる
以下の例は、classはrowとして、styleにheight、borderを追加している
.html
<div class="row" style="height:200px;border:1px solid black;">
<div class="col" style="background:lightgray;">あいうえお
</div>
<div class="col" style="background:lightgray;">かきくけこ
</div>
</div>