Bootstrapで赤文字を表示する方法をサンプルコード付き解説!
BootstrapではHTMLタグのclass属性に提供されているクラスを指定するだけでテキストの文字色を変更することができます。今回は、Bootstrapで赤文字を表示する方法とその赤文字をカスタマイズする方法をサンプルコード付きで解説しています。
BootstrapとはCSSのフレームワークで、あらかじめスタイルが定義されたクラスが用意されているため、HTMLのタグに該当のクラスを適用するだけで簡単に整ったデザインのページを作成することができます。
今回はそんなBootstrapを使って文字色を赤色にする方法を解説します。
Bootstrapで赤文字を表示する方法
Bootstrapで文字色を変更するには、text-{文字色}
というクラスを指定します。
その中でも文字色を赤色に変更するには、text-danger
クラスを指定することで赤色にすることができます。
文字色を赤色に変更する
<p class="text-danger">danger</p>
Bootstrapで他の色の文字色に変更したり、背景色を変更する方法については下記の記事で紹介していますので、ぜひあわせて読んでみてください。
Bootstrapの赤文字の色をカスタマイズする方法
上記で解説したように、Bootstrapで赤文字を指定する方法はtext-danger
クラスを指定します。
Bootstrapで提供している赤文字を指定するクラスはtext-danger
だけであり、他の赤色を表現することができません。
そのため、ここでは他の赤色を表現するために赤文字の色をカスタマイズする方法を解説します。
Bootstrapを導入する2つの方法
カスタマイズする前にBootstrapを導入する2つの方法を紹介します。
その方法は下記の2つです。
- 既にホストされているファイルをインターネット経由で読み込む
- ソースをダウンロードして、ローカルに配置してから読み込む
自作のCSSでカスタマイズする
まずは「既にホストされているファイルをインターネット経由で読み込む」方法でBootstrapを導入した場合のカスタマイズする方法を紹介します。
この方法で導入した場合は、自作のCSSでカスタマイズすることができます。
bootstrap.css
.text-danger {
color: #dc3545!important;
}
Bootstrapでは.text-danger
クラスを上記のようにcolor
プロパティに#dc3545!important
という値を定義し、提供しています。
そのため、自作のCSSでは下記のように記述します。
index.css
.text-danger{
color: #ff2c41!important;
}
自作のCSSでも同じ.text-danger
クラスを用意して、上書きするようにしてあげることでカスタマイズすることができます。
また、この時Bootstrapを読み込むタグを記述した後に、自作のCSSを読み込むタグを記述するように注意してください。
そうしなかった場合には、上書きすることができなくなり赤文字の色をカスタマイズすることができません。
Bootstrapを直接カスタマイズする
次に「ソースをダウンロードして、ローカルに配置してから読み込む」方法で導入した場合のカスタマイズする方法を紹介します。
この方法で導入した場合は、上記の「自作のCSSでカスタマイズする」方法でもカスタマイズすることは可能ですが、ここではダウンロードしてきたBootstrapファイルを編集して直接カスタマイズします。
bootstrap.css
.text-danger {
color: #dc3545!important;
}
インターネット経由で読み込んだ場合と同様、上記のように10132行目辺りに.text-danger
クラスが記述されています。
bootstrap.css
.text-danger{
color: #ff2c41!important;
}
この.text-danger
クラスのcolor
プロパティの値を直接書き換えてあげることで、赤文字の色をカスタマイズすることができます。
まとめ
Bootstrapの赤文字の色をカスタマイズする方法を紹介してきましたが、上記の方法で他のクラスをカスタマイズすることも可能です。
しかし、あまりカスタマイズしすぎてしまうとBootstrapを使用するメリットが少なくなってしまいますので、カスタマイズのしすぎには注意が必要です。