文字を操作するCSSプロパティ
Webサイト上にはたくさんの文字が出てきます
これらを装飾するためのプロパティをここでは紹介します
文字サイズの指定をするfont-size
font-sizeプロパティは文字サイズの指定をするときに使うプロパティ。 プロパティ値には、変更後の大きさを単位付きで設定する。 単位は基本的な「px」以外に「%」「em」「rem」等が使える。
1 2 3 |
h1{ font-size: 00px; } |
文字の太さの指定をするfont-weight
デフォルトで太字になる見出し部分の文字を普通の太さにしたかったり、 文章中で強調したい部分は文字を太くしたかったり、そんなわがままに答えてくれるのがこのfont-weightプロパティです。 基本的な使い方はプロパティ値にnomalで普通の細い感じに、boldで見出しのような太い感じになる。 この他にも100刻みの数値での指定もできるが、細かく設定されているフォントはあまり存在していないため使うことはかなり少ない。
1 2 3 4 |
h1{ font-weight: bold; font-weight: normal; } |
文字の色を変更できるcolor
文字の色はデフォルトで黒 リンク部分は青か紫になります。 このデフォルトで設定されている文字の色を変更するときに使うのがcolorプロパティです。 プロパティ値には、色名もしくはカラーコードを記入して使うのが一般的ですが、rgbaやhslでの設定も可能です。
1 2 3 4 5 |
h1{ color: red; color: #fff; color: rgba(255,255,255,0.8); } |
カラーコード?
カラーコードは#(シャープ)から始まる、6桁の16進数で表されます。 それぞれ2桁ずつが、Red、Green、Blueの強さ表しています。
ここでは基本的な上記の3つで終わります。