CSSでfont-weightを使って文字の太さを指定する方法【初心者向け】

CSSの【font-weight】のプロパティを使って文字の太さを指定する方法を初心者向けに解説した記事です。normalとbold、数値で指定する、bolderとlighterの3種類を紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,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>

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

font-weightを使う

では具体的に使ってみましょう。

 

normalとbold

まずは基本となるnormalとboldを使います。下記のように書くことができます。

p.sample1 {font-weight:normal; }
p.sample2 {font-weight:bold; }

normalは通常の太さで、初期値はこれに設定されています。boldに値を設定すると太字になります。

ブラウザではこのように表示されます。

150609_fw_1

 

数値で指定する

続いて、文字列を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と同様の表示になります)

150609_fw_2

 

bolderとlighter

親要素に指定された形式よりbolderは太く、lighterは細く表示されます。

具体的には下記のように記述しましょう。bodyでまず全体を太字に設定している点にご注意ください。

body {font-weight:bold; }
p.sample1 {font-weight:inherit; }
p.sample2 {font-weight:bolder; }
p.sample3 {font-weight:lighter; }

 

ブラウザではこのように表示されます。

150609_fw_3

1行目はinherit(親要素を継承)したので太字です。

2行目はbolderで親要素よりも太くなるように指定されていますが、先ほどと同様フォントにそれ以上の太さが用意されていないため、画面上では1行目と同じになっています。

3行目は親要素のboldよりもlighterで細くなるように指定され、通常の太さに変化しています。

 

今回は3種類を紹介しましたが、用途に応じて使い分けてください。

CSSの基礎をさらに学びたい場合は、CSSでfont-familyを使ってフォントを指定する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。