Bootstrapを極める！Bootstrap4の基本(4) 〜サイズ・余白系のクラス名〜 【入門・初心者向け】

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

今回はBootstrap4のサイズ系classとmargin・paddingなどの余白系classについて解説します！

◆サイズ系class

class名 　プロパティと値
---------+-------------------------------------
w-25 　　 width: 25% !important;
w-50 　　 width: 50% !important;
w-75 　 　width: 75% !important;
w-100  　  width: 100% !important;

h-25 　  　height: 25% !important;
h-50 　  　height: 50% !important;
h-75 　  　height: 75% !important;
h-100 　　height: 100% !important;

mw-100　　max-width: 100% !important;
mh-100　　max-height: 100% !important;

◆画面サイズを指定するprifix

サイズ　 画面幅　    container幅         説明　
-----+-------------+-----------+-------------------------------------------
xl      1200px以上      1140px      テレビ、デスクトップPCなどの大画面モニタ
lg       992px以上       960px       ノートパソコンなどの省サイズモニタ
md     768px以上       720px       タブレットなど
sm     576px以上　    540px      ファブレットなど
xs       576px未満       auto          スマートフォン、組み込み端末など

◆スペーサーの単位

＊『スペーサー』は、カラムの左右の余白などに使用される幅のことで、Bootstrap 4 では $spacer という Sass の変数で定義されています。
通常は 3 = 1rem です。

0： 0                          ：0rem
1： スペーサの¼       ：0.25rem
2： スペーサの½       ：0.5rem
3： スペーサと同値  ：1rem
4： スペーサの1.5倍 ：1.5rem
5： スペーサの3倍    ：3rem

◆margin系class

■margin（上下左右を同時指定）
class名 　           プロパティと値                prefix
---------+---------------------------+---------------------------------
m-0          margin: 0 !important; 　　　  m-{prefix}-0
m-1          margin: 0.25rem !important;   m-{prefix}-1
m-2         margin: 0.5rem !important;      m-{prefix}-2
m-3         margin: 1rem !important;         m-{prefix}-3
m-4         margin: 1.5rem !important;      m-{prefix}-4
m-5         margin: 3rem !important;        m-{prefix}-5
m-auto   margin: auto !important;          m-{prefix}-auto

■margin（上下左右を個別指定）
　＊以下、1remとautoの場合のみ記載します。
class名 　             プロパティと値                     prefix
---------+--------------------------------+---------------------------------
mt-3         margin-top: 1rem !important;          mt-{prefix}-3
mb-3        margin-bottom: 1rem !important;   mb-{prefix}-3
mr-3         margin-right: 1rem !important;        mr-{prefix}-3
ml-3         margin-left: 1rem !important;           ml-{prefix}-3

mt-auto    margin-top: auto !important;            mt-{prefix}-auto
mb-auto    margin-bottom: auto !important;    mb-{prefix}-auto
mr-auto    margin-right: auto !important;          mr-{prefix}-auto
ml-auto    margin-left: auto !important;             ml-{prefix}-auto

■margin（左右を同時指定）
class名 　             プロパティと値                     prefix
---------+--------------------------------+---------------------------------mx-3       margin-right: 1rem !important;         mx-{prefix}-3 
                 margin-left: 1rem !important;

mx-auto margin-right: auto !important;           mx-{prefix}-auto 
                 margin-left auto !important;

■margin（上下を同時指定）
class名 　             プロパティと値                     prefix
---------+--------------------------------+---------------------------------
my-3      margin-top: 1rem !important;           my-{prefix}-3
                margin-bottom: 1rem !important;
my-auto margin-top: auto !important;           my-{prefix}-auto
                 margin-bottom: auto !important;
                                                                             

◆padding系class

■padding（上下左右を同時指定）
class名 　             プロパティと値                     prefix
---------+--------------------------------+---------------------------------
p-0           padding: 0 !important;                     p-{prefix}-0
p-1            padding: 0.25rem !important;         p-{prefix}-1
p-2            padding: 0.5rem !important;           p-{prefix}-2
p-3            padding: 1rem !important;               p-{prefix}-3
p-4            padding: 1.5rem !important;            p-{prefix}-4
p-5            padding: 3rem !important;               p-{prefix}-5
p-auto      padding: auto !important;                p-{prefix}-auto

■padding（上下左右を個別指定）
　＊以下、1remとAUTOの場合のみ記載します。
class名 　             プロパティと値                         prefix
---------+-----------------------------------+------------------------------
pt-3           padding-top: 1rem !important;            pt-{prefix}-3
pb-3          padding-bottom: 1rem !important;     pb-{prefix}-3
pr-3           padding-right: 1rem !important;          pr-{prefix}-3
pb-3          padding-bottom: 1rem !important;      pb-{prefix}-3

pt-auto     padding-top: auto !important;              pt-{prefix}-auto
pb-auto    padding-bottom: auto !important;       pb-{prefix}-auto
pr-auto     padding-right: auto !important;            pr-{prefix}-auto
pl-auto     padding-left: auto !important;               pl-{prefix}-auto

■padding（左右を同時指定）
class名 　             プロパティと値                          prefix
---------+-----------------------------------+------------------------------
px-3          padding-right: 1rem !important;           px-{prefix}-3 
                  padding-left: 1rem !important;
px-auto    padding-right: auto !important;            px-{prefix}-auto                                         padding-left auto !important;

■padding（上下を同時指定）
class名 　             プロパティと値                           prefix
---------+-----------------------------------+------------------------------
py-3           padding-top: 1rem !important;              py-{prefix}-3
                   padding-bottom: 1rem !important;
py-auto    padding-top: auto !important;               py-{prefix}-auto
                  padding-bottom: auto !important;

今回はここまでです！次回は位置揃えなどのクラスについて紹介します。

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

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

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

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

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