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: "MS P明朝";
font-weight: normal;
}

font-weight」のプロパティで「normal」の値を指定しました。見出し4(h4)は通常時で太字に表示されてしまうため、normalでは通常の文字と同じ太さになります。では、実際に動作を見てみましょう。

見出し4

通常の文字と同じ文字の太さになりました。以下がfont-weightを指定しない場合の見出し4です。

見出し4

このように、見出しのような標準の状態が太字の文字を標準の細さにしたり、段落やリストなど、標準の細さの文字を太字にしたりする事が出来ます。

ここでスタイルシートの実例を解説するのは、以上の「font-weight」までです。他にも多くのスタイルシートのプロパティがあり、全て解説する事は難しいのですが、簡単に幾つかのプロパティを一覧表にして解説致しました。

次は「スタイルシートのプロパティ一覧」です。

一番上に戻る

この「初めてのホームページ作成」の分類には以下のページがあります。

  1. ホームページとは
  2. ホームページ作成に必要なもの
  3. 拡張子の変更方法
  4. 拡張子「.html」ファイルの作成方法
  5. HTMLのルール
  6. HTMLタグ一覧表
  7. スタイルシートとは
  8. スタイルシートの書き方
  9. 文字を赤、下線、14ピクセル
  10. 色を16進数の#RRGGBBで求める
  11. カラーピッカー comin
  12. marginで空間作成
  13. paddingで空間作成
  14. backgroundで背景に画像
  15. font-familyで書式を変更
  16. font-weightで文字の太さ現在のページ
  17. スタイルシートのプロパティ一覧
自作パソコンのキモ

ここより下はホームページに関するメニュー

ここより下はホームページに関するメニュー

ここより下は自作パソコン基礎&組み立てメニュー

ここより下はパソコンを納得して選ぶにはメニュー

ここより下はレンタルサーバーに関するメニュー


スマフォ時代にWiMAXが熱い!キャッシュバック有りの月額3,880円。クレードル(1,490円)も買えば、家では据え置きの一台二役で家ネットもパケット定額も解約出来る!?