TOP ＞ スタイルシートで文字をデザイン ＞ 文字の太さを変える。
文字の太さを変える。
文字の太さを変えるには"font-weight"プロパティを使用します。文字の色を変えることと同様、 文字の太さを変える事で文章内の重要な単語やセンテンスを強調することが出来ます。
太字と文字色を上手に使うことで、Webページを飽きのこないデザインにしていきましょう。
"font-weight"プロパティは数値とキーワードで指定することが出来ます。数値で指定する場合は100,200,・・・ 800,900と9段階で指定できます。ただし、太さの変化が目で見てわかるのは2～4段階程度です。 フォントの種類によって見え方も異なりますので注意が必要です。場合によっては太字にすると文字がつぶれて見えなくなることもあります。
キーワードは4つの段階があります。
- normal（デフォルト値）は標準的な文字の太さで、数値でいうと400に相当します。
- boldは一般的にいう太字です。数値で言うと700くらいです。
- lighterは現在の太さから一段階細くします。
- bolderは一段階太くします。
文字の太さを変える。
【書き方】
font-weight : [ 数値 | キーワード ];
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>文字の太さを変えるのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- .w1{ color: #aa0000; font-weight: 400;} .w2{ color: #aa0000; font-weight: 500;} .w3{ color: #aa0000; font-weight: 600;} .w4{ color: #aa0000; font-weight: 700;} .w5{ color: #00aa00; font-weight: normal;} .w6{ color: #00aa00; font-weight: bold;} .w7{ color: #0000aa; font-weight: lighter;} .w8{ color: #0000aa; font-weight: bolder;} --> </style> </head> <body bgcolor="silver"> <span class="w1">文字の太さを数値で指定しています。数値は400です。</span><br /> <span class="w2">文字の太さを数値で指定しています。数値は500です。</span><br /> <span class="w3">文字の太さを数値で指定しています。数値は600です。</span><br /> <span class="w4">文字の太さを数値で指定しています。数値は700です。</span><br /> <span class="w5">文字の太さをキーワードで指定しています。normal指定です。</span><br /> <span class="w6">文字の太さをキーワードで指定しています。bold指定です。</span><br /> <span class="w7">文字の太さをキーワードで指定しています。lighter指定です。</span><br /> <span class="w8">文字の太さをキーワードで指定しています。bolder指定です。</span><br /> </body> </html> |
[
スタイルシートで文字をデザイン ]
