font-weightプロパティ

TOPページに戻る > CSS

font-weightプロパティ

文字の太さを指定できます
テキストを太くして強調して表示できます
h1など太字の要素を細くすることも可能

使い方（書式）

セレクタ { font-weight: 値; }                           

プロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	する

プロパティの値	説明
bold	太字にする。700と同じ太さ
normal	標準の太さ。400と同じ太さ
bolder	親要素より少し太くします
lighter	親要素より少し細くします
900、800、700 600、500、400 300、200、100	キーワードでの指定 数値ではありません、キーワードです 900が最も太く、100が最も細い。400が標準的な太さ

実際の指定方法

太字

.hoge { font-weight: bold; } /* 太字に指定 */

900

.hoge2 { font-weight: 700; }   /* 700に指定 */

ノーマル

.hoge3 { font-weight: normal; } /* 標準的な太さ */

html部分

<p class="hoge">太さbold</p>
<p class="hoge2">太さ700</p>
<p class="hoge3">太さnormal</p>

実際の表示

太さbold

太さ700

太さnormal

デェフォルトの太さ

子要素への継承

子要素への継承について検証してみます

css

div { font-weight: bold; } /* 太字に指定、p要素のスタイルの指定なし */

html部分

<div><p>子要素 <span>孫要素</span></p></div> 

実際の表示

太さ（デェフォルト）

div要素に適用したスタイルが子要素のp要素と孫要素のspan要素にも適用されていることがわかります

継承を防ぐ

継承されて困る時は子要素にnormalを指定すれば継承したスタイルが上書きされて標準の太さになります

css

div { font-weight: bold; } /* 太字に指定 */
p { font-weight: namal; }  /* ノーマルに指定 */

html部分

<div>親要素<p>子要素 <span>孫要素</span></p></div> 

実際の表示

子要素のスタイルが上書きされ、太さがノーマルになりました
孫要素に値が継承されnormalの値が適用されたことがわかります

子要素に値を指定しなかった場合、太字が継承されます