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

CSSのfont-weightプロパティでフォントの太さを自由に調整する方法

font-weightプロパティとは

CSSのfont-weightプロパティを使うと、テキストのフォントをどの程度太く（あるいは細く）表示するかを指定できます。見出しや強調したい部分を目立たせる際に非常に便利なプロパティです。

指定できる値

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

  • キーワード： normal（標準）、bold（太字）、bolder（親要素より太く）、lighter（親要素より細く）
  • 数値： 100 ～ 900 の9段階（100が最も細く、900が最も太い）

一般的に、400は「normal」、700は「bold」に相当します。使用しているフォントによっては、すべての太さが用意されていない場合がある点に注意してください。

コード例

<html>
   <head>
   </head>
   <body>
      <p style = "font-weight:bold;">このフォントは太字です。</p>
      <p style = "font-weight:bolder;">このフォントはより太く表示されます。</p>
      <p style = "font-weight:400;">このフォントは400（標準）の太さです。</p>
   </body>
</html>

表示結果

上記のコードをブラウザで表示すると、1行目は「bold」指定により太字になり、2行目は親要素よりもさらに太い文字で表示されます。3行目は数値「400」を指定しているため、通常の太さで描画されます。

使い方のポイント

相対値である「bolder」や「lighter」は親要素の太さを基準に計算されるため、入れ子構造のHTMLでも柔軟に対応できます。一方、デザインの一貫性を重視する場合は、「300」「500」「700」などの数値で細かく制御するのがおすすめです。Webフォントを使用する場合は、目的のウェイトが提供されているかどうかもあわせて確認しましょう。

  1. Firefoxでフォントサイズを拡大・縮小する方法｜PC・Android両対応の設定ガイド

    フォントのサイズは、学習や記憶、注意力、読書、思考などに大きな影響を与えるため、非常に重要な要素です。 目の状態への配慮が必要な方も、極端に小さな文字や大きな文字をお好みの方も、自分に合ったフォント設定がきっと見つかります。ほとんどのデバイスやブラウザでは、好みのフォントやフォントサイズを選択でき、設定はいつでも自由に変更・管理できます。この記事では、Firefoxブラウザでフォントサイズを変更する方法を詳しく解説します。 デスクトップ版Firefoxでフォントサイズを変更する方法 デスクトップ版Firefoxでフォントサイズを調整するには、主に2つの簡単な方法があります。 方法1：Firef

  2. Notepad++でフォントサイズを変更・拡大縮小する方法

    Notepad++は、Microsoft Windows向けの無料ソースコードエディタです。標準のWindowsメモ帳にはない便利な機能が数多く搭載されています。しかし、他のテキストエディタとは異なり、Notepad++にはツールバーやメニューバーにフォント設定の項目が用意されていません。そのため、フォントサイズの変更場所が見つけられず、デフォルトのフォントサイズのまま使い続けているユーザーも少なくありません。また、文字が極端に小さすぎたり大きすぎたりして、うまく変更できないとお困りの方もいるでしょう。この記事では、Notepad++のフォントサイズを簡単に変更する方法を詳しく解説します。1.