ユーティリティ・アイコン
CSSを利用しなくても文字サイズやページレイアウトを簡単に整えることができます。
◎余白の指定
これまで、要素間の余白はCSSファイルで指定してきました。実は、Bootstrapでは余白の為のCSSクラスがあらかじめ用意されています。今回は、こちらから学んで行きましょう。まず、余白の種類ですが「margin・padding」ともにCSSクラスが用意されています。では、指定の仕方を確認します。
このように「余白の種類・方向・ブレークポイント・サイズ」の順で指定します。不要な項目は省略してOKです。省略できるのは「方向」と「ブレークポイント」の２つになります。
このクラスをHTML内で指定すれば、CSSファイルで余白を書く必要はありません。とても簡単で、制作する時間も短縮できますね。
◎テキスト
テキストの「左寄せ・中央揃え・右寄せ」を指定する為のCSSクラスについてみていきましょう。前章の「desc」クラスに、「text-align: center;」をCSSファイルで設定しました。これも、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」は、並び方だけではなく整列も簡単に行うことができます。複数の要素を、きれいに整列させることが出来るのです。では、例を見ていきましょう。
これは、横並びの場合の整列例です。中央に揃える事も出来ますし、間隔を均等に開けて整列させる事も出来ます。画像やアイコンなど、様々な要素をきれいに整列させる事が出来るので、色々なサイトを作っていく上でとても重要なクラスです。
次は、縦並びの場合です。こちらも、使うクラスは同じです。意味も同じになります。
◎アイコン
アイコンを使いたい場合は、Bootstrapが推奨しているサイトから読み込んで使用します。３つのサイトがBootstrapのサイトで紹介されています。今回はその中から、Font Awesomeというサイトを使用した方法を学んでいきます。まず、以下サイトにアクセスしてください。
このサイトのアイコンは、WEBフォントアイコンと呼ばれるものです。これは、通常の画像アイコンと違い、CSSでカラーやサイズを変えられるなどフォントとして扱われるのです。画像は表示する際に、読み込みの時間が若干かかってしまいます。しかし、こちらはフォントという扱いなので、画像よりも早く表示されます。
では、使い方について確認していきます。まず、トップページのナビゲーションから「Get started」を選択します。次に、以下赤枠部分のコードをコピーしてください。これは、Bootstrap導入の際と同じCDNです。このサイトのアイコンを使用する為の準備の方法は、ダウンロードとCDNの２種類あります。今回は、CDNで行なっていきます。
上記がそのコードです。これを、「index.html」の
タグ内に貼り付けて下さい。これで、アイコンを使う準備が整いました。とても、簡単ですね。
次に、使用するアイコンを選びましょう。ナビゲーションから「Icons」を選択し、アイコン一覧のページに移動します。アイコンの色が、２色ありますね。これは、ブラックが無料で使えるもの、薄いグレーが有料のものという意味です。今回は、無料のものを選択します。どれでも構いませんので、アイコン部分を押下してみましょう。
以下イメージをみてください。これは、Amazonのアイコンです。このサイトには、ツイッターやフェイスブックなどのアイコンも存在します。サイト制作の際に、よく使うアイコンがそろっています。また、以下イメージを見てもらうとわかるように、カラーが設定されているように見えますね。これは、こんな風にカスタマイズ出来ますというような例になります。デフォルトのカラーはブラックなので気にせず進めていきましょう。
使用するアイコンが決まったら、以下赤枠部分のコードをコピーします。あとは、HTMLファイルに貼り付けるだけです。
実際に貼り付けてもらうと分かるかと思いますが、デフォルトのサイズは少し小さめです。ですので、任意のサイズにカスタマイズしてみます。
青いハイライト部分を、貼り付けたアイコンのコードに追加します。サイズごとに、CSSクラスがありますね。
また、カラーを変更したい場合は、クラス部分にオリジナルのCSSクラスを追加します。そして、CSSファイルの方で「color: #333;」というように色を指定してください。
◎LP制作④
前回は、テキストやボタンを追加しました。今回は「flex」で整列などの細かい部分の調整を行いましょう。また、アイコンも追加してみましょう。まず、整列などから行なっていきます。マージンもBootstrapで用意されているCSSクラスを使うように変更します。
CSSファイルで色々と細かく指定するよりも、用意されたクラスを使う方が素早く簡単に行えることがわかると思います。
では、次にアイコンを使っていきましょう。先ほどの項目を参考に、アイコンを使う準備をしてみてください。そして、どのアイコンでも構いませんので3つ選び配置してみましょう。
ここでも、flexやマージンのCSSクラスを使っています。これらを使う機会は多いと思いますので、慣れておきましょう。
ここまでを、うまく行えた場合の完成イメージです。アイコンの種類や写真は異なっていて構いませんが、配置などは同じように作る事が出来ていますでしょうか？
◎まとめ
・サイト制作の際、頻繁に使用するマージンなどもCSSクラスが用意されている
・flexで複数の要素を美しく並べる
・また、きれいに整列させる
・Bootstrapが推奨するアイコンは、WEBフォントアイコンである
・画像アイコンと違い、CSSで簡単にサイズやカラーを変更できる