今回は「CSS【font-weight】でフォントの太さを指定しましょう」について
解説していきます。
こんな方に読んでほしい
- CSSを学び始めた方へ
-
font-weight
の使い方について学びたい方へ -
font-weight
はキーワードと数値で指定ができます
font-weight
プロパティは文字も強調させたい、目立たせたい際に使用します。
font-weighプロパティについて
font-weight
プロパティは、フォントの太さを指定できます。
指定できる値にはキーワードと数値の2種類があります。
文字の太さとは、上の図のように、文字の太さを変えるだけでも文章の印象は変わりますね。
でわ、指定方法についてご説明いたします。
font-weightキーワード指定について
font-weight: 値(キーワード);
を指定します。
キーワードとは、「normal」、「bold」、「lighter」、「bolder」の4種類になります。
normal指定について
normal
(デフォルト)標準の太さになります。絶対値になります。
あいうえおアイウエオ標準の太さ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
bold指定について
bold
太字になります。絶対値になります。
あいうえおアイウエオ標準の太さ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
lighter指定について
lighter
親要素に対して1段階(数値で100)だけ細くなります。相対値になります。
親要素にfont-weight: 300;
を指定した場合は子要素はfont-weight: 200;
になります。
あいうえおアイウエオ標準の太さ
ABCDEFGHIJKLMNOPQRSTUVWXYZ(normal)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
アルファベットは細くなってるけど、日本語は細くならないんだね。
日本語の場合はほとんど細字がないんだよね、日本語の場合は
「normal(デフォルト)」または「bold(太字)」しかないからしっかり
覚えといてね。
bolder指定について
bolder
親要素に対して1段階(数値で100)だけ太くなります。相対値になります。
親要素にfont-weight: 400;
を指定した場合は子要素はfont-weight: 500;
になります。
あいうえおアイウエオ標準の太さ
ABCDEFGHIJKLMNOPQRSTUVWXYZ(normal)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
font-weight数値指定について
font-weight: 値(数値);
を指定します。
数値とは、「100 200 300 400 500 600 700 800 900」の9段階になります。
数値が小さいほど細字に数値が大きいほど太字になります。
400は先ほどご説明したnormalの値と同じになり、700がboldと同じ値になります。
.weight100{font-weight: 100;}
.weight200{font-weight: 200;}
.weight300{font-weight: 300;}
.weight400{font-weight: 400;}
.weight500{font-weight: 500;}
.weight600{font-weight: 600;}
.weight700{font-weight: 700;}
.weight800{font-weight: 800;}
.weight900{font-weight: 900;}
このように数値で文字の太さを指定できるようになります。
ですが、日本語のフォントには細字が用意されていない場合がありますので、
その際には、bold、lighter、normalで指定するようにしましょう。
今回、使用した文字は「Google Fonts」の「Raleway」を指定し記事を書きました。
細字の英字が使用したい方は一度お試しください。
p {
font-family: 'Raleway', sans-serif;
}
CSSプロパティ参考になるかも
line-heightの基本的な使用方法について解説して
おります。
まとめ
今回はこれで以上です。
- POINT
-
font-weight
を指定できる値には
キーワードと数値の2種類があります。 - 日本語の場合はほとんど細字が用意されていないことが多いです。
- 指定する際には、数値よりキーワード指定(normal、bold)をおこないましょう。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事