「増補改訂版Bootstrap4入門」カラー【Udemyで学習】
このレクチャーではBootstrap4の「カラー・ユーティリティ」について、説明します。
最初は文字の色です。文字の色はtext-primaryやtext-secondaryクラスを適用します。Bootstrap4では色を色の名前で指定するのではなく、successやdangerなどといった文脈の単語で指定します。その文脈から連想される色で表示されます。文字の色だけではなく、背景色や、枠の色、ボタンの色など、色を指定するクラスは全て同じ単語で指定します。text-primaryは青系、text-secondaryはグレー、text-successは緑系、text-dangerは赤系、text-warningは黄色系、text-infoは水色系、text-lightは明るいグレー、text-darkは暗いグレー、text-whiteは白の文字色となります。
次は背景色です。背景色はbg-primaryやbg-secondaryクラスを適用します。文字の色と同じ単語なのでわかりすいと思います。
では、デモをご覧いただきます。
まずは、文字色です。ブラウザで実際の色をご確認ください。text-lightクラスとtext-whiteクラスが背景の白に隠れて見えないので、背景色をbg-darkに変更します。見えるようになりました。
次に、背景色です。こちらもブラウザで実際の色をご確認ください。この例では、文字の色が隠れないように、背景の色によって、text-whiteクラスまたはtext-darkクラスを適用しています。
以上で「カラー・ユーティリティ」の説明を終わります。次のレクチャーでは、Bootstrap4の「スペーシング・ユーティリティ」について説明します。
★★★ 続きはUdemyで ★★★
https://www.udemy.com/bootstrap4_for_developer_2
★★★ コース内でお逢いできることを楽しみにしています。 ★★★
