Liberty

こんにちは、yutaです。

Bootstrapのグリッドシステムって便利ですけど、隙間系(marginとpadding)が厄介ですよね。

今回は、簡単な例を出して.container、.row、.colの隙間について考えてみます。

1.シンプルな3カラム表示の例

↓は、Bootstrapのグリッドシステムを使ったシンプルな3カラムの表示です。各領域が分かりやすいように背景色をつけています。

ブラウザで見ると↓

角カラムの両側にだけpaddingがあるように表示されていますね。上記コードでmarginやpaddingは一切指定指定ないのに何故このように表示されるのでしょうか。

2.グリッドシステムにおける隙間

文章で長ったらしく説明すると分かりにくいので↓のイラストをどうぞ。

.container

.containerには、両側にpadding:15pxが初期設定されています。(bootstrap.cssに記述されています。)

したがって、.containerの中身は↑のイラストの水色領域になりますね。

.row

.rowには、両側にmargin:-15pxが初期設定されています。マイナス15pxです。

これはネガティブマージンと呼ばれるものですが、この場合は.rowの中身が左右に15pxずつ広げられます。

ということは、.containerのpadding:15pxと、.rowのmargin:-15pxが相殺し合って、結局.rowの中身は↑のイラスト真ん中に書いてあるように「.containerのborderの領域と同じ大きさ」になります。

.col

.colには、両側にpadding:15pxが初期設定されています。(.containerと同じですね。)

したがって、各.colの中身は↑のイラスト下段のようになります。↑に示した「ブラウザで見たときの画像」がまさにこのようになっていますよね。

写真の両側に色がついていますが、これは各.colの背景色です。.colに指定しているのはpaddingなので15px分背景が見えています。

3.起こりうる問題

例えば、写真を横並びにしている場合、↓の様に.containerにpaddingを持たせて縁取りをしたいことがあるかと思います。(赤色部分)

与えたいpaddingが10pxとした場合、実は.container{padding:10px}としてもうまくいかず↓の様になってしまいます。

なんか飛び出ちゃってますよね。なんでこうなってしまうかと言うと・・・

↓のイラストを見てください。(※最初のイラストに赤で追記しています。)

もともと、.containerのpaddingと.rowのmarginは同じ大きさで綺麗に打ち消し合ってイラスト中段の様な状態になっていました。

ところが、.container{padding:10px}とすると.containerのpaddingの初期設定を変更することになり、.containerと.rowで相殺し合うpaddingとmarginの値が等しくならず、結果的に.rowの中身が5pxはみ出すことになります。

4.解決策(.rowのネガティブマージンを消す)

この問題の解決方法ですが、.rowのネガティブマージンを消すだけです。

5..colのpaddingを消して写真をぴたりとくっつける。

場合によっては、↓の様に.col同士をぴたりとくっつけたいこともあるかと思います。

こういう時は、各.colにpadding:0を指定すればokです。

6.背景をborderの様に扱いたい時に使えるかも。

今まで説明してきたやり方で、.containerの背景(赤色)が10px分見えていますよね。通常は背景色を指定しないでしょうからこれはただの隙間でしかありません。

しかし、.containerの背景を画像にしてあげると、その画像がまるで.rowのborderであるかの様に見せることができます。

普通にborderを設定する場合、border: 10px solid redやらborder: 10px dotted redの様にシンプルなものしか設定できませんが、↑の方法なら自分の好きな画像をborderにすることができますね。

Bootstrapは便利ですが隙間系に頭を悩まされることがしばしばあるので一度はしっかり勉強しておいたほうが良さそうですね！

ブログランキングに参加していますので、僕のモチベアップの為にもバナーを押していただけると嬉しいです！(※別タブで開きます)