Bootstrapで初めに覚えるべき頻繁に使用するクラス【m-.p-.mx-.w-.h-など】

HTML/CSS

今回はBootstrapのclass(クラス)の中で最も頻繁に使用するものをいくつか紹介します。これらのクラスを初めに覚えてしまえば、レイアウトで悩むことはありません。ぜひ参考にして下さい。

Bootstrapをインストール出来てない方は、以下の記事を参照してサイト内に入れて下さい。

Bootstrapで初めに覚えるべきクラス

Bootstrapでは数百を超えるクラスが存在します。それを全て暗記するのは難しいと思います。ただ以下のような頻繁に使用するクラスは初めに暗記してしまいましょう。

class意味
m-○○マージン
p-○○パディング
w-○○width
h-○○height
text-○○テキスト
mx-automargin: 0 auto
containerコンテナ(グリッドシステムで必要)
row行(横)
col-列(縦)

これらのクラスをHTML内に入れるだけで次で説明するスタイルが付いてくれます。各々説明します。

m-○○

class意味
m-○○全てのマージン
mb-○○下のマージン
mt-○○上のマージン
mr-○○右のマージン
ml-○○左のマージン
class意味
m-0マージン無し
m-1スペース × 0.25の幅のマージン
m-2スペース × 0.5の幅のマージン
m-3スペース分の幅のマージン
m-4スペース × 1.25の幅のマージン
m-5スペース × 1.5の幅のマージン
m-autoオート(最適化)
▼コードは以下
<div class="red mb-3">赤のブロック</div>
    <div class="blue mb-3">青のブロック</div>
    <div class="yellow mb-3">黄色のブロック</div>
    <div class="orange mb-3">オレンジのブロック</div>
    <div class="brown mb-3">茶色のブロック</div>

▼コードは以下
<div class="red m-2">赤のブロック</div>
    <div class="blue mr-3">青のブロック</div>
    <div class="yellow ml-3">黄色のブロック</div>
    <div class="orange mb-2">オレンジのブロック</div>
    <div class="brown m-auto">茶色のブロック</div>

p-○○

class意味
p-○○全てのマージン
pb-○○下のマージン
pt-○○上のマージン
pr-○○右のマージン
pl-○○左のマージン
class意味
p-0パディング無し
p-1スペース × 0.25の幅のパディング
p-2スペース × 0.5の幅のパディング
p-3スペース分の幅のパディング
p-4スペース × 1.25の幅のパディング
p-5スペース × 1.5の幅のパディング
p-autoオート(最適化)
▼コードは以下
<div class="red pb-3 pt-3">赤のブロック</div>
    <div class="blue pb-3 pt-3">青のブロック</div>
    <div class="yellow pb-3 pt-3">黄色のブロック</div>
    <div class="orange pb-3 pt-3">オレンジのブロック</div>
    <div class="brown pb-3 pt-3">茶色のブロック</div>

▼コードは以下
<div class="red p-2">赤のブロック</div>
    <div class="blue pr-3">青のブロック</div>
    <div class="yellow pl-3">黄色のブロック</div>
    <div class="orange pb-2">オレンジのブロック</div>
    <div class="brown p-auto">茶色のブロック</div>

w-○○

class意味
w-25width:25%
w-50width:50%
w-75width:75%
w-100width:100%
w-autowidth:auto
▼コードは以下
<div class="red w-25">赤のブロック</div>
    <div class="blue w-50">青のブロック</div>
    <div class="yellow w-75">黄色のブロック</div>
    <div class="orange w-100">オレンジのブロック</div>
    <div class="brown w-auto">茶色のブロック</div>

h-○○

class意味
h-25height:25%
h-50height:50%
h-75height:75%
h-100height:100%
h-autoheight:auto
▼コードは以下
<div class="cont">
    <div class="red h-25">赤のブロック</div>
    <div class="blue h-50">青のブロック</div>
    <div class="yellow h-75">黄色のブロック</div>
    <div class="orange h-100">オレンジのブロック</div>
    <div class="brown h-auto">茶色のブロック</div>
  </div>

<style>
.cont{
  height: 100px;
}
</style>

text-○○

class意味
text-centerテキストを真ん中に
text-leftテキストを左詰めに
text-rightテキストを右詰めに
▼コードは以下
<div class="red text-center">赤のブロック</div>
    <div class="blue text-left">青のブロック</div>
    <div class="yellow text-right">黄色のブロック</div>
    <div class="orange pr-5 pl-5 text-left">オレンジのブロック</div>
    <div class="brown pr-5 pl-5 text-right">茶色のブロック</div>

mx-auto

class意味
mx-automargin:0 auto ; (要素を真ん中に)
▼コードは以下
<div class="red w-50 mx-auto">赤のブロック</div>
    <div class="blue w-50 mx-auto">青のブロック</div>
    <div class="yellow w-50 mx-auto">黄色のブロック</div>
    <div class="orange w-50 mx-auto">オレンジのブロック</div>
    <div class="brown w-50 mx-auto">茶色のブロック</div>

container,row,col-

これらのクラスは少し特殊です。主にレイアウトを作成するclassでBootstrapではグリッドシステムと言われています。

class意味
containerコンテナ
row行(横)
col-○○列(縦)
▼コードは以下
<div class="container">
    <div class="row">
      <div class="col-sm">
        <div class="red p-5 mx-auto">赤のブロック</div>
      </div>
      <div class="col-sm">
        <div class="blue p-5 mx-auto">青のブロック</div>
      </div>
      <div class="col-sm">
        <div class="yellow p-5 mx-auto">黄色のブロック</div>
      </div>
    </div>
  </div>

グリッドシステムについては別の記事で詳しく説明します。


以上が「Bootstrapで初めに覚えるべき頻繁に使用するクラス【m-.p-.mx-.w-.h-など】」でした。

Bootstrapには、その他にも沢山のclassが存在しますが、今回紹介したclassが割と頻繁に使用するものかと思います。全て覚えることは難しいので、これらだけは先に覚えてしまいましょう。

2021年1月3日HTML/CSSCSS,HTML,WEB

Posted by KT