【CSS初心者向け】文字の太さを変えるプロパティfont-weightを徹底解説！

Webサイトを作る時、強調して伝えたい部分は文字の太さを変えたくなりませんか。

今回はCSSを使って、文字の太さを変えるプロパティである『font-weight』とは何なのかということから、その使い方について詳しく解説していきます。

CSSの書き方について不安のある方はCSSの使い方、書き方を初心者でも分かりやすく簡単解説で詳しく解説していますので、参考にしてみてください。

それでは『font-weight』について解説していきます。

・font-weightとは

『font-weight』とは簡単に言えば、文字の太さを変えるプロパティです。

その使い方についてはこの後詳しく解説しますが、font-weightを指定することによって、任意の文字の太さにHTMLで作ったテキストを太くしたり、細くしたしたりできます。

文字の太さを変えることはWebサイトを作る際には必ず使うことになる重要な知識になります。そのため、『font-weight』はWeb制作上、重要なプロパティということになります。

それでは『font-weight』がどういうものか理解したところで、その使い方について詳しく解説していきましょう。

・font-weightの値について

『font-weight』の値は主に数値で指定する場合とfont-weightに備わっている独自の値で指定する場合の2パターンがあります。

今回はその両方を詳しく解説していきます。

・値を数値で指定する場合

値を数値で指定する場合はその数値は100単位で指定していきます。

どういうことなのか下記のコードに沿って解説していきます。

<p class="font-weight100">font-weight100の場合</p>
<p class="font-weight200">font-weight200の場合</p>
<p class="font-weight300">font-weight300の場合</p>
<p class="font-weight400">font-weight400の場合</p>
<p class="font-weight500">font-weight500の場合</p>
<p class="font-weight600">font-weight600の場合</p>
<p class="font-weight700">font-weight700の場合</p>
<p class="font-weight800">font-weight800の場合</p>
<p class="font-weight900">font-weight900の場合</p>

.font-weight100 {
    font-weight: 100;
}

.font-weight200 {
    font-weight: 200;
}

.font-weight300 {
    font-weight: 300;
}

.font-weight400 {
    font-weight: 400;
}

.font-weight500 {
    font-weight: 500;
}

.font-weight600 {
    font-weight: 600;
}

.font-weight700 {
    font-weight: 700;
}

.font-weight800 {
    font-weight: 800;
}

.font-weight900 {
    font-weight: 900;
}

上記のコードのように『font-weight』の値を数値で指定する場合、100単位毎に文字の太さを変えることが出来るようになります。

このfont-weightを指定していない時もあると思いますが、そのようなデフォルトの場合は『400』で指定されている状態になります。

それでは次にプロパティ『font-weight』に備わっている独自の値で指定する方法について解説していきます。

・font-weightに備わっている独自の値で指定する場合

プロパティ『font-weight』には独自に備わっている値がいくつか存在します。

それではそれを1つずつ紹介していきます。

・normal

この『normal』が1番の基礎になり、デフォルトの太さの値になります。このnormalは数値で表すと、『400』になります。

・bold

『bold』は所謂、太字と言われるような値になります。このboldは数値で表すと、『700』になります。

・lighter

『lighter』は親要素に比べて、1段階細いサイズに指定する値になります。数値で表すと、親要素より100小さいサイズに指定されます。

・bolder

『bolder』は親要素に比べて、1段階太いサイズに指定する値になります。数値で表すと、親要素より100大きいサイズに指定されます。

今回は文字の太さを変えるプロパティである『font-weight』について解説をしていきました。

『font-weight』はWebサイトのデザインを作り上げる上で、欠かせないプロパティです。この記事で解説した方法で使いこなしてみて下さい。