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

CSSを利用しなくても文字サイズやページレイアウトを簡単に整えることができます。

余白の指定

これまで、要素間の余白はCSSファイルで指定してきました。実は、Bootstrapでは余白の為のCSSクラスがあらかじめ用意されています。今回は、こちらから学んで行きましょう。

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

file

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

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

テキスト

テキストの「左寄せ・中央揃え・右寄せ」を指定する為のCSSクラスについてみていきましょう。前章では「desc」クラスに、「text-align: center;」をCSSファイルで設定しました。これも、Bootstrapではあらかじめ用意されているのです。

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

・テキストを省略する

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

file

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

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

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

テキストの太さの指定も、CSSクラスが用意されています。「font-weight」クラスです。「font-weight-bold」とすると太字になり、「font-weight-light」とすると細めの文字になります。

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

Flex

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

file

上図のように、余白がなくぴったりとくっついた状態で左寄せになります。

右寄せ（右から順に子要素をならべていく）場合は、「flex-row」の部分を「flex-row-reverse」とします。 file

次は、縦並びの場合をみてみましょう。「d-flex」までは先ほどと同じです。

file

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

Flex(x・y軸)

次は、要素の整列について詳しくみていきましょう。「flex」は、並び方だけではなく整列も簡単に行うことができます。複数の要素を、きれいに整列させることが出来るのです。

では、例を見ていきましょう。

file

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

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

◆実習：ユーティリティを使用

utilitie.htmlを作成して、Bootstrapのユーティリティを使ってみましょう。１ファイルの中で以下の３パートを作成していきます。

テキストと余白
FlexBox
そのほか

Bootstrap公式サイトの左メニューにある「Utilities」内を参考に作成してください。Bootstrap公式サイトからのコピー＆ペースト、一部はこれまでの復習を兼ねた若干のアレンジが入っています。オリジナルクラスは一切使用していません。

1.テキストと余白

図のようにテキスト部分のバリエーションを作ってみて下さい。 file

コピペ用テキスト

テキストと余白
シンプルにpタグのみで囲っています。サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト

ここはpタグに画面サイズ768px以上の時に、左右に3remずつpaddingをつけるクラスを入れます。サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト

ここはpタグに文字を中央寄せ、上下に1.5remずつmarginをつけるクラスを入れています。

ここはpタグにテキストを省略するクラスを入れています。サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト 123456789　987654321　サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト

2.FlexBox

下図のようなFlexboxの配置4パターンを作成します。 file

3.そのほか

影を付けてくれるshadowクラスと、枠線を付けてくれるborderクラスを試してみましょう。 file

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

レッスン一覧へ