# 【Bootstrap】ウィンドウサイズによって段組みを変更する レスポンシブデザインでウェブページ等を作成する際に、 - PCなどの広い画面では <div class="col-xs-12"> <div class="col-xs-8 card bg-primary"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">One</h5> </div> </div> </div> <div class="col-xs-4 card bg-success"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Two</h5> </div> </div> </div> <div class="col-xs-4 card bg-warning"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Three</h5> </div> </div> </div> <div class="col-xs-8 card bg-danger"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Four</h5> </div> </div> </div> </div> - スマートフォンなどの狭い画面では <div class="col-xs-12"> <div class="col-xs-6"> <div class="col-xs-12 card bg-primary"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">One</h5> </div> </div> </div> <div class="col-xs-6 card bg-success"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Two</h5> </div> </div> </div> <div class="col-xs-6 card bg-warning"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Three</h5> </div> </div> </div> <div class="col-xs-12 card bg-danger"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Four</h5> </div> </div> </div> </div> <div class="col-xs-6"> </div> </div> のように、画面サイズによってレイアウトを変更したい時、Bootstrapのグリッドシステムが便利である。 # container・row・col グリッドシステムにはcontainer、row、colの3つの概念がある。 これらの関係性を次に示す。 ![](https://i.imgur.com/hLzlEt4.png) # 画面サイズによって変える CSSでは ``` @media(max－width:992px) and (min－width:768px){} ``` のようにして画面サイズに応じたスタイルを適用できるが、 Bootstrapのグリッドシステムはこれをまとめてくれている。 クラス名|画面幅|px :-:|:-:|:-: .col-|全て|0以上 .col-sm-|Small|576px以上 .col-md-|Midium|768px以上 .col-lg-|Large|992px以上 .col-xl-|ExtraLarge|1200px以上 > .col-xs-もあるようだが.col-に同じ？ Large以上の画面サイズでは ①②③ ④⑤⑥ Midium以上Large未満の画面サイズでは ①② ③④ ⑤⑥ Midium未満の画面サイズでは ① ② ③ ④ ⑤ ⑥ のような表示にしたい場合、次のように指定する。 ```html <div class="container"> <div class="row"> <div class="col-12 col-md-6 col-lg-4"> ① </div> <div class="col-12 col-md-6 col-lg-4"> ② </div> <div class="col-12 col-md-6 col-lg-4"> ③ </div> <div class="col-12 col-md-6 col-lg-4"> ④ </div> <div class="col-12 col-md-6 col-lg-4"> ⑤ </div> <div class="col-12 col-md-6 col-lg-4"> ⑥ </div> </div> </div> ``` # サンプルコードと表示例 - Large～の時 ![](https://i.imgur.com/qEk5QpX.png) - Midium～Largeの時 ![](https://i.imgur.com/ztTlNVf.png) - ～Midiumの時 ![](https://i.imgur.com/ankdqgH.png) ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="robots" content="noindex,nofollow"> <meta name="description" content="bootstrapのグリッドシステムのサンプル"> <meta name="author" content="s119301"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Sample</title> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body class="m-4" style="height: 50vh;"> <div class="container h-100"> <div class="row h-100"> <div class="col-12 col-md-6 col-lg-4 bg-primary"> ① </div> <div class="col-12 col-md-6 col-lg-4 bg-secondary"> ② </div> <div class="col-12 col-md-6 col-lg-4 bg-warning"> ③ </div> <div class="col-12 col-md-6 col-lg-4 bg-danger"> ④ </div> <div class="col-12 col-md-6 col-lg-4 bg-info"> ⑤ </div> <div class="col-12 col-md-6 col-lg-4 bg-light"> ⑥ </div> </div> </div> </body> </html> ```