• HOME > 
  • CSS > 
  • CSSのfont-weightで文字を太字(bold)にする...

CSSのfont-weightで文字を太字(bold)にする方法

投稿日:

広告

font-weightプロパティとは?

font-weightは、文字の太さを変更するためのプロパティです。

文字を太字にして目立たせたいときに良く使われます。

font-weightの記述の仕方

font-weightは次のように記述して使用します。

font-weightの書き方

値の種類

font-weightの値は用意された4つの単語か数値で指定することができます。

単語で指定する

font-weightには、次の4つが値として用意されています。

normal通常
例:ダミーテキスト
bold太字にする
例:ダミーテキスト
lighter親要素より一段階細くする
例:ダミーテキスト
bolder親要素より一段階太くする
例:ダミーテキスト

数値で指定する

100から900まで、100毎の数値を使って太さを指定することも可能です。

100例:ダミーテキスト
300例:ダミーテキスト
400例:ダミーテキスト
500例:ダミーテキスト
700例:ダミーテキスト
900例:ダミーテキスト

font-weightが効かないときは?

font-weightで太さを指定したのに思い通りに反映されない場合は、元々フォントに太字が用意されていないという場合がほとんどです。

残念なことに多くのフォントでは通常と太字の2種類の太さしか用意されていません。そのため、normalかbold以外の値(数値やbolder・lighter)を使って指定しても太さが変化することはありません。

このページの例では、100・300・400・500・700・900の太さが用意されているWebフォントGoogle Fontsの「Noto Sans JP」を使用しています。

リンク先のサムネイル
CSSのfont-familyの使い方

CSSでは、font-family:「フォント名」という形で文字に適用させたいフォントを指定することで閲覧するデバイスに対して指定フォントを表示させるようにできます...【もっと読む】

まとめ

以上が、font-weightプロパティの使い方です。

normalとbold以外は利用できるフォントに制限があるため、単に通常か太字のどちらかを切り替えるという使い方がほとんどかもしれません。

広告

関連する記事

サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。
サムネイル

CSSのletter-spacingで文字間隔を設定【中央寄……

2023年01月16日
最終更新日:2023年03月10日
letter-spacingは、テキストの文字と文字との間隔を設定するためのプロパティです。文字と文字の間を狭めたり、広げたりしてバランスを整えることができます。
サムネイル

CSSのtext-emphasisの使い方【圏点(けんてん)……

2023年01月16日
最終更新日:2023年03月10日
text-emphasisは、文字を強調したいときに付け加える圏点(けんてん)を表示するプロパティです。圏点のスタイル(形状)と色を自由に設定することが可能です。
サムネイル

CSSで中国語フォントを表示させる方法【font-famil……

2022年10月28日
最終更新日:2023年03月10日
簡体字を使用するにはサイトにGoogle FontsなどのWebフォントを導入して、CSSのfont-familyプロパティでそのフォントを指定します。
サムネイル

CSSだけで斜線を引く方法【transformとlinear……

2022年08月09日
最終更新日:2023年03月10日
CSSだけで斜線を引くには、「transformプロパティのrotateを使う」と「backgroundプロパティのlinear-gradient」という2通りの方法があります。