▼名前
▼性別 選択 男 女
▼コメント[必須]>>6 > (2-3) さて、今度は文字の色変更だね 文字の色変更に使うのはcolorプロパティだよ……一番重要・本質的な部分だから、わざわざtextと指定しなくていいんだ 色の指定にはタグの方で示した・色の名前(named-color)による記法・#RRGGBB(hex-color)による記法の他にも、『色空間関数(Color(Space)-Function)』っていうものをプロパティ値に使うことができるよ 色の名前は現在CSS ColorModule Level4っていう規格でRebeccaPurple(#663399)が追加されて、Transparent(透明、背景や背後のブロックが完全に発色される)を含めて計140色 149色名が使えるようになってる……AquaにCyan(#00FFFF)、FuchsiaにMagenta(#FF00FF)と異名が追加された他、大抵のgray系の色名がgreyでも書けるようになってるので色名の方が多いんだよね hex-colorは書き方に色々なバリエーションが加わってる 特にアルファ値(不透明度、0で完全に透明=TransparentでFF(255)で完全に不透明)も使えるようになってるのが大きい 十六進数3桁で書く方法(#RGB)や、アルファ値を加えて4桁・8桁で書く方法(#RGBA、#RRGGBBAA)だよ 色空間関数は……俺はRGBA関数しか使わないけど、他にも色んな種類があるんだよ 本業のWEBデザイナーやScriptを使う人とかには嬉しいらしいよ RGBA関数はrgba(赤,緑,青,アルファ値)っていう記法で表される4つの変数を持った関数で、赤緑青の3つは0〜255の範囲の整数値に、アルファ値は0(完全透明)〜1(完全不透明)の範囲の小数値に対応してる ……4・8桁のhex-colorと何が違うのか、って言われると…… 2割透過とか8割透過ってときに、0〜255だと計算面倒でしょ? あと、calc関数(計算caliculationの関数)とかを使って変数の代入したりできるんでね じゃ、試してみようか 今回はIDじゃなくてclassを使ってみるよ 用意するclassは……red・green・blue(色名)と、yellow・cyan・magenda(hex-color)、black・gray・white・transparent(RGBA関数)とちょっと多いよ で、なんでこんなにいっぱい、しかもclassで用意したかって言うと、classはひとつのHTMLドキュメント内で複数回使えるってことを確認してほしかったんだ それと、セレクタの指定でタグ名を抜いてクラス名だけ指定したことで、divでもspanでもそのclassを宣言してたらセレクタの指定に引っ掛かるってこともね あと、ついでにdivの入れ子とspanの入れ子についても確認しといてよ ほら、ここはdivが二重の入れ子になってるよ ここは三重だね……まあ、色変えてるだけならあんまし意味のない話なんだけどね ここは二重だよ grayに戻ってるの分かる? ここだとblackだよね spanの中にもspanが入っても良いんだ ここはspanが二重になってるよね ここは三重だけど……アルファ値が0だから見えないはずさ あんまりテキストの透明化は多用しちゃだめだよ 本当は文字色をアルファ値0にするのは非推奨だからね じゃ、実際に使えるように書いてみるよ で、なんでこんなにいっぱい、しかもclassで用意したかって言うと、classはひとつのHTMLドキュメント内で複数回使えるってことを確認してほしかったんだ それと、セレクタの指定でタグ名を抜いてクラス名だけ指定したことで、divでもspanでもそのclassを宣言してたらセレクタの指定に引っ掛かるってこともね あと、ついでにdivの入れ子とspanの入れ子についても確認しといてよ ほら、ここはdivが二重の入れ子になってるよ ここは三重だね……まあ、色変えてるだけならあんまし意味のない話なんだけどね ここは二重だよ grayに戻ってるの分かる? ここだとblackだよね spanの中にもspanが入っても良いんだ ここはspanが二重になってるよね ここは三重だけど……アルファ値が0だから見えないはずさ あんまりテキストの透明化は多用しちゃだめだよ 本当は文字色をアルファ値0にするのは非推奨だからね
▼削除/編集パス※半角英数4〜8
back