JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSでフォントの太さを設定する方法｜font-weightプロパティの使い方を解説

font-weightプロパティとは

CSSのfont-weightプロパティは、文字の太さ（ウェイト）を調整するためのプロパティです。フォントをより太く表示したり、逆に細く表示したりすることで、テキストに強調やメリハリをつけることができます。

font-weightプロパティには、以下のような値を指定できます。

  • キーワード値：normal（標準）、bold（太字）、bolder（親要素より太く）、lighter（親要素より細く）
  • 数値：100、200、300、400、500、600、700、800、900 の9段階

一般的に、400が標準の太さ（normal相当）、700が太字（bold相当）とされています。数値が大きいほど文字は太くなります。

使用例

実際にfont-weightプロパティを使って、文字の太さを変更するサンプルコードを見てみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "font-weight:bold;">このフォントは太字（bold）です。</p>
      <p style = "font-weight:bolder;">このフォントはさらに太く（bolder）表示されます。</p>
      <p style = "font-weight:500;">このフォントはウェイト500で表示されます。</p>
   </body>
</html>

各値のポイント

  • bold：標準的な太字を指定します（700相当）。
  • bolder / lighter：親要素の太さを基準に、相対的に太さを変化させます。
  • 数値指定：細かい段階で太さを制御できます。ただし、使用しているフォントが複数のウェイトを持っていない場合、ブラウザ側で近似の太さが適用されることがあります。

Webフォントを使用する場合は、読み込むフォントファイルに目的のウェイトが含まれているか確認しておくと、意図した通りの表示になります。

  1. CSSのem単位を使ってフォントサイズを設定する方法

    CSSでフォントサイズを指定する際、emという相対単位を使用すると、柔軟で拡張性の高いデザインを実現できます。emはfont-sizeプロパティと組み合わせて使われ、親要素のフォントサイズを基準にサイズが決まります。emとpxの関係一般的なブラウザでは、デフォルトのフォントサイズは16pxに設定されているため、次のような換算式が成り立ちます。1em = 16pxたとえば、30pxのフォントサイズをemで表したい場合は、以下のように計算します。30px ÷ 16px = 1.875emコード例実際にem単位でフォントサイズを設定するには、次のようなコードを実行してみてください。h1要素に対して1

  2. CSSのfont-weightプロパティでフォントの太さを指定する方法

    CSSの font-weight プロパティは、要素内のテキスト文字の太さ（ウェイト）を定義するために使用されます。見出しや強調したいテキストを目立たせる際に欠かせないプロパティで、キーワードによる指定と数値による指定の2つの方法があります。主な値の一覧normal … 標準の太さ（数値では400に相当）bold … 太字（数値では700に相当）bolder … 親要素より一段階太い太さlighter … 親要素より一段階細い太さ100〜900 … 数値で細かく指定（100が最も細く、900が最も太い）構文CSSの font-weight プロパティの構文は以下のとおりです。Selector