前回はBootstrapとは？というところから、Bootstrapの導入方法、導入した際のメリット、デメリットを解説しましたので、Bootstrapがどんなものかということは理解して頂けたと思います。
今回はより実践的な形ということで、Bootstrapの基本であるコンテナの解説とよく使用するクラス(スタイル)についての解説をしていきます。
Bootstrapのコンテナ
BootstrapのコンテナはBootstrapを扱う上で基本となり、Bootstrapで強力なグリッドシステムを使用する場合にも必須となります。
コンテナはHTMLのタグに対してクラスとして指定し、主にセクション毎の一番外側の<div>タグや<section>タグに指定します。
Bootstrapのコンテナは3種類用意されており、固定幅のコンテナ(ブレークポイントでmax-widthが変わる)ものか、常にmax-widthが100%のコンテナから選択します。
- container
- container-ブレークポイント(sm、md、lg、xl)
- container-fulid
記述例）
<div class=“container”> </div>
順番に詳細を見ていきましょう。
container
containerクラスは各ブレークポイントでmax-widthをが設定されます。
画面サイズとmax-widthの設定は以下の通りです。
画面幅：max-widthの値
- 576px以下：100%
- 576px以上(sm)：540px
- 768px以上(md)：720px
- 992px以上(lg)；960px
- 1200px以上(xl)：1140px
画面サイズが576px以下以外の場合は画面幅より小さいmax-widthが設定されることで、両脇に少しスペースが入るコンテナ(要素)が作成されます。
container-ブレークポイント
container-ブレークポイント(sm、md、lg、xl)は指定されたブレークポイントまではmax-widthは100%となりますが、それ以上の画面幅となるとcontainerと同様に画面幅より少し小さい値がmax-widthに設定されることになります。
その設定される値はcontainerを指定した場合と変わりません。
例：container-mdの場合)
画面幅：max-widthの値
- 576px以下：100%
- 576px以上(sm)：100%
- 768px以上(md)：100%
- 992px以上(lg)；960px
- 1200px以上(xl)：1140px
container-fulid
container-fulidを指定された場合は、どの画面幅でもmax-widthは100%に指定されます。
これにより、画面幅いっぱいまで伸びている要素が作成できます。
Bootstrapでの色の設定
Bootstrapには基本色とテーマ色が設定されており、それぞれSASSで管理されています。
実際にコーディングを行う時はテーマ色を意識してコーディングをすることになります。
■基本色
- $blue：#007bff
- $indigo：#6610f2
- $purple：#64f42c1
- $pink：#e83e8c
- $red：#dc3545
- $orange；#fd7e14
- $yellow：#ffc107
- $green：#28a745
- $teal：#20c997
- $cyan：#17a2b8
■テーマ色
- $primary(一番大事な色)：$bule
- $secondary(二番目に大事な色)：$gray-600
- success(成功色)：$green
- $info(情報色)：$cyan
- $warning(警告色)：$yellow
- $danger(危険色)：$red
- $light(明るい色):：$gray-100
- $dark(暗い色)：$gray-800
上記の色から変更がない場合は特にSASSを意識する必要はありません。
文字色の設定方法
文字色を変更する場合はtext-テーマ色(primary等)のクラスを指定して変更します。
記述例)
<p class=“text-primary)>テスト<p>
背景色の設定方法
背景色を変更する場合はbg-テーマ色(primary等)のクラスを指定して変更します。
記述例)
<p class=“bg-primary”>テスト</p>
基本色・テーマ色の変更方法
基本色・テーマ色を変更したい場合はbg-primaryなどのクラスのcssを上書きするという方法もありますが、それだとbg-primary、text-primaryの二つのクラスのcssを変更する必要があるので手間がかかります。
厳密にはそれ以外にも後述するborder-primaryなど、他にもテーマ色を使用しているクラスがあるので、煩雑なりますし、修正漏れの危険性が高くなってしまいます。
それを防ぐために基本色・テーマ色を一括で変更する方法を解説します。
■基本色・テーマ色の一括変更方法
- Bootstrap公式サイト(https://getbootstrap.com/)の「Dowload」ボタンをクリック
- 「Source files」の下部にある「Download sourcde」ボタンをクリックし、zipファイルのダウンロードを行います
- ダウンロードしたzipファイルを解凍し、「sass」フォルダがあることを確認します
※「sass」フォルダ以外にも様々なフォルダやファイルがあります - 「sass」フォルダ内の「_variables.scss」をエディタで開きます
- 基本色($blueなど)、テーマ色($primaryなど)を任意の色に変更します
- 「_variables.scss」をコンパイルします
上記を行うことによって、基本色・テーマ色を一括変更することが可能です。
Bootstrapでの枠線の設定
Bootstrapには要素の枠線を指定するクラスが定義されているので、枠線を設定するためにCSSを記述する必要はありません。
枠線の設定方法
Bootstrapを使用して枠線の設定を行うクラスは以下の通りです。
- border：要素の4方向全ての枠線を設定する
- border-top：要素の上の枠線を設定する
- border-right：要素の右の枠線を設定する
- border-bottom：要素の下の枠線を設定する
- border-left：要素の左の枠線を設定する
記述例)
<div class=“border-top”></div>
枠線の色の設定方法
Bootstrapを使用して枠線の色の設定を行うクラスは以下の通りです。
- border-テーマカラー名
記述例)
<div class=“border-top border-primary”></div>
枠線の丸みの設定方法
Bootstrapを使用して枠線の丸み(border-radius)の設定方法は以下の通りです。
- round：全て角に丸みを持たせる
- round-top：上方向の角に丸みを持たせる
- round-right：右方向の角に丸みを持たせる
- round-bottom：下方向の角に丸みを持たせる
- round-left：左方向の角に丸みを持たせる
- round-circle：円形になるように丸みを持たせる
- round-pill：薬のカプセルの形になるように丸みを持たせる
記述例)
<div class=“round-top”></div>
Bootstrapでの余白の設定
Bootstrapには要素の余白(margin、padding)を指定するクラスが定義されているので、余白を設定するためにCSSを記述する必要はありません。
しかし、定義されているクラスは予め定義されている5段階のサイズ調整しかできないので、細かい余白を設定したい場合はCSSを記述する必要があります。
margin
Bootstrapを使用してmarginを設定するクラスは以下の通りです。
- m-サイズ：4方向全てにmarginを設定する
- mt-サイズ：上方向にmarginを設定する
- mr-サイズ：右方向にmarginを設定する
- mb-サイズ：下方向にmarginを設定する
- ml-サイズ：左方向にmarginを設定する
- mx-サイズ：左右方向にmarginを設定する
- my-サイズ：上下方向にmarginを設定する
記述例)
<div class=“mt-3”></div>
サイズには0〜5の数値とautoが指定できます。
padding
Bootstrapを使用してpaddingを設定するクラスは以下の通りです。
- p-サイズ：4方向全てにpaddingを設定する
- pt-サイズ：上方向にpaddingを設定する
- pr-サイズ：右方向にpaddingを設定する
- pb-サイズ：下方向にpaddingを設定する
- pl-サイズ：左方向にpaddingを設定する
- px-サイズ：左右方向にpaddingを設定する
- py-サイズ：上下方向にpaddingを設定する
サイズには0〜5の数値が指定できます。
余白サイズの変更方法
margin、paddingのサイズに数値を指定した場合、下記のような値が設定されます。
- 0：0
- 1：0.25rem
- 2：0.5rem
- 3：1rem
- 4：1.5rem
- 5：3rem
これを変更したい場合は基本色、テーマ色を変更した場合と同様にSASSを修正する必要があります。
■余白サイズの変更方法
①〜④は基本色・テーマ色の一括変更方法を参照。
⑤余白のサイズ定義($spacers)を修正します
⑥「_variables.scss」をコンパイルします
Bootstrapでのfloatの設定
Bootstrapには要素に対してのfloat(要素の回り込み)を指定するクラスが定義されているので、floatを設定するためにCSSを記述する必要はありません。
また、レスポンシブデザインにも対応したクラスも用意されています。
floatの設定方法
Bootstrapを使用してfloat(要素の回り込み)を設定するクラスは以下の通りです。
- float-left：左方向に要素を回り込みさせる
- float-right：右方向に要素を回り込みさせる
- float-none：要素の回り込みをさせない
- float-画面サイズ-left：指定された画面サイズの時に左方向に要素を回り込みさせる
- float-画面サイズ-right：指定された画面サイズの時に右方向に要素を回り込みさせる
- float-画面サイズ-none：指定された画面サイズの時に要素の回り込みをさせない
記述例)
<div class=“float-sm-left”></div>
画面サイズにはsm、md、lg、xlが指定できます。
floatのクリア方法
Bootstrapを使用してfloat(要素の回り込み)をクリアするクラスは以下の通りです。
- clearfix：float(要素の回り込み)を解除する
記述例)
<div class=“float-left”></div> <div class=“clearfix”></div>
floatを設定すると設定した要素以降全てにfloatが適用されるので、必ず上記クラスを使用してfloatのクリアを行う必要があります。
まとめ
今回はBootstrapを使用する上で必須となるコンテナについてと、よく使用するクラスの解説を行いました。
今回紹介したクラス以外でも設定することでCSSの記述を行わなくてもよくなるクラスはたくさんあります。
このことにより、HTMLを記述するのみで大方のレイアウトはできてしまうので、Bootstrapを使用すると高い生産性でWebサイトを作成することが可能となります。
また、CSSもすっきりし、クラスの仕様もはっきりとしているので、メンテナンス性も高いWebサイトとなります。
次回はBootstrapの中でも協力なレスポンシブデザインに対応したグリッドシステムを中心に紹介しますので、これを期にBootstrapをマスターしておくことをオススメします。
筆者プロフィール
名前：じゅに
専門学校卒業後、九州でソフトウェア会社の設計・開発業務を15年経験。
うつ病で2度の休職を行うが、いずれも復職し、現在も専門学校卒業後に入社したソフトウェア会社にて勤務を行う。
お客様と使用を積める上流の仕事よりも、実際のソフトウェアの設計・開発業務が好き。
家族構成は妻と息子2人の4人家族。
現在の会社はビジネスソフト系なので、独学でWeb系を勉強中。
その傍らWebメディアにエンジニア関連の記事の寄稿を行う。
ブログ：Jyu2ログ(https://jyu2log.com/)
Twitter：@Jyu210
