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

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

余白の指定

前回、要素間の余白はCSSファイルで指定しました。

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

余白の種類は「margin・padding」両方のCSSクラスが用意されています。
では、指定の仕方を確認します。

このように「余白の種類・方向・ブレークポイント・サイズ」の順で指定します。
不要な項目は省略してOKです。
省略できるのは「方向」と「ブレークポイント」の２つになります。

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

テキスト

テキストの配置

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

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

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

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

font-weightを短縮した「fw-●●」というのが、Bootstrap5で文字の太さを指定できるクラス名。
「fw-bold」とすると太字になり、「fw-light」とすると細めの文字になります。

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

テキストの色を変更する

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

文字色は「text-●●」というクラス名で統一されています。
いくつか例を見てみましょう。

使用できるすべてのクラスは Utilities > Color で確認できます。
https://getbootstrap.jp/docs/5.0/utilities/colors/

テキストを省略する

長いテキストが省略して表示してあり、詳細ページに行くと全文見ることが出来るというサイトを見たことがあるかもしれません。
それも、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は、並び方だけではなく整列も簡単に行うことができます。複数の要素を、きれいに整列させることが出来るのです。

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

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

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

【実習】

前回使ったhtml（layout.html）で、Bootstrapのユーティリティクラスを使ってみましょう。
layout.htmlを複製（別名で保存）して、utilities.htmlにすると見返しやすいです。

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

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

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

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

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

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

◎まとめ

• サイト制作の際、頻繁に使用するマージンなどもCSSクラスが用意されている
• flexで複数の要素を美しく並べる
• また、きれいに整列させる