Bootstrapで段組み間の余白を調整するコードを紹介します。
何も指定しない場合の表示動作を確認します。
下記のコードを記述します。
#cell {
border: none;
background-color: #d1d1d1;
color:#494949;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="Content/bootstrap.css" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link rel="stylesheet" href="Column-Gutter-01.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3" id="cell">
項目1<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目2<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目3<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目4<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目5<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目6<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目7<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目8<br />
<img src="icon.png" />
</div>
</div>
</div>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
ウィンドウ幅を狭くした状態です。
4段組みで表示されますが、枠と枠の間の余白が無いため、枠の境界がわかりにくいです。枠同士の余白を開けて表示したいです。
paddingを指定することで枠間に余白を入れることができます。
下記のコードを記述します。
.ItemList .col-3{
padding:10px 15px 10px 15px;
}
#cell {
border: none;
background-color: #d1d1d1;
color: #494949;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="Content/bootstrap.css" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link rel="stylesheet" href="Column-Gutter-02.css" />
</head>
<body>
<div class="container">
<div class="row ItemList">
<div class="col-3" id="cell">>
項目1<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目2<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目3<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目4<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目5<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目6<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目7<br />
<img src="icon.png" />
</div>
<div class="col-3" id="cell">
項目8<br />
<img src="icon.png" />
</div>
</div>
</div>
</body>
</html>
.ItemList .col-3 の記述により、ItemListクラス内の col-3クラスに対してスタイルを設定します。
padding:10px 15px 10px 15px; の記述により、左右に15ピクセル、上下に10ピクセルの余白を取ります。
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
先ほどのHTMLの表示より、上下と左右に空きがとられていることがわかりますが、背景色はグレーのままなのであまり見やすい状況ではありません。背景色を白にしてセル間の区切りがわかるようにしたいです。
先の例のCSSのコードを記述します。
.ItemList .col-3{
margin:10px 15px 10px 15px;
}
#cell {
border: none;
background-color: #d1d1d1;
color: #494949;
}
HTMLファイルは変更なし。
paddingでは内部に余白がとられるため、背景色がグレーのままとなってしまいます。marginに変更して外部に余白がとられるよう修正します。
上記のHTMLファイルを表示します。枠の間に余白が開くことが確認できましたが、枠の幅が変化するため、4段組みでの表示にならなくなってしまいます。Bootstrapの設定どおりに表示されないので、この動作では問題があります。
先の不具合を解消するため、paddingで余白を設定しつつ、枠間の背景色を設定するコードを紹介します。
下記のコードを記述します。
.ItemList .col-3{
padding:10px 15px 10px 15px;
}
#cell {
border: none;
background-color: #d1d1d1;
color: #494949;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="Content/bootstrap.css" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link rel="stylesheet" href="Column-Gutter-03.css" />
</head>
<body>
<div class="container">
<div class="row ItemList">
<div class="col-3">
<div id="cell">
項目1<br />
<img src="icon.png" />
</div>
</div>
<div class="col-3">
<div id="cell">
項目2<br />
<img src="icon.png" />
</div>
</div>
<div class="col-3">
<div id="cell">
項目3<br />
<img src="icon.png" />
</div>
</div>
<div class="col-3">
<div id="cell">
項目4<br />
<img src="icon.png" />
</div>
</div>
<div class="col-3">
<div id="cell">
項目5<br />
<img src="icon.png" />
</div>
</div>
<div class="col-3">
<div id="cell">
項目6<br />
<img src="icon.png" />
</div>
</div>
<div class="col-3">
<div id="cell">
項目7<br />
<img src="icon.png" />
</div>
</div>
<div class="col-3">
<div id="cell">
項目8<br />
<img src="icon.png" />
</div>
</div>
</div>
</div>
</body>
</html>
CSSではpaddingで余白を指定します。一方HTMLではcol-3を指定した枠の内側にコンテンツを表示する枠を記述します。この記述により、内側の枠に背景色を設定することで、枠間の余白が背景色で表示される動作になります。
<div class="col-3">
<div id="cell">
項目1<br />
<img src="icon.png" />
</div>
</div>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。枠間の余白が開き、背景色で余白が表示されています。
ウィンドウ幅を狭めた際の表示です。
先のHTMLでCSSを下記に変更します。左右の余白を%指定にします。
.ItemList .col-3{
padding:10px 0.5% 10px 0.5%;
}
#cell {
border: none;
background-color: #d1d1d1;
color: #494949;
}
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。枠間の余白が開き、背景色で余白が表示されています。
ウィンドウ幅を狭めた際の表示です。%で指定しているため、枠の幅に応じて余白の幅も狭まることが確認できます。
