ホーム＞コース別ガイド一覧＞文字の太さ指定しましょう！
文字の太さ指定しましょう！（font-weight プロパティ） |
   |
使用プロパティ セレクタ { font-weight: 文字の太さ; }
CSS一覧プロパティ辞典 … font-weight プロパティ
font-weight プロパティを使うと、文字の太さを指定できます。値は100〜900を100単位（9段階）で指定したり、normal(通常=400と同じ太さ)、bold(太く=700と同じ太さ)、bolder(一段階太く)、lighter(一段階細く)というキーワードでの指定もできます。
※現在のブラウザでは、normal(数値での指定であれば400)とbold(数値での指定であれば700)の二つの文字の太さしか指定できません。
もちろん太字の要素に指定しても効果なし！
もともと太字の要素の h1 要素、strong 要素などに font-weight プロパティを指定しても、さらに太字にすることはできません。
使用例
では実際に font-weight プロパティを使用して p 要素の文字列内の span 要素 を太字にしましょう！
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
span { font-weight: bold;}
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<span>ワンポイント</span>を紹介します！</p>
<p>おいしいチャーハンの作り方</p>
</body>
</html> |
|
使用例の表示
[font-weightプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方 |
|
 |
[font-weightプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方 |
|
[ font-weight プロパティ適応後のブラウザでの表示例 ]の「ワンポイント」が太字になりましたね？逆に h1 要素や strong 要素などのもともと太字で表示される要素は font-weight プロパティの「normal」で細字に変更できます。
