コース: Bootstrap 4 基本講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

テキストのカラーを定める

テキストのカラーを定める - Bootstrapのチュートリアル

コース: Bootstrap 4 基本講座

テキストのカラーを定める

このレッスンではあらかじめ用意されている テキストのカラーを定めてみたいと思います。 今ドキュメントには p 要素が 10 個ありまして ここはまだカラーのクラスが 定められていませんので デフォルトの黒になっています。 これにクラスで カラーを定めていきます。 そしてクラス名は実はもう ここに書いてある通りですね。 これを順番に設定していきましょう。 まず最初の要素ですね。 class で テキストのカラーはすべて text- で始まります。 そして primary ということで 薄いブルーですね。 次に class で text-secondary 少しグレーっぽい感じですね。 3番目、クラスは text- の success、 成功した場合のカラー。 うまくいきました、グリーンですね。 次、class で今度は危険な場合です。 text-danger ということで 注意してくださいという場合ですね。 それから class の text-warning こちらは警告ですね。 danger の方が強いという感じで 赤と黄色、信号の色ですね。 それから class で text-info 情報を知らせるような場合です。 class で 今度は text-light ということで ちょっと薄くなってしまいますから ここは背景色を入れましょう。 bg-dark ということで 背景色を黒にすると 色が見えてきますね。 それから次、class で text-dark これは黒ですね。 それから class text-muted 使えないような場合ですね。 ちょっと薄いのでここも まあいいでしょうか。 背景色 dark はいいでしょう。 最後ですね、class text-white 白抜きです。 これは背景色を黒くしないと 見えません。 bg-dark ということでこのように テキストにあらかじめ用意された Bootstrap のカラーを定めました。 これは a 要素に対しても 設定することができます。 ということで p 要素の中に a 要素を入れましょう。 ここはマルチカーソルを使います。 Dreamweaver の場合には option shift もしくは Windows の場合には Alt Shift を押しながらドラッグすると 連続した行が選択できます。…

目次