【入門】Bootstrapの書き方 〜 padding・margin 〜

【入門】Bootstrapの書き方 〜 padding・margin 〜

みなさんこんにちは さくちゃん です。

本日は、前回の続きから行なっていきます。
今回学ぶ内容は、以下の2つです。

  • padding
  • margin

では、早速やっていきましょう。

前知識として「padding」「margin」について知っておく必要があるので、
まだ知らない方はこちらをご覧ください。

Bootstrapの書き方 〜 padding・margin 〜

padding

通常paddingを書き時は、「 p{ padding: 10px; } 」と言ったように書きますが、
Bootstrapの場合は、これを省略して
[p] [場所] – [サイズ] と書いていきます。

pはpaddingの意味を表しています。
場所は「top」「right」「bottom」「left」を表します。
サイズは「10px」などを表します。

しかしBootstrapでは、場所、サイズの書き方が少し異なります。
では、それぞれについて見ていきましょう。

「top」「right」「bottom」「left」の書き方

Bootstrapでは、下のように書きます。

  • p- → 全方向
  • pt- → 上方向(top)
  • pr- → 右方向(right)
  • pb- → 下方向(bottom)
  • pl- → 左方向(left)
  • py- → 上下方向(top、bottom)
  • px → 左右方向(right、left)

これで場所を指定してあげます。

サイズの書き方

サイズはpxで表すのではなく、0〜5で表します。

  • 0 → 0
  • 1 → 0.25rem
  • 2 → 0.5rem
  • 3 → 1.0rem
  • 4 → 1.5rem
  • 5 → 3.0rem

これでサイズを指定してきます。

margin

marginもpaddingと同じように「mt-3」のように書いていきます。
ただ、サイズの書き方のところだけ「auto」がmarginだけ利用可能になります。

autoを使う場合は「mx-auto」と指定します。
autoを使用すると、コンテンツを中央揃えにできたりします。

では、本日は以上になります。
また次回続きをしていきます。

今回紹介した公式サイトの内容はこちら