Material Design for Bootstrap4(その5)色・文字色の指定

Material Design for Bootstrap4(その5)色・文字色の指定

Bootstrapを使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap」。

そのBootstrap4対応バージョン、「Material Design for Bootstrap4(以下、MDB4と表記)」のご紹介5回目です。

今回は色・文字色のクラス指定について。

Material Design for Bootstrap

~ 目次 ~

  • MDB4の基本色
  • ダークカラー
  • 各色
  • RGBAの各色
  • MDB4の基本的な文字色
  • リンクの文字色
  • 各文字色

MDB4の基本色

まずは基本的な配色から。

デモページ:基本色

たとえば、クラス「default-color」を指定すると、「#2BBBAD」のカラーとなります。

本家Bootstrap4も同様の「bg-default」「bg-info」「bg-success」などの基本色のクラスが用意されてます。

ただ、Bootstrap4とMDB4の違いは
◇色が若干違って、マテリアルっぽい
◇「濃い目バージョン」が用意されていること
この2つですね。

ちなみに、本家Bootstrap4の配色は、こちらのブログを参照されてください。

ダークカラー

次に、ダークカラーです。
ここは無駄に凝ってますw

デモページ:ダークカラー

各色

続いて、各色です。
もの凄い数が揃ってます。

多すぎて画像では掲載不能なので、下記デモページを参照されてください。
デモページ:各色

たとえば、クラス「red」と「lighten-5」を指定すると、「#ffebee」の配色となります。

まさに至れり尽くせりで、クラス指定のみで細かい配色が可能ですね。

RGBAの各色

さらに、RGBAの配色も可能です。

「RGBAって何?」という方は、こちらを参照されてください。
要は「透過度」の調整が可能ということです。

下記デモページを参照されてください。
デモページ:RGBAの各色

たとえば、クラス「rgba-blue-light」を指定すると、「rgba(3, 169, 244, 0.3)」の配色となります。

透過度は
「slight」
「light」
「strong」
の3段階で調整が可能です。

MDB4の基本的な文字色

基本的な文字色です。

下記デモページを参照されてください。
デモページ:文字色

クラス指定は本家Bootstrap4と同じですが、色が若干違うのでご注意。
MDB4はマテリアルっぽい色になってます。

ちなみに、本家Bootstrap4の配色は、こちらのブログを参照されてください。

リンクの文字色

リンクの文字色です。

下記デモページを参照されてください。
デモページ:リンクの文字色

aタグに対して指定します。
マウスカーソルをホバーさせると、色が変化するのが分かると思います。

こちらもクラス指定は本家Bootstrap4と同じですが、色が若干違うのでご注意ください。

各文字色

各文字色です。

下記デモページを参照されてください。
デモページ:文字色

これもけっこうな種類が揃ってますね。

 

ken
色に関しては、MDB4は豊富な種類が揃ってます^^

 

関連記事

Material Design for Bootstrap4(その4)マスクの実装

2018.12.11

Material Design for Bootstrap4(その3)シャドウとホバーエフェクトの実装

2018.10.24

Material Design for Bootstrap4(その2)ボタンの実装

2018.10.18

Material Design for Bootstrap4(その1)導入とカードデザインの実装

2018.09.12