Bootstrapカラム間のマージン(余白・ガター)の仕組みをマスターする

★気に入ったらシェアをお願いします!

Bootstrapカラムのマージンをマスター

Bootstrap連載、前回・前々回はBootstrapのグリッドシステムについて、便利なジェネレーターなどを紹介しながら詳しく解説しました。

Bootstrapでレスポンシブなカラム作成 ブレイクポイントとカラム数の指定方法をマスター
Bootstrapの機能の中でも最も便利なカラム分けについて解説。よく見かける「大画面で3カラム分割、小画面で1カラムに変化」というレイアウトをサンプルとして実際に作成します。
複雑なBootstrapカラムのコードはジェネレーターを使えば即マスター
Bootstrapのカラムについて丁寧に解説したうえで、ブレイクポイントごとにカラム数を切り替える複雑な設定をする場合に活躍してくれる、ビジュアルで理解できるジェネレーターを紹介しています。操作は簡単で即コードを出力してくれるので、Bootstrapのカラム割りはどうもよくわからないという初心者さんにこそオススメです。

Bootstrapのカラム分割法をマスターしても、CSS周りがイマイチな時期だと、よくわからないのがカラム間のマージン(余白)です。

カラムのマージン(余白)のルールはどうなっているの?

自動でいい感じにレイアウトしてくれるのがBootstrapの良さですが、仕組みをある程度理解していないと戸惑うことも多いです。

今回もシンプルなレイアウト例を見ながら、Bootstrapカラムにおけるマージン(余白)の仕組みをざっくり把握していきましょう。

3カラムレイアウトを枠付きで見てみよう

まずはそれぞれの要素の配置をはっきりさせるため、上記の画像3カラムレイアウトのブロック要素(divとpタグ)に枠をつけてみました。

ブロック要素に枠線

上記部分のコードは以下です。

※WordPressの自動整形で消えてますが、実際のコードでは画像とテキスト部分はpタグで囲っています。

containerで大枠をつくり、rowでカラム分けのエリアをつくり、col-md-4を3つ配置して3分割をしている形ですね。

上記3つの要素に色を付けてみました。

要素に色を付けてみる

カラム間のマージンは合体してできている

ここでお気づきかと思いますが、カラム間のマージンは、カラムとカラムの間に設定されたmarginではなく、カラム単体が持つpaddingが隣同士で合体してできています。

カラム間のマージンは、左右のcolのpaddingが合体してできてた

カラム間のマージンはcolのpaddingで設定されている

カラムを定義している「col-md-4」のCSS設定をみてみましょう。

paddingは左右それぞれ15pxです。そしてこれは「col-md-4」にかぎらず、カラムを指定する「col」クラスすべてに、共通して設定されています。

Bootstrapのcolのスタイル

というわけで、Bootstrapのカラム割におけるカラム間のマージンは常に「15px+15px」の30pxです。
これはどのようなカラムサイズの組み合わせでも変わりません。

さらに言えば、並べたカラム全体の右端と左端に、15pxのマージンが発生している点もご注意ください。

カラム全体の左右にも空きができる

カラムに枠や背景色を付ける場合は要注意

カラム単体のpaddingでカラム間のマージンが作られていることを知らないと、カラムそのものにスタイルを指定したいとき、意図した通りにならないかもしれません。

カラムに背景色を付けたいんだ!と思い「col-md-4」に直接背景色を指定してしまうと、以下のようになってしまいます。

背景色とボーダーで余白が消えた

狙い通りなら良いのですがカラム間のマージンを残したい場合、この指定だとNGですね。

こうした場合はカラム「col-md-4」の中に、もうひとつdiv要素を入れ、そこにボーダーと背景色を指定しましよう。

● HTML

●CSS

divを加えて、マージンを残す

「col-md-4」の内側に<div class="box">を加え、boxに対して背景色とボーダーを指定しています。

さらにboxにはpaddingも設定していますね。指定しないと以下の画像のように、要素がbox内でいっぱいに広がってしまいます。

boxいっぱいに文字と画像が広がる

このようにカラムにボーダーや背景色を設定しつつ、カラム間のマージンは残したい場合は、divを入れるなど一工夫することで実現できますね。

1カラムになった場合、縦のカラム間のマージンは?

並列状態のカラムのマージンはpaddingで設定されていることがわかりましたが、それでは1カラム縦積みになった場合のマージンはどうなるのでしょうか?

背景色を設定した状態で縦積みにしてみましょう。

縦のマージン無し

マージンはありません。ぴったりくっつきます。
これが背景色をなくすと、マージンがあるように見えるのですが…

縦のマージンがあるように見えるが

上の画像はブロック要素を枠で囲んだ状態です。「col-md-4」間には隙間があるのでマージンが設定されていそうですよね。

しかしこの隙間は「col-md-4」ではなく、内包されている「h2やp要素」に設定されたmarginによるものです。「col」自体にmarginは設定されていません。
 
 
どうして「col-md-4」で囲んでいるのに「h2やp要素」のマージンが「col-md-4」枠外に影響するの?という疑問が生じますね。これはCSSの特性です。borderやpaddingを持たない親要素に対しては、子要素(内包された要素)のmarginが親要素を突き抜けて影響する場合があるのです。詳しくは「marginの相殺」で調べて下さい。
 
 
とりあえず、カラムが縦積みになった場合、カラム間の上下marginは設定されていない、と覚えましょう。

そして、カラム自体やカラムの中にborderを指定していない場合は、内包している要素のmarginがカラム間の余白に影響している、という点も、ちらっと頭に置いておいて下さい。

縦積みでもカラムの間に余白を持たせたい

背景色を設定している場合などは、縦積みでもカラム間に少しのマージンを持たせたいですよね。

先程追加した「box」もしくは「col-md-4」そのものに「margin-bottom:10px;」などを指定してあげると実現できます。

縦積みになった時だけマージンを開けたいなら、縦積みになるブレイクポイントでCSSを追記してあげるとよいですね。

●縦積みのブレイクポイントがmd(992px)で、.boxに下マージンを指定した場合のCSS

カラムのマージンについてまとめ

以上、Bootstrapのカラム間のマージンについて見ていきました。

● col自体にmarginは指定されていない
● カラム間のマージン(余白)はpaddingで指定されている。しかも左右のcolのpaddingが合体している
● カラム間のマージンは15px+15pxの30pxである
● 縦積みになった場合、カラム間のマージン(余白)は指定されていない。
● 縦積みでマージンを追加したければ、自作CSSで調整する

レイアウトの調整を行う場合は、以上のようなことを念頭に置かれて下さい。

BootstrapでどのようなCSSスタイルが設定されているかを把握すると、カスタマイズもグッとやりやすくなりますね。

連載目次:初心者向け!Bootstrapで簡単レスポンシブサイト制作

  1. CSS初心者の強い味方!Bootstrapで簡単レスポンシブサイト制作
  2. CDNを利用して最速お手軽にBootstrap導入しよう!サンプル付き実践編
  3. Bootstrapで横幅いっぱいに画像を表示しよう!ジャンボトロン(jumbotron)の設置方法
  4. Bootstrapでコンテンツを中央寄せするcontainerの役割を覚えよう!
  5. Bootstrapをカスタマイズしよう!CSS調整のコツはスタイルの優先順位だ!
  6. Bootstrapでレスポンシブなカラム作成 ブレイクポイントとカラム数の指定方法をマスター
  7. 複雑なBootstrapカラムのコードはジェネレーターを使えば即マスター
  8. Bootstrapカラム間のマージン(余白)の仕組みをマスターする
  9. Bootstrapカラムのマージン(余白・ガター)を好きなサイズに調整するCSSの具体例
The following two tabs change content below.

くろゆき

九州の端っこでウェブ制作をしています。わりとなんでも屋さんです。「慣れない人にもやさしいIT」を信条にお仕事をさせてもらっています。Wordpressやbootstrap、CSS関連の記事をわかりやすく丁寧に書いていきたいです。