SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.04.01
  • CATEGORY
TITLE

CSS【font-weight】でフォントの太さを指定しましょう

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
今回は「CSS【font-weight】でフォントの太さを指定しましょう」について
解説していきます。

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • font-weightの使い方について学びたい方へ
  • font-weightはキーワードと数値で指定ができます

font-weightプロパティは文字も強調させたい、目立たせたい際に使用します。

font-weighプロパティについて

font-weighプロパテについて

font-weightプロパティは、フォントの太さを指定できます。
指定できる値にはキーワード数値の2種類があります。

文字の太さとは、上の図のように、文字の太さを変えるだけでも文章の印象は変わりますね。
でわ、指定方法についてご説明いたします。

font-weightキーワード指定について

font-weight: 値(キーワード);を指定します。
キーワードとは、「normal」、「bold」、「lighter」、「bolder」の4種類になります。

normal指定について

normal(デフォルト)標準の太さになります。絶対値になります。

あいうえおアイウエオ標準の太さ

ABCDEFGHIJKLMNOPQRSTUVWXYZ

p{font-weight: normal;}

bold指定について

bold太字になります。絶対値になります。

あいうえおアイウエオ標準の太さ

ABCDEFGHIJKLMNOPQRSTUVWXYZ

p{font-weight: bold;}

lighter指定について

lighter親要素に対して1段階(数値で100)だけ細くなります。相対値になります。
親要素にfont-weight: 300;を指定した場合は子要素はfont-weight: 200;になります。

あいうえおアイウエオ標準の太さ

ABCDEFGHIJKLMNOPQRSTUVWXYZ(normal)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

p{font-weight: lighter;}

アルファベットは細くなってるけど、日本語は細くならないんだね。

日本語の場合はほとんど細字がないんだよね、日本語の場合は
「normal(デフォルト)」または「bold(太字)」しかないからしっかり
覚えといてね。

bolder指定について

bolder親要素に対して1段階(数値で100)だけ太くなります。相対値になります。
親要素にfont-weight: 400;を指定した場合は子要素はfont-weight: 500;になります。

あいうえおアイウエオ標準の太さ

ABCDEFGHIJKLMNOPQRSTUVWXYZ(normal)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

p{font-weight: bolder;}

font-weight数値指定について

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に関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top