Bootstrapグリッドシステムの containerとrowは不要? CSSの中身を確認してみた

HTML/CSS

レイアウトに便利な Bootstrapのグリッドシステムですが、ふと containerと rowってホントにいるの?と疑問を持ちました。

というか そもそも Bootstrapの中身がよくわかってなかったので、実際にCSSの中を覗いてみました。

 

スポンサーリンク

bootstrap.css を開いてみる

下記のような Bootstrapを読み込むための linkタグの URLの部分をコピーしてブラウザのアドレスバーに貼り付けます。

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

 

このとき、bootstrap.min.css の “.min” は削除しておきます。

理由はこちら↓

 

そうするとブラウザにCSSの中身が表示されます。

この中のグリッドシステムのクラス container、row、col を確認します。

 

container、row、col のコード

CSS

.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
.row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}
.col-4 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

 

スポンサーリンク

コードから色々考えてみた

rowクラスに display: flex がある。containerクラスはいらない?

rowクラスに display: flexflex-wrap: wrapがありますね。

containerにはwidth:100%と padding と margin だけなので、rowがあれば containerは なくても大丈夫そうです。

ただ、rowのマージンがマイナス値というのは…。

 

containerのパディングを rowのネガティブマージンでキャンセル

マージンはボックスの周りに隙間をつくりますが、このマージンの値をマイナスにすると隙間ではなく、逆に めり込むようになります。

これを ネガティブマージンって呼ぶみたいです。

containerは 左右にパディング 15px となってますが、rowは マージンが -15px と マイナス値になっているため、rowはボックスいっぱいに広がれるということですね。

つまり containerと rowはセットで使う必要ありそうです。

 

col-1~12の幅は

100%を12分割にした幅が割り当てられてるだけですね。

col-1なら 8.33%、col-4なら33.33%、col-6なら50% といった具合。

 

containerと rowをひとつにまとめたクラスを用意すればOK!

以上を踏まえると、colはそのまま使うとして、containerと rowは クラスを自作して用意してもよさそうです。

例えばこんな感じ↓

CSS

.mycontainer{
	width:100%;
	display:flex;
	flex-wrap:wrap;
}

 

スポンサーリンク

ついでにわかったこと

bootstrap.cssを中身を覗いてみて ついでにわかったことをメモっておきます。

 

ブラウザのデフォルトCSSによる bodyパディング

実際に 上で書いた containerとrowをまとめた自作のクラスと、col一式をローカルにcssを作ってそれを読み込んで使ってみたら、ちゃんと機能はしたんですが、一部気に入らないところが。

この画像のように bootstrap.cssを読み込んだ場合はブラウザいっぱいにボックスが広がってるのに、自作cssを読み込んだ場合では隙間ができてしまっています。

デベロッパーツールでこれを確認すると、なんか勝手にbody { margin : 8px }ってなってる。。

どうやらこれは ブラウザにはデフォルトCSSというものがあって、それで指定されてるらしい。

ということで、bootstrap.css の中にはbody { margin : 0 }がありました。

 

全要素に box-sizing: border-box

containerは パディングを指定してるのにwidth : autoじゃなくwidth : 100%で横スクロールバーが出てないのが謎でした。

 

 

実際に上で 出てきた自作cssでは 横スクロールバーが出てました。

この謎は bootstrap.cssの中で 見出しの通り 下記のコードを見つけて解決。

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

 

スポンサーリンク

まとめ

やっぱり自分の目で確認すると理解が深まりますね。

それに人のコードをみると知らなかった事や、テクニック的なこともわかります。

Bootstrapは一応使えるけど中身を理解していないひとは、実際に自分で見てみることをおすすめします。