2021/07/21 WordPressが「5.8」にバージョンアップ

Bootstrap4で地味に便利なクラス指定:行揃え・幅・高さ・余白

Bootstrap4で地味に便利なクラス指定:行揃え・幅・高さ・余白

最近になって、よ~やく「Bootstrap4」を把握しました。

いつまでも旧バージョンの「Bootstrap3」にしがみついてるわけにもいかず、重い腰を上げて最新版「4.1」の解説本を購入して勉強しました。

で、早速にサンプルサイトなどもBootstrap4で作ってみました。

「Bootstrap4」は「3」に比べると、大まかに以下のような特徴があります。

1,ブレークポイントの変更
2,長さの単位がpxからremへ
3,フレックスボックスに対応

ここらへんは他のブログにも散々書かれていることなので、当ブログではあえて解説しません。

今回は私が「Bootstrap4」を学んで、こいつは地味に便利だな~と感じた3つのクラス指定について書きます。

行揃えの指定

まず、行揃えを指定するクラスです。

行揃えのクラスに関しては、
Bootstrap3では
text-center・・中央揃え
text-left・・左揃え
text-right・・右揃え
text-justify・・両端揃え
text-nowrap・・折り返さずに配置
などがありました。

Bootstrap4では、これに加えて
レスポンシブ対応の行揃えが可能となりました。

基本形としては、

text-(添字)-(方向)

この「添字」の部分に
「sm」や「md」などの画面サイズの指定が入ります。

たとえば、ある要素のクラスに
text-center text-md-left」と指定すると、

◇画面サイズ768px未満は中央揃え
◇画面サイズ768以上では左揃え

となります。

幅や高さを指定するクラス

Bootstrap4では、幅や高さを指定するクラスとして、以下のものが用意されました。

幅を指定するクラス)
w-25・・width:25%
w-50・・width:50%
w-75・・width:75%
w-100・・width:100%
mw-100・・max-width:100%
w-auto・・width:auto

高さを指定するクラス)
h-25・・height:25%
h-50・・height:50%
h-75・・height:75%
h-100・・height:100%
mh-100・・max-height:100%
h-auto・・max-height:auto

余白の指定

paddingとmarginを指定するクラスです。

以下のパターンになります。

p(方向)-(添字)-(数値) ・・paddingの指定
m(方向)-(添字)-(数値) ・・marginの指定

方向)
t ・・上
r ・・右
b ・・下
l ・・左
x ・・左右
y ・・上下
なし ・・上下左右

添字)
なし・・画面サイズ0px~
sm・・画面サイズ576px~
md・・画面サイズ768px~
lg・・画面サイズ992px~
xl・・画面サイズ1200px~

数値)
0・・0
1・・0.25rem
2・・0.5rem
3・・1rem
4・・1.5rem
5・・3rem
auto・・auto

たとえばクラス「pb-4」は
「padding-bottom:1.5rem」という意味です。

クラス「mx-3 mx-sm-5」は
◇画面サイズ576px未満は
「margin-left:1rem margin-right:1rem」
◇画面サイズ576px以上は
「margin-left:3rem margin-right:3rem」
という意味になります。

 

ken
こういう痒いところに手が届くクラス指定は便利ですね(^^*)

 

PRリンク

シェアしてね!