0%

Programmingプログラミングナレッジ

Posted:2017.09.01

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

レスポンシブコーディングを行うときに便利な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カラム使用

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】