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

CSSのfont-weightプロパティの使い方：文字の太さを思い通りに調整する

font-weightプロパティとは

CSSのfont-weightプロパティは、フォントの太さ（ウェイト）を調整するためのプロパティです。文字を太くして強調したい場合や、逆に細くして上品な印象にしたい場合など、テキストの見た目をコントロールする際に欠かせない基本的なスタイル指定の一つです。

指定できる値の種類

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

  • normal … 標準の太さ（数値の400に相当）
  • bold … 一般的な太字（数値の700に相当）
  • bolder … 親要素より一段階太い太さ
  • lighter … 親要素より一段階細い太さ
  • 100〜900 … 9段階の数値による指定（100が最も細く、900が最も太い）

キーワードによる大まかな指定だけでなく、数値を使えばより細かくウェイトを制御できます。特に可変フォント（バリアブルフォント）を利用する場合は、数値指定がとても便利です。

使用例

次のコードは、font-weightプロパティを使って文字の太さを変更するシンプルな例です。

<html>
   <head>
   </head>
   <body>
      <p style = "font-weight:bold;">このテキストは太字（bold）で表示されます。</p>
      <p style = "font-weight:bolder;">このテキストは親要素よりさらに太く表示されます。</p>
      <p style = "font-weight:300;">このテキストは300（細め）の太さで表示されます。</p>
   </body>
</html>

まとめ

font-weightプロパティを使いこなすことで、見出しと本文のメリハリをつけたり、重要な情報を視覚的に強調したりすることができます。まずは「normal」「bold」などのキーワードから試し、必要に応じて100〜900の数値指定へステップアップするとよいでしょう。

  1. CSSのborder-left-widthプロパティで左ボーダーの幅を指定する方法

    CSSのborder-left-widthプロパティは、要素の左側の境界線（ボーダー）の太さを変更するために使用します。このプロパティを使うことで、左ボーダーだけの幅を個別に調整できます。使用例以下のコードは、border-left-widthプロパティを実装した実際の例です。<html>    <head>    </head>    <body>       <p style = "border-left-width:6px;border

  2. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none