Bootstrapで5カラムのレイアウトを実装する
最終更新日: Update!!
レスポンシブコーディングを行うときに便利なBootstrapですが、あらかじめカラムのレイアウトが決まっているため制限があるのが悩みどころです。中でも5カラムにしたいという場合は少し工夫しないと難しいようです。今回はBootstrapで5カラムのレイアウトを実装するケースをまとめていきたいと思います。
1. 左に1カラム分の余白を入れる
元々Bootstrapにあるoffsetクラスを使用して、左に1カラム分の余白を入れて右を空けることで余白を出す方法です。大きな改修もなく、5カラムで中央寄せにできますが左右に余白ができてしまいます。 【HTML】<div class="row"> <div class="offset-md-1 col-md-2">カラム1</div> <div class="col-md-2">カラム2</div> <div class="col-md-2">カラム3</div> <div class="col-md-2">カラム4</div> <div class="col-md-2">カラム5</div> </div>
2. Bootstrap3で5カラム用のスタイルを作成する
新たに5カラム用のスタイルを作成し、要素に適用させる方法です。少し手間はかかりますが、本来のBootstrapに近い方法でコーディングすることができます。こちらはfloatを使用したBootstrap3での方法になります。Sassを使うと変数で管理できるので便利です。 【HTML】<div class="row"> // 5等分の5カラムレイアウト <div class="col-md-five-1">カラム1</div> <div class="col-md-five-1">カラム2</div> <div class="col-md-five-1">カラム3</div> <div class="col-md-five-1">カラム4</div> <div class="col-md-five-1">カラム5</div> </div> <div class="row"> // 変則的な5カラムレイアウト(合計が5になるように) <div class="col-md-five-3">3カラム分(5分の3)</div> <div class="col-md-five-2">2カラム分(5分の2)</div> </div>【CSS】
.col-lg-five-1, .col-md-five-1, .col-sm-five-1, .col-xs-five-1, .col-lg-five-2, .col-md-five-2, .col-sm-five-2, .col-xs-five-2, .col-lg-five-3, .col-md-five-3, .col-sm-five-3, .col-xs-five-3, .col-lg-five-4, .col-md-five-4, .col-sm-five-4, .col-xs-five-4 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-five-1 { width: 20%; float: left; } .col-xs-five-2 { width: 40%; float: left; } .col-xs-five-3 { width: 60%; float: left; } .col-xs-five-4 { width: 80%; float: left; } @media (min-width: 768px) { .col-sm-five-1 { width: 20%; float: left; } .col-sm-five-2 { width: 40%; float: left; } .col-sm-five-3 { width: 60%; float: left; } .col-sm-five-4 { width: 80%; float: left; } } @media (min-width: 992px) { .col-md-five-1 { width: 20%; float: left; } .col-md-five-2 { width: 40%; float: left; } .col-md-five-3 { width: 60%; float: left; } .col-md-five-4 { width: 80%; float: left; } } @media (min-width: 1200px) { .col-lg-five-1 { width: 20%; float: left; } .col-lg-five-2 { width: 40%; float: left; } .col-lg-five-3 { width: 60%; float: left; } .col-lg-five-4 { width: 80%; float: left; } }【SCSS】
$grid-gutter-width: 30px; .col-lg-five-1, .col-md-five-1, .col-sm-five-1, .col-xs-five-1, .col-lg-five-2, .col-md-five-2, .col-sm-five-2, .col-xs-five-2, .col-lg-five-3, .col-md-five-3, .col-sm-five-3, .col-xs-five-3, .col-lg-five-4, .col-md-five-4, .col-sm-five-4, .col-xs-five-4 { position: relative; min-height: 1px; padding-left: ($grid-gutter-width / 2); padding-right: ($grid-gutter-width / 2); } @for $i from 1 through 4 { .col-xs-five-#{$i} { float: left; width: percentage($i / 5); } @media (min-width: 768px) { .col-sm-five-#{$i}-5 { float: left; width: percentage($i / 5); } } @media (min-width: 992px) { .col-md-five-#{$i}-5 { float: left; width: percentage($i / 5); } } @media (min-width: 1200px) { .col-lg-five-#{$i}-5 { float: left; width: percentage($i / 5); } } }
3. Bootstrap4で5カラム用のスタイルを作成する
Bootstrap4ではflexbox対応になっていますので記述するスタイルも少し異なります。それ以外は先ほどのBootstrap3の時と似たような形で実装できます。 【HTML】<div class="row"> // 5等分の5カラムレイアウト <div class="col-md-five-1">カラム1</div> <div class="col-md-five-1">カラム2</div> <div class="col-md-five-1">カラム3</div> <div class="col-md-five-1">カラム4</div> <div class="col-md-five-1">カラム5</div> </div> <div class="row"> // 変則的な5カラムレイアウト(合計が5になるように) <div class="col-md-five-3">3カラム分(5分の3)</div> <div class="col-md-five-2">2カラム分(5分の2)</div> </div>【SCSS】
$grid-gutter-width: 30px; .col-xl-five-1, .col-lg-five-1, .col-md-five-1, .col-sm-five-1, .col-xs-five-1, .col-xl-five-2, .col-lg-five-2, .col-md-five-2, .col-sm-five-2, .col-xs-five-2, .col-xl-five-3, .col-lg-five-3, .col-md-five-3, .col-sm-five-3, .col-xs-five-3, .col-xl-five-4, .col-lg-five-4, .col-md-five-4, .col-sm-five-4, .col-xs-five-4 { position: relative; min-height: 1px; padding-left: ($grid-gutter-width / 2); padding-right: ($grid-gutter-width / 2); } .col-xs-five-1 { width: 20%; flex: 0 0 20%; float: left; } .col-xs-five-2 { width: 40%; flex: 0 0 40%; float: left; } .col-xs-five-3 { width: 60%; flex: 0 0 60%; float: left; } .col-xs-five-4 { width: 80%; flex: 0 0 80%; float: left; } @media (min-width: map-get($grid-breakpoints,sm)) { .col-sm-five-1 { width: 20%; flex: 0 0 20%; float: left; } .col-sm-five-2 { width: 40%; flex: 0 0 40%; float: left; } .col-sm-five-3 { width: 60%; flex: 0 0 60%; float: left; } .col-sm-five-4 { width: 80%; flex: 0 0 80%; float: left; } } @media (min-width: map-get($grid-breakpoints,md)) { .col-md-five-1 { width: 20%; flex: 0 0 20%; float: left; } .col-md-five-2 { width: 40%; flex: 0 0 40%; float: left; } .col-md-five-3 { width: 60%; flex: 0 0 60%; float: left; } .col-md-five-4 { width: 80%; flex: 0 0 80%; float: left; } .col-md-offset-five-1 { margin-left: 4.3333333%; } } @media (min-width: map-get($grid-breakpoints,lg)) { .col-lg-five-1 { width: 20%; flex: 0 0 20%; float: left; } .col-lg-five-2 { width: 40%; flex: 0 0 40%; float: left; } .col-lg-five-3 { width: 60%; flex: 0 0 60%; float: left; } .col-lg-five-4 { width: 20%; flex: 0 0 20%; float: left; } } @media (min-width: map-get($grid-breakpoints,xl)) { .col-xl-five-1 { width: 20%; flex: 0 0 20%; float: left; } .col-xl-five-2 { width: 40%; flex: 0 0 40%; float: left; } .col-xl-five-3 { width: 60%; flex: 0 0 60%; float: left; } .col-xl-five-4 { width: 20%; flex: 0 0 20%; float: left; } }今回のサンプルはこちらに用意しました。5カラムが実装できるとデザインの幅も広がり柔軟に対応できるかと思いますのでぜひ試してみてはいかがでしょうか。 (参考) 5 equal columns Bootstrap grid layout with 1, 2, 3, 4 of five bootstrap4での5カラム使用
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories