前回まででそもそもBootstrapとは、Bootstrapのコンテナやよく使用するスタイル(クラス)の解説をしてきました。
それだけでも生産性、メンテナンス性の高いWebサイトが構築が可能です。
前回までの記事
今回はもう一歩踏み込んで、Bootstrapで一番使用されるであろう、強力なグリッドシステムとテーブルについて解説をしていきます。
Bootstrapのグリッドシステム
Bootstrapのグリッドシステムは1行を12の列に区切り、5段階のレスポンシブデザイン(xs、sm、md、lg、xl)に対応しています。
グリッドシステムを使用するには前回説明したcontanerクラスが必須です。
詳細の仕様や記述例を見ています。
Bootstrapのグリッドシステムの詳細
Bootstrapのグリッドシステムの詳細は以下のとおりです。
- コンテナ(container)で行(row)、列(col)を囲む
- 各列には左右にpadding(15pxずつ)が定義されている
- 各列の左右のpaddingはno-guttersクラスを指定することで解除することが可能
- コンテンツは列(row)以下に配置する
- 列は行ごとに12の列(col)の中から使用する列の数を指定できる
- グリッドのブレークポイントは、最小幅のメディアクエリに基づく
例えばsm-4は画面サイズがsm、md、lg、xl時に適用され、lg-4は画面サイズがlg、xl時に適用される
Bootstrapのグリッドシステムの記述例
Bootstrapのグリッドシステムを使用する場合は以下のように記述します。
記述例1)
<div class=“container”> <div class=“row”> <div class=“col-sm-2>列1</div1> <div class=“col-sm-8>列2</div1> <div class=“col-sm-2>列3</div1> </div> </div>
上記の記述例の場合だと画面サイズがsm以上の時に列1と列3は2列分の幅を持った要素となり、列2は8列分の幅を持った要素となることになります。
ちなみに列数の合計が12以上になるように指定すると、12列に入りきらない要素は改行されて表示されます。
記述例2)
<div class=“container”> <div class=“row”> <div class=“col-md>列1</div1> <div class=“col-md>列2</div1> <div class=“col-md>列3</div1> </div> </div>
上記の記述例の場合だと画面サイズがmd以上の時に列1から列3それぞれが4列分の幅を持った要素となります。
(列数を省略すると列数を等分になる)
記述例3)
<div class=“container”> <div class=“row”> <div class=“col-sm co-lg-3>列1</div1> <div class=“col-sm co-lg-6>列2</div1> <div class=“col-sm co-lg-3>列3</div1> </div> </div>
上記の記述例の場合だと画面サイズがsm以上lg未満の時に列1から列3それぞれが4列分の幅を持った要素となり、画面サイズがlg以上の場合は列1と列3が3列分の幅を持った要素、列2が6列分の幅を持った要素とります。
このようにサイズを複数記述することによってレスポンシブデザインにも容易に対応することが可能です。
Bootstrapのグリッドシステムの列数の変更方法
Bootstrapではグリッドシステムの基本の列数は12個という話しをしましたが、SASSを修正することで基本の列数を変更することができます。
ここではSASSファイルのダウンロードは前回説明しているので、前回の記事を参照ください。
■グリッドシステムの基本の列数の変更方法
- 「_variables.scss」をエディタで開きます
- グリッドの基本の列($grid-colums)の値を修正する
- SASSをコンパイルする
※$grid-gutter-widhtの値を修正すると各列の左右に入るpaddingの値を修正することができます(初期値は30px)
以上でグリッドシステムの基本の列数の変更は完了です。
Bootstrapのテーブル
Bootstrapを使用するとおしゃれなテーブルも簡単に作成することができます。
Bootstrapのテーブルの設定方法
Bootstrapでは<table>タグにtableクラスを設定することで、BootstrapのCSSで定義されている標準的なテーブルを作成することができます。
記述例)
<table class=“table”> <tr> <th>カラム1ヘッダー</th> <th>カラム2ヘッダー</th> </tr> <tr> <td>カラム1データ1</td> <td>カラム2データ1</td> </tr> <tr> <td>カラム1データ2</td> <td>カラム2データ2</td> </tr> <tr> <td>カラム1データ3</td> <td>カラム2データ3</td> </tr> </table>
tableクラスをtable-darkクラスに変更することで、背景が黒、文字色が白のテーブルになります。
Bootstrapのテーブルのテーブルヘッダーオプション
Bootstrapは<thead>タグにクラスを設定することで、<thead>タグの色を反転、灰色に変更することができます。
<thead>タグに設定するクラスは以下の通りです。
- thead-light：テーブルのヘッダーを灰色にする
- head-dark：テーブルのヘッダー色を反転させる
記述例)
<table class=“table”> <thead class=“thread-light”> <tr> <th>カラム1ヘッダー</th> <th>カラム2ヘッダー</th> </tr> </thead> ・ ・ ・ </table>
Bootstrapのテーブルのデータ行を交互に色を変える
Bootstrapを使用するとテーブルのデータ行の交互に色を変えるということも<tbody>タグにクラスを設定するのみで実現可能です。
記述例)
<table class=“table”> ・ ・ ・ <tbody class=“table-striped> <td>カラム1データ1</td> <td>カラム1データ2</td> </tbody> ・ ・ ・ </table>
これは<table>タグにtable-darkを指定して色を反転している場合にも有効です。
Bootstrapのテーブルのホバーを有効にする
Bootstrapを使用するとテーブルの行にマウスカーソルをホバーした時に色を変えることも容易にできます。
記述例
<table class=“table table-hover”> ・ ・ ・ </table>
これは <table> タグにtable-darkを指定して色を反転している場合にも有効です。
まとめ
今回はBootstrapを使用する上で強力なグリッドシステムとテーブルシステムについて解説しました。
特にグリッドシステムについてはレスポンジブデザインへの対応も容易にできるため、Bootstrapの中でもグリッドシステムのみを導入するという方もいる程です。
(グリッドシステムのみ導入とはグリッドに関するクラス以外は使用しないということです)
これまで解説してきたBootstrapとは？というところから、コンテナやよく使用するスタイルについてを見ていただけたら分かるとおり、Bootstrapを使用すると、高い生産性でメンテナンス性の高いWebサイトを作成することができます。
この記事を機会にBootstrapをマスターしてサクッとWebサイトを作成できるようにしておきましょう。
筆者プロフィール
名前：じゅに
専門学校卒業後、九州でソフトウェア会社の設計・開発業務を15年経験。
うつ病で2度の休職を行うが、いずれも復職し、現在も専門学校卒業後に入社したソフトウェア会社にて勤務を行う。
お客様と使用を積める上流の仕事よりも、実際のソフトウェアの設計・開発業務が好き。
家族構成は妻と息子2人の4人家族。
現在の会社はビジネスソフト系なので、独学でWeb系を勉強中。
その傍らWebメディアにエンジニア関連の記事の寄稿を行う。
ブログ：Jyu2ログ(https://jyu2log.com/)
Twitter：@Jyu210
