フォントの太さ
CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 20/76。
CSSでは、font-weightプロパティは、HTML要素内のテキストの太さや厚みを制御するために使用されます。
font-weight の一般的な数値には、以下が含まれます：
100: 極細200: 特細300: 細字
400: 標準500: ミディアム600: セミボールド
700: 太字800: エクストラボールド900: ブラック
font-weight の一般的なキーワード値には、以下が含まれます：
normal:400に相当bold:700に相当
lighter: 親要素よりも細いウェイトを指定しますbolder: 親要素よりも太いウェイトを指定します
例えば：
p {
font-weight: normal;
}
h1 {
font-weight: 700;
}
.highlight {
font-weight: bold;
}
チャレンジ
簡単見出し（<h1>）、段落（<p>）、およびディビジョン（<div>）を含むHTMLドキュメントが与えられます。あなたのタスクは、font-weightプロパティを使用してこれらの要素をスタイリングすることです。以下の手順に従ってください：
<h1>要素をターゲットとするCSSルールを記述してください。font-weightを900に設定します。<p>要素をターゲットとするCSSルールを記述してください。font-weightをlighterに設定します。<div>要素をターゲットとするCSSルールを記述してください。font-weightを600に設定します。
チートシート
font-weightプロパティは、テキストの太さを制御します。
数値による指定:
100: Thin200: Extra Light300: Light400: Normal500: Medium600: Semi Bold700: Bold800: Extra Bold900: Black
キーワードによる指定:
normal:400と同等bold:700と同等lighter: 親要素よりも細いウェイトbolder: 親要素よりも太いウェイト
p {
font-weight: normal;
}
h1 {
font-weight: 700;
}
.highlight {
font-weight: bold;
}自分で試してみよう
<html>
<head>
<title>Font Weight</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a division.</div>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
