1. TOP
  2. >技術メモ>
  3. 【初心者の方向け】 Bootstrap4の使い方 カラー

【初心者の方向け】 Bootstrap4の使い方 カラー

技術メモ, Bootstrap4

2019/03/17
2022/07/21
【初心者の方向け】 Bootstrap4の使い方 カラー

この記事は【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-○○ で指定します。

 

 

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

 

テキストの例でカラーをアンカーに指定した場合、色が暗く変化する例を書きましたが、背景をした場合も同様にマウスオーバー時に色が変化します。例を載せてみたので、実際に確認してみてください。

 

アンカーに背景色を指定

 

・コード

<a href="#" class="p-3 mb-2 bg-primary text-white">アンカーに背景色を指定</a>

 

 

テキストや背景だけでは無く、ボーダーやボタン等にも色を指定する事ができます。Bootstrapで用意された色のみだと、どうしても似たようなサイトになってしまいますが、あらかじめ擬似クラスも指定されているので、CSSが苦手な方にはこの方法を覚えておいて損はないかと思います。

 

このサイトも使用している箇所が多いです♪

時短にもなるし便利だと思いますよ。

 

 

今回は、サンプルを用意していませんが、いろいろ試してみてください。

 

 

 

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本 Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。
ホームページ制作ならRU DESIGN

関連記事

ワードプレス各バージョンと使用可能なPHPバージョン一覧
2024/01/29
 WordPressのバージョンによって使用可能なPHPのバージョンは異なってきます。PHPのバージョンによっては、ワードプレスが正常に動作しなかったり、テンプ...
古いMacに「ChromeOS 」をインストールして利用
2023/10/08
 Googleが提供しているChrome OS(クローム・オーエス)は、Linuxをベースとしたオペレーティングシステム(OS)の1つ。その中でPCやMACでも...
公式サポートが終了した古いMacに最新のmacOSをインストールするプロジェクト
2023/10/07
 古いMacに最新のmacOSをインストールするプロジェクト「OpenCore Legacy Patcher」(OCLP)は、Appleが提供する最新のmacO...
【WordPress】古い投稿を現在の日付で再投稿してくれるプラグイン「Republish Old Posts」
2023/08/31
注意:パーマリンクに日付が含まれている場合は、このプラグインを使用しないでください。SEOプラグイン「All in One SEO」との相性もよくないそうです。...
Crayon Syntax Highlighterの代替プラグイン「Enlighter」
2023/06/05
 ソースコードをきれいに表示させるのに役立っていた「Crayon Syntax Highlighter」ですが、更新も止まったままの状態で再開の目処はなさそうで...