cssのfont-weightで文字の太さを設定しよう

cssで文字の太さを設定

cssのfont-weightプロパティの使い方の紹介です!! ホームページやブログを制作する時に100%使うといっていいほど、良く使うプロパティです。

ブログとかで良く見かけますが、テキストを太字にする時に「strong」タグを使うという人がたまにいます。 ですが太字したい時は、strongタグではなくfont-weightプロパティを使いましょうね。

strongタグは重要な個所を強調するために使うので、font-weightとstrongタグをしっかり使い分けないとseo的に良くありません なのでしっかりとfont-weightの使い方をマスターしましょうね!

ではcssのfont-weightプロパティを使った文字の太さの設定方法を紹介していきます!

目次

font-weightプロパティの使い方

font-weightプロパティは、フォント(文字)の太さを指定する時に使います。

太さの種類は9段階あります。 ですが日本語の場合は、太さが異なるフォントの数が少ないので通常は「bold」のみが使われてます

ちなみに9段階の太さを指定する事はできますが、9種類の太さが用意されているフォントは少なく、どの太さを指定しても実際には「bold」の太さになることが多いです。

プロパティ 意味
font-weight:キーワードもしくは数値; フォントの太さを設定できる
/* キーワードで指定する場合 */
.example{font-weight:bold;}

/* 数値で指定する場合 */
.example{font-weight:400;}

文字の太さは「bold」などのキーワード、もしくは「400」などの数値で指定することができます。 指定できる太さのキーワード・数値は、下のようになっています。

太さのキーワードと表示例

指定できるキーワード 意味
normal 標準の太さ(数値で指定した場合の400相当)
bold 一般的な太字の太さ(数値で指定した場合の700相当)
lighter 一段階細くする(相対的)
bolder 一段階太くする(相対的)
表示例
標準の太さ「normal」(400相当)
一般的な太字「bold」(700相当)
一段階細くする「lighter」
一段階太くする「bolder」

boldとnormalについて

キーワード指定で使うのは、基本的にこの2つだけです。

font-weight:normal;と設定すれば、文字は標準の太さになります。 逆にfont-weight:bold;と設定すれば、太くなります。

これはh1やstrongタグといった、もともと太字の文字にも使えます

h1 { font-weight:normal; }
strong { font-weight:normal;}

例えば上のようにh1とstrongに「normal」を設定すれば、文字の太さは標準になります。 つまり太字が設定されているタグに対しても「normal」を指定することができるよ!ってことです。

太さの数値と表示例

太さの数値 表示例
font-weight: 100 ; 文字の太さ100
font-weight: 200 ; 文字の太さ200
font-weight: 300 ; 文字の太さ300
font-weight: 400 ; 文字の太さ400
font-weight: 500 ; 文字の太さ500
font-weight: 600 ; 文字の太さ600
font-weight: 700 ; 文字の太さ700
font-weight: 800 ; 文字の太さ800
font-weight: 900 ; 文字の太さ900

数値を変えても太さが変わらない理由

上の一覧をみるとfont-weightの数値を変えても、文字の太さは変わってないですよね。 これはフォントの太さが9種類用意されてないためです。

なのでいくら数値をいじっても文字の太さは細かく変化しません そのため一般的なフォントでは「bold」が使われる事が多いわけです。

ちなみにフォントの太さの種類が9種類用意されている場合は、標準の太さが400です。 なので400より数値が小さくなるほど文字の太さは細くなり、大きくなるほど太くなります。 ですが太さの種類が9種類用意されているフォントは、ほぼありません。

太さが3段階ほど変化するフォントは、数種類あるようです。 まーでも、pcによって搭載されているフォントがまったく違うため、微妙な太さの設定を行う事はあまり意味ないです。

数値上は細かい太さの設定ができますが、実質的には意味ないので結局「bold」にするか、「normal」にするかの2択になります。 なので「標準にするか」「太くするか」どちらかを選ぶだけだと思ってください。

lighterとbolderについて

数値を変えても太さが変わらない理由がわかった所で、lighterとbolderについてちょっと説明します。 lighterとbolderは、親要素の太さに対して子の太さを1段階太く、もしくは細くできるキーワードです。

<div>
   <p>pにlighter</p>
</div>
div{font-size:700;}/*親*/
p{font-size:lighter;}/*子*/

例えばdivの太さを700に設定。そしてdivの中のp要素にlighterを指定するとします。 この場合pの太さは、親であるdivより1段階細い600になるということです。 ですがさっき紹介したように、数値が細かく変わったところであまり意味はありません。

しかもlighterとbolderは、1段階(+-100)しか数値が変化しません。 という事は親要素が標準の太さ(400)だった場合、bolderにしたところで子に500を指定したことにしかなりません。 なので太字に変化する700には届かないってことです。

簡単にいうと意味がないってこと。

なので基本的にfont-weightプロパティで太さを設定する時は「標準にするか(normal)」「太くするか(bold)」のどちらかにするのが無難だと思った方がいいです。

以上「cssのfont-weightプロパティについて」でしたー(^^♪