ユーティリティ

• 余白の指定
• テキスト
• Flex
• Flex(x・y軸)

 

 

余白の指定

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

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

 

 

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

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

 

 

テキスト

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

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

 

・テキストを省略する

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

 

 

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

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

 

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

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

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

 

 

Flex

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

 

上図のように、余白がなくぴったりとくっついた状態で左寄せになります。 右寄せ（右から順に子要素をならべていく）場合は、「flex-row」の部分を「flex-row-reverse」とします。

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

 

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

 

 

Flex(x・y軸)

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

 

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

 

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

 

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

 

 

◆LP制作課題④

前回までのLP課題で作った部分を、 Bootstrapのcssクラスを使用したものに変更してみましょう。

Bootstrapのcssクラスへ変更

 

オリジナルでcssを設定していたクラスを取り外し、 Bootstrapのクラスに気に変えても下図のようにレイアウトが保たれていればOKです。

 

CSSファイルを作って一から細かく指定して作成するよりも、Bootstrapで用意されたクラスを使う方が素早く簡単に行えることがわかりますね。