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

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

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

Bootstrapとは？初心者は必ず覚えるべき基本的な使い方の解説

今回はWEB制作でよく使用される「Bootstrap」と言われるものについての説明と使い方の解説をします。WEB制作のリアルな現場ではBootstrapをかなり多用します。WEB制作の経験が浅い方や、これからWEB制作系の仕事をしたいって方は必ず覚えておいた方が良い事です。

kt-life.net

2021.01.02

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

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

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

m-○○

<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-○○

<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-○○

<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-○○

<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-○○

<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

<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ではグリッドシステムと言われています。

<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が割と頻繁に使用するものかと思います。全て覚えることは難しいので、これらだけは先に覚えてしまいましょう。