Bootstrapを極める！Bootstrap4の基本(3) 〜グリッドシステム系のクラス名〜 【入門・初心者向け】

今回はBootstrapのグリッドシステム系のクラス名について説明します。

【contents】
■Bootstrapを極める！ Bootstrap4の基本(1) 〜準備編〜 【入門・初心者向け】
■Bootstrapを極める！Bootstrap4の基本(2) 〜グリッドシステムと基本ルール〜 【入門・初心者向け】
■Bootstrapを極める！Bootstrap4の基本(3) 〜グリッドシステム系のクラス名〜 【入門・初心者向け】

◆グリッドシステム系class

Bootstrapのグリッドシステム系のクラスには下記のようなクラスがあります。

■class名                             意味
.container  ・・・・・固定幅のグリッドシステムのコンテナ要素を定義
.container-fluid ・・・可変全幅のグリッドシステムのコンテナ要素を定義（width:100%）
.row ・・・・・・・・行を定義（コンテナ要素に内包される）
.col-{prefix}-{columns}・・ 列を定義（rowに内包される）

.col-{prefix}-offset-{columns} 
　・・・・スペース用の列（左余白分オフセット）を定義し、columnsの数値分向かって左側に余白をつける

.order
　・・・・カラムを表示する順序を入れ替える

.no-gutters
　・・・・カラムのガーター(左右のパディング)をなくす

.col-{prefix}-push-{columns} 
　・・・・列の右方向への入れ替え、columnsの数値分右側にシフトさせる

.col-{prefix}-pull-{columns}
　・・・・列の左方向への入れ替え、columnsの数値分左側にシフトさせる

.clearfix ・・・ floatの解除

＊上に記載したクラスのうち、主なクラスを詳細に説明します。

◆container class

■class名                             意味
.container ・・・・・固定幅のグリッドシステムのコンテナ要素を定義

containerクラスは、横幅が最大1170pxに設定されていて、画面幅が小さくなるとコンテナの幅も小さくなります。
また、パディングとマージンは下記の通りに設定されています。
　padding 左右15px
　margin 左右auto

【containerクラスに設定されているCSS（bootstrap-4.5.x.css）】

.container { 
   padding-right: 15px; 
   padding-left: 15px; 
   margin-right: auto; 
   margin-left: auto; 
} 

@media (min-width: 768px) { 
   .container { 
       width: 750px; 
       } 
   }
 
@media (min-width: 992px) { 
   .container { 
       width: 970px; 
       } 
   }
 
@media (min-width: 1200px) { 
   .container { 
       width: 1170px; 
       } 
   }

◆row class

■class名                             意味
.row・・・・・行を定義（コンテナ要素に内包される）

【Bootstrapで設定されているCSS】

.row {
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 margin-right: -15px;
 margin-left: -15px;
}

◆offset class

class名
.offset・・・・・offset-({画面サイズ}-){グリッド数}
クラス定義は offset-({画面サイズ}-){グリッド数} という構文です。

以下の例では、左半分のカラムについて『タブレットサイズ以上の画面幅になると、左側に余白ができる』ようになっています。

【記述例】

<div class="container">
 <div class="row">
   <!-- タブレットサイズ以上で、左に 1 カラム分の余白ができる -->
   <div class="col-6 col-sm-5 offset-sm-1">
     Offset column
   </div>
 </div>
</div>

◆order class

class名 
.order・・・・・order-** order-({画面サイズ}-){グリッド数}

order-** order-({画面サイズ}-){グリッド数} を指定することで、カラムを表示する順序を入れ替えることができます。
下記の例では、カラムB と カラムC の表示順序を入れ替えて表示しています。* には 1～12 の値を指定することができます。.order-first は最初、.order-last は最後を指定します。

【記述例】

<div class="container-fluid">
 <div class="row>
   <div class="col order-1">A</div>
   <div class="col order-3">B</div>
   <div class="col order-2">C</div>
 </div>
</div>

◆no-gutters class

class名 　　　　　　　　意味
.no-gutters ・・・・・ ガーター無し

.no-guttersを指定すると、カラムのガーター(左右のパディング)を無くすことができます。.row に設定されていた -15px のマイナスマージンも削除されるため、全体の横幅は短くなります。

【記述例】

<div class="row">
 :
</div>

<div class="row no-gutters">
 :
</div>

<div class="container-fluid">
 <div class="row">
   :
 </div>
</div>

<div class="container-fluid">
 <div class="row no-gutters">
   :
 </div>
</div>

今回はここまでです！
次回はその他のクラスを紹介します。

Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346

webデザイナーもくもく制作サロンへの招待について

https://note.mu/hamasan918/n/ne4d98f9db9ec

もくもく制作サロンを開講しました。
サロンでは勉強会を開催して質問を受け付けています。
月額500円となります。

#プログラミング     #Webデザイン    #JavaScript初心者   #Vue_js
#app