Bootstrapのユーティリティを理解する【図解たっぷりBootstrap入門】

• ユーティリティとは
• 余白の指定
• テキスト
• FlexBoxレイアウト
• 【実習】
• ◎まとめ

ユーティリティとは

前回のレッスンで、ナビゲーションバーの背景色を変えるのに使ったbg-**クラス。
こちらはユーティリティ（Utilities）にグルーピングされている、BackgroundのページでCSSクラスを確認しました。

今回は、このユーティリティ（Utilities）に分類されているBootstrapのクラスを見ていきます。

コンポーネントとユーティリティの違い

今まで使ってきた Navbar や Card はコンポーネント（Components）と呼ばれていましたね。
コンポーネントは「ボタン」「ナビゲーションバー」などのパーツを作るために必要なスタイル指定をまとめたものです。

対して、今回見ていくユーティリティは「背景色を設定する」「余白を加える」など、目的に合わせた単体のスタイル指定のみが設定されたクラスをイメージしていただくと、違いが分かりやすいです。

• コンポーネント：特定のパーツを作るために必要なスタイル指定を、まとめてクラス化したもの
• ユーティリティ：background-color: rgb(13, 110, 253);など、1つのスタイル指定のみがクラス化されている

余白の指定

『レイアウト方法をマスターしよう』のレッスンでは、要素間の余白はcontainer-mという独自クラスを作って指定しました。

実は、Bootstrapでは余白の為のCSSクラスがあらかじめ用意されています。
今回は、こちらから学んで行きましょう。

余白は「margin」「padding」どちらも、用意されているCSSクラスを使って設定できます。

どちらも公式ドキュメントではSpacingのページで紹介されています。

URL：https://getbootstrap.jp/docs/5.3/utilities/spacing/

では、指定の仕方を確認します。

このように「余白の種類・方向・ブレークポイント・サイズ」の順で指定します。

不要な項目は省略してOKです。
省略できるのは「方向」と「ブレークポイント」の２つになります。

このクラスをHTML内で指定すれば、CSSファイルで余白を書く必要はありません。
とても簡単で、制作する時間も短縮できますね。

テキスト

では次に、テキストに関係するユーティリティクラスを見ていきましょう。

テキストの配置・太さ

テキストの配置

Text alignment、文字の「左寄せ・中央揃え・右寄せ」を指定する為のCSSクラスについてみていきましょう。

では、使い方を確認します。
こちらも、ブレークポイントを指定できます。

テキストの太さを変更する

Bootstrapでは、テキストの太さの指定にもCSSクラスが用意されています。

Bootstrap5で文字の太さを設定するクラス名は、font-weightを短縮したfw-**から始まります。
fw-boldクラスを指定すると太字に、fw-lightクラスだと細めの文字になります。

では、見え方を確認しましょう。

そのほかにも、公式ドキュメントの「Text」ではフォントサイズの変更など、様々なクラスが紹介されています。

URL：https://getbootstrap.jp/docs/5.3/utilities/text/

テキストの色

文字色の変更にも、BootstrapはいくつかCSSクラスを用意してくれています。

文字色（CSSのcolorプロパティ）に関するクラスは、Textではなく「Colors」のページで紹介されています。
最初のうちはページが飛び飛びで、ちょっと探すのが面倒に感じるかもしれませんね。

URL：https://getbootstrap.jp/docs/5.3/utilities/colors/

文字色を設定するクラス名はtext - Boostrapの色名という形になっています。
いくつか例を見てみましょう。

テキストを省略する

長いテキストが省略して表示してあり、詳細ページに行くと全文見ることが出来るというサイトを見たことがあるかもしれません。
それも、Bootstrapで用意されているCSSクラスの追加のみで実現できます。

テキストの省略はtext-truncateというクラスを使用します。

例では、ｐタグにこのクラスを適用していますが、他にもspanタグやdivタグなどにも適用する事が出来ます。

しかし、タグによってはtext-truncateクラスが効かない場合があります。
その場合はd-inline-block もしくはd-blockも併せて指定する必要があります。
これは、テキストを囲っている要素を、インラインブロックもしくはブロック要素に変えるためのクラスです。

FlexBoxレイアウト

要素の並び方を指定したいときには、「flex」を使います。

「flex」とは、「display(表示形式)」の値の一つです。
「flex」を使うと、要素の表示の仕方(並び方など)を簡単に指定できます。

Flexアイテムの並べ方

flexを使った横並びの方法を確認します。
下図のようにクラスを書くと、余白がなくぴったりとくっついた状態で左寄せになります。

右から順に子要素を並べたい場合は、flex-rowではなくflex-row-reverseクラスを使います。

次は、縦並びの場合をみてみましょう。d-flexクラスまでは先ほどと同じです。
子要素を縦に配置するためには、flex-columnというクラスを追加します。

このようにd-flexは、グリッドシステムだけではうまく並べられない時などに便利なクラスです。

要素の揃え位置(x・y軸)

次は、要素の整列について詳しくみていきましょう。

d-flexは、並び方だけではなく整列も簡単に行うことができます。
複数の要素を、きれいに整列させることが出来るのです。

では、例を見ていきましょう。
これは、横並びの場合の整列例です。

中央に揃える事も出来ますし、間隔を均等に開けて整列させる事も出来ます。
画像やアイコンなど、様々な要素をきれいに整列させる事が出来るので、色々なサイトを作っていく上でとても重要なクラスです。

次は、縦並びの場合です。
こちらも、使うクラスは同じです。意味も同じになります。

【実習】

Bootstrapのユーティリティクラスを使って、『Bootstrap5のレイアウト方法をマスターしよう』で作ったcomponents.htmlを改良しましょう。

components.htmlを複製（別名で保存）して変更すると、変更前・変更後が見比べやすいです。

1.matgin-topをbootstrapクラスに変更

カードエリアや２カラムエリアなど、それぞれ余白を加えるために「container-m」クラスを使っていました。
このクラスを削除して、Bootstrapの「mt-5」クラスを追加してみましょう。

上図のように、ビッグイメージとカードの間の距離が少なくなっていればBootstrapのクラスに切り替えられています。

2.カードフッターの文字を右寄せに

グレーの背景色がついているカードフッター部分。
Bootstrapのクラスを使って、文字を右寄せ（右揃え）に変更しましょう。

他にもBootstrapには色々なクラスが用意されています。
componentsやutilitiesの項目を見て、気になるものは試してみましょう！

◎まとめ

• サイト制作の際、頻繁に使用するマージンなどもCSSクラスが用意されている
• 文字の太さや色も、用意されたCSSクラスで変更可能
• flexレイアウトを使うと複数の要素を美しく並べられる
• flexユーティリティで、きれいに整列させる事も可能