<h2>タグには、デフォルトで太字が設定されています。
この太さに関係するプロパティは「font-weight」です。
このプロパティの設定値は以下です。
値:
normal(数値400)
bold 一般的な太さ(数値700)
bolder(相対的に1段階太く)
lighter(相対的に1段階細く)
数値 100~900(100単位)
サンプルコードは以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#container{ background-color: greenyellow; } p{font-size:16px;} p.normal{font-weight:normal;} p.bolder{font-weight:bolder;} p.lighter{font-weight:lighter;} p.bold{font-weight:bold;} p.weight100{font-weight: 100;} p.weight200{font-weight: 200;} p.weight300{font-weight: 300;} p.weight400{font-weight: 400;} p.weight500{font-weight: 500;} p.weight600{font-weight: 600;} p.weight700{font-weight: 700;} p.weight800{font-weight: 800;} p.weight900{font-weight: 900;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="container"> <p class="normal">(normal)文字の太さのサンプル</p> <p class="bolder">(bolder)文字の太さのサンプル</p> <p class="lighter">(lighter)文字の太さのサンプル</p> <p class="bold">(bold)文字の太さのサンプル</p> <p class="weight100">(weight:100)文字の太さのサンプル</p> <p class="weight200">(weight:200)文字の太さのサンプル</p> <p class="weight300">(weight:300)文字の太さのサンプル</p> <p class="weight400">(weight:400)文字の太さのサンプル</p> <p class="weight500">(weight:500)文字の太さのサンプル</p> <p class="weight600">(weight:600)文字の太さのサンプル</p> <p class="weight700">(weight:700)文字の太さのサンプル</p> <p class="weight800">(weight:800)文字の太さのサンプル</p> <p class="weight900">(weight:900)文字の太さのサンプル</p> </div> </body> </html> |
だいたい、このプロパティには、「normal」か「bold」を設定します。
もともと使用しているフォントに、指定した太さのフォントが無い場合は
文字の太さは変わりません。