この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。
Bootstrapにはいくつかのカラーが用意されています。
今回はカラーの使い方を紹介します。
Bootstrap4のバージョン4.3をベースに書いています。
テキストカラー
文字色の指定は text-○○ で指定します。
白など一部見辛い色は背景色を指定しています。
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
上記を踏まえた例になります。
class名に指定することにより色が反映されます。
・文字の色
テキスト
・コード
<p class="text-success">テキスト</p>
・リンクの場合
・コード
<a href="#" class="text-success">リンク</a>
アンカーに使用した場合、擬似クラスのホバー（:hover）がデフォルト指定されています。
マウスオーバー時に色が暗く変化します。
バックグラウンドカラー
背景色の指定は bg-○○ で指定します。
テキストの例でカラーをアンカーに指定した場合、色が暗く変化する例を書きましたが、背景をした場合も同様にマウスオーバー時に色が変化します。例を載せてみたので、実際に確認してみてください。
・コード
<a href="#" class="p-3 mb-2 bg-primary text-white">アンカーに背景色を指定</a>
テキストや背景だけでは無く、ボーダーやボタン等にも色を指定する事ができます。Bootstrapで用意された色のみだと、どうしても似たようなサイトになってしまいますが、あらかじめ擬似クラスも指定されているので、CSSが苦手な方にはこの方法を覚えておいて損はないかと思います。
このサイトも使用している箇所が多いです♪
時短にもなるし便利だと思いますよ。
今回は、サンプルを用意していませんが、いろいろ試してみてください。
ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」
オリジナル絵本 Kindleにて出版
ナマケモノのふにゃまるちゃん
ドメイン取得は同じところで取得しておくと便利ですよ。
応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。 ■BTC 1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ ■MATIC 0xC75744667A7396DFF507cf44371A2CF0B6eEF03B ■ETH 0xC75744667A7396DFF507cf44371A2CF0B6eEF03B
関連記事
