パソコン

color 背景色や文字色の設定とcurrentColorの使用例

カラーの指定にはキーワードやR(赤)G(緑)B(青)の値を指定するものRGBにA(透過)を加えたRGBAがあります。

色の値も16進歩(0~9とa~fを併せたもの)や各色を0~255の数字で表したものがありますが、多くの色を覚えるのは大変なので下の表を参考にある程度の色を覚えておくといいと思います。

色を指定する方法

色の種類とコード表

文字の色を指定する

color 文字を指定する時に使用します。

body {
color: black;
}

これでbody内の文字を黒に指定したことになります。

背景の色を指定する

background-color 背景の色を指定する時に使用します。

td {
background-color: silver:
}

表のセルの部分を銀色に指定します。

前の指定の色を引き継ぐ

currentColor 前に指定した色を引き継ぎます

html記述
<div class="oo">
<p>枠と文字の色を同じ色に</p>
</div>

CSS記述
.oo {
color #f00;
border: 1px solid currentColor;
}

文字色の赤に枠も赤に指定されます

currentColorを使った例

spanタグを使って記述

この記述はhtmlにすべて記述した例です。

spanタグはインライン要素のためdivやpタグなどのブロック要素のように広い幅では表示されません。

htmlとCSSに記述した例

htmlに記述しています

CSSに記述しています

currentColorは前の要素の色を引き継ぐとありましたが、CSSに記述に関してはこのような記述でないと上手く表示しない場合があります。

color 背景色や文字色の設定とcurrentColorの使用例まとめ

currentColorはまだ調べて詳しいことが分かりましたら記事にしたいと思います。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事