CSSでfont-weightを使って文字の太さを指定する方法【初心者向け】
CSSの【font-weight】のプロパティを使って文字の太さを指定する方法を初心者向けに解説した記事です。normalとbold、数値で指定する、bolderとlighterの3種類を紹介します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSS初心者向けに、font-weightを使って文字の太さを指定する方法を解説する記事です。
CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。
font-weightとは
CSSのfont-weightプロパティを使用することによって、文字の太さを指定することができます。文字を目立たせたい場合なのに使いましょう。
事前準備
事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。なお、CSSのファイルは「sample.css」にすることにします。
ぜひ自分のPCでもやってみましょう。
HTMLファイル：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”sample1″>あいうABCabc123</p>
<p class=”sample2″>あいうABCabc123</p>
</body>
</html>
font-weightを使う
では具体的に使ってみましょう。
normalとbold
まずは基本となるnormalとboldを使います。下記のように書くことができます。
p.sample1 {font-weight:normal; }
p.sample2 {font-weight:bold; }
normalは通常の太さで、初期値はこれに設定されています。boldに値を設定すると太字になります。
ブラウザではこのように表示されます。
数値で指定する
続いて、文字列を3行にしてそれぞれの数値で文字の太さを指定してみます。
HTMLファイルはこのように3行に変更します。
<p class=”sample1″>あいうABCabc123</p>
<p class=”sample2″>あいうABCabc123</p>
<p class=”sample3″>あいうABCabc123</p>
CSSは下記のように数値で指定します。
p.sample1 {font-weight:200; }
p.sample2 {font-weight:400; }
p.sample3 {font-weight:800; }
数値で指定した場合の種類は100/200/300/400/500/600/700/800/900の9段階ありますが、実際にはブラウザで2種類のみで設定されていることが多く、画面上でも一番下の800のみが太字で表示されています。(値700以上でboldと同様の表示になります)
bolderとlighter
親要素に指定された形式よりbolderは太く、lighterは細く表示されます。
具体的には下記のように記述しましょう。bodyでまず全体を太字に設定している点にご注意ください。
body {font-weight:bold; }
p.sample1 {font-weight:inherit; }
p.sample2 {font-weight:bolder; }
p.sample3 {font-weight:lighter; }
ブラウザではこのように表示されます。
1行目はinherit(親要素を継承)したので太字です。
2行目はbolderで親要素よりも太くなるように指定されていますが、先ほどと同様フォントにそれ以上の太さが用意されていないため、画面上では1行目と同じになっています。
3行目は親要素のboldよりもlighterで細くなるように指定され、通常の太さに変化しています。
今回は3種類を紹介しましたが、用途に応じて使い分けてください。
CSSの基礎をさらに学びたい場合は、CSSでfont-familyを使ってフォントを指定する方法も合わせてご覧ください。
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
