Bootstrap 4 のGRID SYSTEMを使ってWebサイトのコラムをレスポンシブ化する

3592 ワード
HTML Bootstrap CSS レスポンシブWebデザイン レスポンシブ HTML テキストリンク

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のうちの何個を使用するかをそれぞれ指定できる。説明難しいからとりあえずコード。

column-responsive.html
<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タグの中に下記いれないと使えないからご注意を。

getstarted.html
<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さんの講座でのメモです。（英語だけどめっちゃわかりやすいです！） → リンク