フォントカラーを変えてみよう

spanタグなどのインライン要素に class="blue"などのクラスを指定すると、タグで括られたテキストのフォントカラーを変更できます。

表示サンプル

このテキストはグレーで表示しています。
このテキストはブルーで表示しています。
このテキストはライトブルーで表示しています。
このテキストはグリーンで表示しています。
このテキストはイエローで表示しています。
このテキストはオレンジで表示しています。
このテキストはレッドで表示しています。
このテキストはピンクで表示しています。

このサンプルのコード

このテキストはグレーで表示しています。
このテキストはブルーで表示しています。
このテキストはライトブルーで表示しています。
このテキストはグリーンで表示しています。
このテキストはイエローで表示しています。
このテキストはオレンジで表示しています。
このテキストはレッドで表示しています。
このテキストはピンクで表示しています。

文字にハイライトをつけてみよう

spanタグなどのインライン要素に class="mk-blue"などのクラスを指定すると、タグで括られたテキストをハイライト表示します。

表示サンプル

この部分はブラックでハイライト表示しています。
この部分はグレーでハイライト表示しています。
この部分はブルーでハイライト表示しています。
この部分はライトブルーでハイライト表示しています。
この部分はグリーンでハイライト表示しています。
この部分はイエローでハイライト表示しています。
この部分はオレンジでハイライト表示しています。
この部分はレッドでハイライト表示しています。
この部分はピンクでハイライト表示しています。

このサンプルのコード

この部分はブラックでハイライト表示しています。
この部分はグレーでハイライト表示しています。
この部分はブルーでハイライト表示しています。
この部分はライトブルーでハイライト表示しています。
この部分はグリーンでハイライト表示しています。
この部分はイエローでハイライト表示しています。
この部分はオレンジでハイライト表示しています。
この部分はレッドでハイライト表示しています。
この部分はピンクでハイライト表示しています。

文字に下線をひいてみよう

spanタグなどのインライン要素に class="bd-blue"などのクラスを指定すると、タグで括られたテキストに指定したカラーの下線を引くことができます。

表示サンプル

このテキストはグレーの下線で表示してこの部分は太い下線で表示しています。
このテキストはブルーの下線で表示してこの部分は太い下線で表示しています。
このテキストはライトブルーの下線で表示してこの部分は太い下線で表示しています。
このテキストはグリーンの下線で表示してこの部分は太い下線で表示しています。
このテキストはイエローの下線で表示してこの部分は太い下線で表示しています。
このテキストはオレンジの下線で表示してこの部分は太い下線で表示しています。
このテキストはレッドの下線で表示してこの部分は太い下線で表示しています。
このテキストはピンクの下線で表示してこの部分は太い下線で表示しています。

このサンプルのコード

このテキストはグレーの下線で表示してこの部分は太い下線で表示しています。
このテキストはブルーの下線で表示してこの部分は太い下線で表示しています。
このテキストはライトブルーの下線で表示してこの部分は太い下線で表示しています。
このテキストはグリーンの下線で表示してこの部分は太い下線で表示しています。
このテキストはイエローの下線で表示してこの部分は太い下線で表示しています。
このテキストはオレンジの下線で表示してこの部分は太い下線で表示しています。
このテキストはレッドの下線で表示してこの部分は太い下線で表示しています。
このテキストはピンクの下線で表示してこの部分は太い下線で表示しています。

背景色をつけてみよう

divやpタグなどのブロック要素に class="bg-blue"などのクラスを指定すると、指定した領域を様々な背景カラーで装飾できます。

表示サンプル

このサンプルのコード

背景カラーbg-blackを指定して１４ピクセルの余白を設けたよ。
背景カラーbg-grayを指定して１４ピクセルの余白を設けたよ。
背景カラーbg-greenを指定して１４ピクセルの余白を設けたよ。
背景カラーbg-yellowを指定して１４ピクセルの余白を設けたよ。
背景カラーbg-orangeを指定して１４ピクセルの余白を設けたよ。
背景カラーbg-pinkを指定して１４ピクセルの余白を設けたよ。
背景カラーbg-redを指定して１４ピクセルの余白を設けたよ。
背景カラーbg-blueを指定して１４ピクセルの余白を設けたよ。
背景カラーbg-lightblueを指定して１４ピクセルの余白を設けたよ。

ボックスを表示してみよう

divやpなどのブロック要素のタグに、class="box"などのクラスを指定するだけで、文章中にちょっとしたメッセージ用などに使えるボックスを表示できます。

表示サンプル

このサンプルのコード

これは最もシンプルなボックスです。boxというクラス属性値を指定しています。
これは色付きのボックスです。box-kblueというクラス属性値を指定しています。
これは色付きのボックスです。box-pinkというクラス属性値を指定しています。
これは色付きのボックスです。box-redというクラス属性値を指定しています。
これは色付きのボックスです。box-orangeというクラス属性値を指定しています。
これは色付きのボックスです。box-yellowというクラス属性値を指定しています。
これは色付きのボックスです。box-greenというクラス属性値を指定しています。