Weblasts

文字を操作するCSSプロパティ

Webサイト上にはたくさんの文字が出てきます
これらを装飾するためのプロパティをここでは紹介します

文字サイズの指定をするfont-size

font-sizeプロパティは文字サイズの指定をするときに使うプロパティ。 プロパティ値には、変更後の大きさを単位付きで設定する。 単位は基本的な「px」以外に「%」「em」「rem」等が使える。
CSS

h1{
    font-size: 00px;
}

文字の太さの指定をするfont-weight

デフォルトで太字になる見出し部分の文字を普通の太さにしたかったり、 文章中で強調したい部分は文字を太くしたかったり、そんなわがままに答えてくれるのがこのfont-weightプロパティです。 基本的な使い方はプロパティ値にnomalで普通の細い感じに、boldで見出しのような太い感じになる。 この他にも100刻みの数値での指定もできるが、細かく設定されているフォントはあまり存在していないため使うことはかなり少ない。

CSS

h1{
    font-weight: bold;
    font-weight: normal;
}

文字の色を変更できるcolor

文字の色はデフォルトで黒 リンク部分は青か紫になります。 このデフォルトで設定されている文字の色を変更するときに使うのがcolorプロパティです。 プロパティ値には、色名もしくはカラーコードを記入して使うのが一般的ですが、rgbaやhslでの設定も可能です。
CSS

h1{
    color: red;
    color: #fff;
    color: rgba(255,255,255,0.8);
}
rgbaで指定した場合は透明度の設定もできて便利な時もあります。

カラーコード?

カラーコードは#(シャープ)から始まる、6桁の16進数で表されます。 それぞれ2桁ずつが、Red、Green、Blueの強さ表しています。

ここでは基本的な上記の3つで終わります。

Recommend Post