本日の学習範囲
たにぐち まことのともすたチャンネル(YouTube)
https://www.youtube.com/user/tomostajp
Bootstrap 4入門 #01〜#02
（学習時間：2時間）
Bootstrap学習メモ
Bootstrap
https://getbootstrap.jp/
Twitter社が提供している、
HTML・CSS・JavaScriptで構成されるオープンソースのフレームワーク
CSSのみの場合、トップページ下部にあるコード
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
をコピーして、
リセットCSSが含まれている
基本的なタグの用意（VSCode）
コード記述部分で「html:5」と記述して［tab］を押すと、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
と記述される
.container
グリッドシステムを使用する場合に必要なレイアウト
コンテナを与えるクラス
<div class="container"></div>
とすることにより、ブレイクポイントでmax-widthが変わるようになる
グリッドシステム
グリッド(サイトの横幅を均等に分けるガイドライン)を活用してレイアウトできるシステム
Bootstrapでは12本のグリッドが存在する
ブレイクポイント
CSSソース内で適用スタイルを区切る位置
.containerでは5段階の幅で分けられている
Extra small…画面幅544px未満→.container幅auto
Small…画面幅544px以上768px未満→.container幅576px
Medium…画面幅768px以上992px未満→.container幅720px
large…画面幅992px以上1200px未満→.container幅940px
Extra large…1200px以上→.container幅1140px
marginを要素にクラスで適用する方法
<div class="m-１"></div>
m…margin
mt…margin-top
mb…margin-bottom
mr…margin-right
ml…margin-left
mx…margin-right&margin-left
my…margin-top&margin-bottom
0…marginの値が0
１…marginの値がspacer×0.25
2…marginの値がspacer×0.5
3…marginの値がspacer
4…marginの値がspacer×1.5
5…marginの値がspacer×3
auto…marginの値がauto
spacer
1rem (標準), or 0 より大きい任意の値
.row
行に与えるクラス
コンテナを水平に分割し、上から下へと並ぶ
<div class="container">
<div class="row">
</div>
</div>
.col
列を表すクラス
.rowを縦に割り、左から右へ並ぶ
<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>
offset
<div class="col-○ offset-○"></div>
指定した列の数分だけ右に移動する
その他
先日まで苦労していたレスポンシブ対応が、
Bootstrapを活用することで随分楽になると思った。
Bootstrapの動画を見終えたら、
それを活用したレスポンシブ対応のコードの書き換えに挑戦しようと思う。