Bootstrapで5カラムレイアウトを実現するカスタムCSSの作成方法

2020.08.20 2024.10.15 HP制作

Bootstrapは12分割のグリッドを採用しているため、通常は5等分されたレイアウトを実現することができません。

Bootstrapのグリッドシステムは、直感的で柔軟性が高く、レスポンシブデザインを簡単に作成できる便利なフレームワークです。しかし、デフォルトでは12等分されたカラムシステムを使用するため、例えば「5分割したい」といった特定のレイアウトを作成するのは少々手間がかかるかもしれません。

Bootstrap

ただし、コンテンツやデザインの都合で5カラムのレイアウトが必要な場合も少なくありません。例えば、製品一覧やメニュー項目のように、均等に分割されたカラムを表示したいケースでは、5等分のレイアウトを採用することでデザインが見やすく整います。

そこでこの記事では、Bootstrapの仕様に沿った形で独自のCSSを作成し、5カラムレイアウトを実現する方法を紹介します。この手法は、Bootstrap 4および5のどちらにも対応しています。

Bootstrapで5カラムレイアウトを作成する方法

Bootstrapは12分割のグリッドシステムを採用していますが、このままでは5等分にすることはできません。そこで、カスタムCSSを利用して、それぞれのカラムの幅を20%（12分割の5等分）に調整する方法をとります。この手法を使えば、Bootstrapのレスポンシブデザインの強みを活かしつつ、5等分のレイアウトを実現できます。

まず、5カラムのレイアウトを実装するために必要なHTMLとCSSのサンプルを以下に示します。

サンプルHTML

以下は、5カラムレイアウトの基本的なHTML構造です。Bootstrapの「row」クラスを使って、各カラムに対して「col-xs-15」などのクラスを割り当てます。

<div class="container">
    <div class="row">
        <div class="col-xs-15">1</div>
        <div class="col-xs-15">2</div>
        <div class="col-xs-15">3</div>
        <div class="col-xs-15">4</div>
        <div class="col-xs-15">5</div>
    </div>
</div>

上記のHTMLでは、「col-xs-15」というカスタムクラスを使って、各カラムが均等に20%の幅を持つように設定します。

サンプルCSS

次に、以下のCSSを使って、各カラムの幅を調整します。このCSSは、Bootstrapのレスポンシブデザインに対応するようにメディアクエリも含んでいます。

/* 5 Columns */
.col-15, .col-sm-15, .col-md-15, .col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        flex: 0 0 20%;
    }
}

@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        flex: 0 0 20%;
    }
}

@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        flex: 0 0 20%;
    }
}

このCSSでは、「sm」「md」「lg」それぞれに対応するメディアクエリを記述し、各ブレークポイントでカラムが20%（5分割）になるように設定しています。Bootstrapの既存のクラス名に倣い、「col-xs-15」「col-sm-15」「col-md-15」「col-lg-15」といったカスタムクラスを作成し、レスポンシブデザインに対応させています。

CSSのポイント解説
20%のカラム幅: 各カラムが20%の幅を持つように設定しています。これにより、5カラムレイアウトが実現されます。
Flexboxの利用: Bootstrap 4以降はFlexboxを使用しているため、flex: 0 0 20%で柔軟な幅調整が可能です。
メディアクエリ: @media (min-width: 768px)のようなメディアクエリを使用することで、異なる画面サイズに対応したレスポンシブレイアウトを実現します。

レスポンシブ対応の5カラムレイアウトの調整

このカスタムCSSは、レスポンシブデザインに完全対応しているため、画面幅が変更された場合でも、5カラムのレイアウトが維持されます。例えば、タブレット（min-width: 768px）やデスクトップ（min-width: 1200px）などの大きなデバイスで、カラムの幅が均等に調整され、見た目が整ったデザインになります。

6カラムやその他のカラム数への応用

同様の方法を使えば、6カラムやその他のカラム数のレイアウトも簡単に実現できます。例えば、6カラムにしたい場合は、各カラムの幅を16.66%に設定すれば良いです。基本的な考え方は同じで、Bootstrapの12分割システムに合わせて、希望するカラム数に応じたカスタムCSSを作成することが可能です。

  • 6カラム: 幅を16.66%に調整
  • 8カラム: 幅を12.5%に調整
  • 3カラム: 幅を33.33%に調整

このように、カスタムCSSを追加するだけで、任意のカラム数を持つレイアウトを作成できます。

まとめ

この記事では、Bootstrapで5カラムレイアウトを実現するためのカスタムCSSの作成方法について解説しました。Bootstrapのグリッドシステムは12分割が基本ですが、カスタムCSSを利用することで、5カラムといった任意の分割レイアウトを作成できます。

この方法を応用することで、6カラムや8カラムなど、デザインのニーズに合わせたレイアウトを柔軟に設定することが可能です。Bootstrapの便利な機能を活かしつつ、独自のレイアウトを実現するために、ぜひこの記事を参考にしてみてください。