本日の学習範囲
たにぐち まことのともすたチャンネル(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］を押すと、
`
Document
`
と記述される
### .container
グリッドシステムを使用する場合に必要なレイアウト
コンテナを与えるクラス
`
`
とすることにより、ブレイクポイントで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を要素にクラスで適用する方法
`
`
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
行に与えるクラス
コンテナを水平に分割し、上から下へと並ぶ
`
`
### .col
列を表すクラス
.rowを縦に割り、左から右へ並ぶ
`
`
### offset
`
`
指定した列の数分だけ右に移動する
## その他
先日まで苦労していたレスポンシブ対応が、
Bootstrapを活用することで随分楽になると思った。
Bootstrapの動画を見終えたら、
それを活用したレスポンシブ対応のコードの書き換えに挑戦しようと思う。
