font-weightで文字の太さ
font-weightで文字の太さ
ここでは、スタイルシートの「font-weight」のプロパティを使用して、例の見出し4に文字の太さを指定する方法を解説します。
font-weight
「font-weight」のプロパティは、値を「100」から「900」まで指定出来ます。または、数値ではなく「bold」といった値で太字の指定や「normal」といった値で通常の太さの指定なども出来ます。試しに、スタイルシートを以下のように変更してみます。（赤線が変更部分）
h4.samplecolor {
color: #FF0000;
font-size: 14px;
padding: 1px 0px 0px 28px;
background: url("images/sample_h4.gif") no-repeat left center;
height: 23px;
font-family: "ＭＳ Ｐ明朝";
font-weight: normal;
}
「font-weight」のプロパティで「normal」の値を指定しました。見出し4（h4）は通常時で太字に表示されてしまうため、normalでは通常の文字と同じ太さになります。では、実際に動作を見てみましょう。
見出し4
通常の文字と同じ文字の太さになりました。以下がfont-weightを指定しない場合の見出し4です。
見出し4
このように、見出しのような標準の状態が太字の文字を標準の細さにしたり、段落やリストなど、標準の細さの文字を太字にしたりする事が出来ます。
ここでスタイルシートの実例を解説するのは、以上の「font-weight」までです。他にも多くのスタイルシートのプロパティがあり、全て解説する事は難しいのですが、簡単に幾つかのプロパティを一覧表にして解説致しました。
次は「スタイルシートのプロパティ一覧」です。
この「初めてのホームページ作成」の分類には以下のページがあります。
