font-weight

フォントウェイト（テキストとフォント）

意味フォントの太さ

font-weightとは？

font-weightプロパティは、テキストの太さ（フォントのウェイト）を指定するためにCSSで使用します。このプロパティは、通常のテキストよりも太い（bold）や細い（lighter）など、テキストの強調度を変えるために役立ちます。

font-weightの具体的な使い方

キーワードでフォントの太さを指定する例

<style>
    p {
        font-weight: bold;
    }
</style>
<p>このテキストは太字です。</p>

ページ内の全てのp（段落）要素のテキストを太字（bold）に設定しています。

数値でフォントの太さを指定する例

<style>
    .light {
        font-weight: 300;
    }
    .normal {
        font-weight: normal;
    }
    .bold {
        font-weight: 700;
    }
</style>

font-weightプロパティに数値を使用して、より細かくフォントの太さを制御しています。300は細め、normal（400）は通常、700は太めを表します。

font-weightに関するよくある質問

Q. boldとnormalの数値は？

A. 一般的に、normalは400、boldは700に相当します。ただし、これは使用するフォントによって多少異なる場合があります。

Q. 利用可能な数値の範囲は？

A. font-weightの数値は100から900まで、100刻みで指定できます。100が最も細く、900が最も太くなります。ただし、全ての数値がすべてのフォントで利用できるわけではありません。

Q. bolder, lighterとは？

A. bolderは親要素より一段階太く、lighterは親要素より一段階細くフォントを設定します。これらは相対的な値で、親要素のfont-weightに応じて実際の太さが決まります。

font-weightが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのfont-weightやtext-decoration、text-decoration-style、color、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。