BootStrapでコラムをレスポンシブデザインにする
HTML, CSSだけだとレスポンシブ化って難しいけど、Bootstrapを使用すると簡単！
まず【前提】WEBサイトの横幅は12個のBOXでできている
←------------------WEBサイトの横幅-----------------→
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|
BootstrapのGrid SystemではWidthが12個のBOXで敷き詰められている。
PC,タブレット, スマホによって、その12個のBOXのうちの何個を使用するかをそれぞれ指定できる。説明難しいからとりあえずコード。
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red; border: 1px solid;">
コンテンツ
</div>
</div>
</div>
まずdiv class="row（行）"の中にcolumn（列） divを作成する。
ここでポイントが
①col-lg-2 (PC表示の時は12個のBOXのうち2個のスペース使いますよ)
②col-md-3 (タブレット表示の時は12個のBOXのうち3個のスペース使いますよ)
③col-sm-12 (スマホ表示の時は12個のBOXのうち12個のスペース使いますよ)
つまり
①2/12 = 6分割（6コラム）
②3/12 = 4分割（4コラム）
③12/12 = 1分割（1コラム）
となる。
ちなみにlgはPC、mdはタブレット、smはスマホの表示コラムってしたけど、厳密には横幅のPixcel数で区切っているみたい。
(BootStrapのHPより抜粋)
レスポンシブ化、Bootstrapを使うとめちゃくちゃ簡単だからとてもおすすめ。
ちなみにコラムのレスポンシブ化するときは、基本的に最初にclass="container"のdivを使うから気をつけてね。
ちなみにこちらが公式ドキュメント
https://getbootstrap.com/docs/4.4/layout/grid/
ちなみに、Bootstrapを使用する時はheadタグの中に下記いれないと使えないからご注意を。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
UdemyのAngelaさんの講座でのメモです。（英語だけどめっちゃわかりやすいです！） → リンク