【初心者向け】CSSのfont-weightを使って文字の太さを調節する方法を徹底解説！
「CSSで文字の太さを変えたい！」
「CSSで文字を太くする方法について知りたい」
上記のように考えていて、この記事にたどり着いた方も多いのではないでしょうか？
CSSで文字の太さは、font-weightというプロパティを使って変更できます。
今回、WEBCAMP MEDIAでは、CSSのfont-weightを使って文字の太さを調節する方法について解説していきます。
- font-weightについて
- 文字の太さを調節する方法
以上の項目について解説します。
この記事を読むことで、font-weightの使い方と注意点を理解し、文字の太さを調節して読者が読みやすい記事作りに活かせるので、ぜひチェックしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
font-weightとは
font-weightは、HTMLで表示している文字の太さを変更できるCSSプロパティです。
font-weightを使って文字の太さを変えることで、Webサイトの雰囲気に合わせた文字の太さを実現したり、特定の文字や文章を強調できます。
たとえば、記事の中で重要な文章を太く表示することで、読者が見落とすことなく認識できます。また、適度に太文字を入れることで文章に抑揚がついて読みやすくなります。
font-weightで文字の太さを調節することで、ユーザビリティの向上にもつながるので、この記事をきっかけに覚えておきましょう。
font-weightはフォントの種類によって使える値が異なる
font-weightは文字をさまざまな太さへ変えられますが、その範囲は使用するフォントの種類によって異なります。
たとえば、font-weightを使って太文字を指定しても、そのフォントが太文字に対応していなれば太くできません。
font-weightを使うときは、利用するフォントにちゃんと反映されているのか確認しましょう。
font-weightで文字を太さを変える方法
font-weightを使って文字の大きさを変更する方法は、特定の値で指定する方法と数字で指定する方法の2種類あります。
双方の使い方について、サンプルコードを用いて解説していきます。
文字の太さを数字で指定する
font-weightには、太さを指定するための数字が100から900までの9種類用意されています。
値に指定するときは、数字にpxや%を使う必要はなく、数字のみ指定しましょう。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body{
font-family: "Hiragino Sans";
}
.test1{
font-weight:100;
}
.test2{
font-weight:200;
}
.test3{
font-weight:300;
}
.test4{
font-weight:400;
}
.test5{
font-weight:500;
}
.test6{
font-weight:600;
}
.test7{
font-weight:700;
}
.test8{
font-weight:800;
}
.test9{
font-weight:900;
}
</style>
</head>
<body>
<p class="test1">テスト100</p>
<p class="test2">テスト200</p>
<p class="test3">テスト300</p>
<p class="test4">テスト400</p>
<p class="test5">テスト500</p>
<p class="test6">テスト600</p>
<p class="test7">テスト700</p>
<p class="test8">テスト800</p>
<p class="test9">テスト900</p>
</body>
</html>実行結果
上記のように指定した数字の大きさによって文字が太くなっていることがわかります。
また、上記のフォントは「Hiragino Sans」という種類を使っており、全ての値に対応していますが、フォントの種類によって反映される数値に違いがあります。
たとえば、上記のコードに指定されている文字の種類を「sans-serif」に変えて実行すると次のように表示されます。
太さの変化が500以前の文字と600以降の文字だけなので「sans-serif」では2種類の太さしか対応していないことがわかります。
文字の太さを値で指定する
font-weightに指定できる値は次の通りです。
- normal(regular)：標準の太さ
- bold：文字を太くする
- lighter：親要素より文字が細くなる
- bolder：親要素より文字が太くなる
normalとboldの使い方
normalはregularと表現されることもあり、通常フォントの初期値として使用されています。
normalとboldのサンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.test1{
font-weight:normal;
}
.test2{
font-weight:bold;
}
</style>
</head>
<body>
<p class="test1">テスト</p>
<p class="test2">テスト</p>
</body>
</html>実行結果
上部の文字には、font-weight:normal;を指定しているため文字の太さは変わりませんが、下部の文字はboldを指定しているので文字が太くなっていますね。
lighterとbolderの使い方
lighterとbolderの太さは親要素に指定されているfont-weightの値によって決まります。
例えば、親要素にfont-weight:500;が指定されている場合、子要素にlighterを指定すると文字の太さは500よりも一段階細い400が指定されます。
反対に、bolderを指定すると500よりも一段階太い600が指定されます。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body{
font-family: "Hiragino Sans";
}
.parent{
font-weight: bold;
}
.test1{
font-weight:lighter;
}
.test2{
font-weight:bolder;
}
</style>
</head>
<body>
<p class="parent">
<span class="test1">テスト1</span><br>
<span class="test2">テスト2</span>
</p>
</body>
</html>実行結果
まとめ
今回は、CSSのfont-weightを使って文字の太さを調節する方法について解説しましたが、いかがでしたでしょうか？
font-weightを使うことで文字の太さを変えることができ、数字で指定する方法と値で指定する方法の2種類あります。
また、フォントの種類によって利用できる値が違うので、font-weightを指定したあとはちゃんと反映されているか確認しましょう。
font-weightを使いこなすことで、読者にとって読みやすい記事になるので、ぜひ参考にしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
