【Bootstrapの基本要素】余白(Spacing)について

コーディングをしていると、もはや避けては通れないのがpaddingとmarginで余白をつけることです。

このBootstrapを学んでいる方は、HTMLやCSSの基礎は既に習得されている方がほとんどだと思いますので、paddingやmarginについての説明はここでは割愛しますが、「まだ理解していないな」という方には難しい内容かもしれません。

こちらの記事では、Bootstrapにおける余白(Spacing)について詳しく解説していきます。

Bootstrapにおける余白の記述方法について

Bootstrapの余白の記述方法は、単にpaddingやmarginを記載すれば良いというわけではなく、その方向や、どのくらいの数値を適用させるのかを示す必要があります。

padding-topやmargin-topなどがありますよね。

それを記述するには、次のようにします。

{プロパティ}{方向} – {サイズ}

それぞれについて具体的にみていきましょう。

余白(Spacing)の具体的な書き方

先ほど記述方法について確認しました。
より詳細な書き方はこちらです。

余白(Spacing)の記述方法
プロパティ 方向 サイズ
 m  マージン  なし 4方向全て 0 0rem
p パディング t top(上辺) 1 0.25rem
b bottom (下辺) 2 0.5rem
l left(左辺) 3 1rem
r right (右辺) 4 1.5rem
x x軸(左右) 5 3rem
y y軸 (上下)

 【補足】サイズ感のremに関して

先のテーブルの表組で、サイズにremという単位がありました。

remについてここでふれておきます。
remとはルートemの略称で、htmlタグにおける文字サイズを基準にした単位です。

例えばhtmlタグの文字サイズの指定が16pxであれば、0.25remなら1/4で4pxです。

こちらも一覧で示しておきましょう。

remの考え方(※htmlタグの文字サイズが16pxの場合)
サイズ
0 0rem  16px × 0   0px
1 0.25rem  16px × 0.25   4px
2 0.5rem  16px × 0.5   8px
3 1rem  16px × 1 16px
4 1.5rem  16px × 1.5 24px
5 3rem  16px × 3 48px

 

以上のようになります。

ただし、注意点としては、htmlタグの文字サイズが16px以外のものが指定されていた場合、基準となる数値が変わってきてしまうので、その点は注意してください。

例)基準が20pxだと1remは20pxになります

実機確認

では、さらに具体的にどのように表示されるのかをコードを記述しながらみていきます。
(※bodyタグ直下のコードです・containerでくるんでいません)

maginの書き方

marginの記述方法

  1.   <h3 class=“ml-0 text-light bg-primary”>marginなし</h3>
  2.       <h3 class=“ml-1 text-light bg-primary”>margin(0.25rem)</h3>
  3.       <h3 class=“ml-2 text-light bg-primary”>margin(0.5rem)</h3>
  4.       <h3 class=“ml-3 text-light bg-primary”>margin(1rem)</h3>
  5.       <h3 class=“ml-4 text-light bg-primary”>margin(1.5rem)</h3>
  6.       <h3 class=“ml-5 text-light bg-primary”>margin(3rem)</h3>

 

marginの実装例

1行目の「marginなし」を基準に見ていきます。

htmlタグの文字サイズ(font-size)は16pxなので、それぞれ解説と同じmarginの余白感になっています。

  • marginなし     0
  • margin0.25rem  4px
  • margin0.5rem    8px
  • margin1rem     16px
  • margin1.5rem    24px
  • margin3rem   48px

【補足】全方向にmarginをかける場合

m-5

 

上記のような記述をします。

paddingの書き方

paddingの記述方法

  1. <h3 class=“pl-0 text-light bg-success”>paddingなし</h3>
  2.       <h3 class=“pl-1 text-light bg-success”>padding(0.25rem)</h3>
  3.       <h3 class=“pl-2 text-light bg-success”>padding(0.5rem)</h3>
  4.       <h3 class=“pl-3 text-light bg-success”>padding(1rem)</h3>
  5.       <h3 class=“pl-4 text-light bg-success”>padding(1.5rem)</h3>
  6.       <h3 class=“pl-5 text-light bg-success”>padding(3rem)</h3>

 

paddingの実装例

marginの時と同じように、次のようになっていることが分かります。

  • paddingなし     0
  • padding0.25rem  4px
  • padding0.5rem    8px
  • padding1rem     16px
  • padding1.5rem    24px
  • padding3rem   48px

【補足】全方向にpaddingをかける場合

p-5

こちらも先ほど同様、上記のような記述となります。

まとめ

Bootstrapの基本要素の余白(Spacing)について見てきました。

記述方法は、以下の通りでした。

{プロパティ}{方向} – {サイズ}

書き方とrem表記の意味を覚えてしまえば、そこまで難しくはないと感じています。

基本要素の中でも特に、余白に関しては使用頻度が高いものになると思いますので、しっかりとこの基本を押さえて、Bootstrapを使いこなしていってください。

※Bootstrap公式サイトのSpacingのドキュメントリンクはこちらです。