Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Bootstrap 2017.09.01

Bootstrapで5カラムのレイアウトを実装する

Tags: ,
最終更新日: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カラム使用

 

 

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?