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

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

CSSの font-weight プロパティは、要素内のテキスト文字の太さ（ウェイト）を定義するために使用されます。見出しや強調したいテキストを目立たせる際に欠かせないプロパティで、キーワードによる指定と数値による指定の2つの方法があります。

主な値の一覧

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

構文

CSSの font-weight プロパティの構文は以下のとおりです。

Selector {
   font-weight: /*値*/;
}

サンプルコード1：キーワードで太さを指定する

次の例では、normal・bolder・bold の各キーワードを使ってフォントの太さを指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 3px;
   font-family: "Ink Free";
   width: 30%;
   font-size: 24px;
}
#one {
   font-weight: normal;
   border-bottom: 2px dashed greenyellow;
}
#two {
   font-family: "Kristen ITC";
   font-weight: bolder;
   border-bottom: 2px dashed cornflowerblue;
}
#three {
   font-weight: bold;
   border-bottom: 2px dashed chocolate;
}
</style>
</head>
<body>
<div id="one">First Demo Text</div>
<div id="two">Another Demo Text</div>
<div id="three">Last Demo Text</div>
</body>
</html>

出力結果

上記のコードを実行すると、normal を指定したテキストは標準の太さで表示され、bolder や bold を指定したテキストは太字で表示されます。それぞれの下線の色も異なり、太さの違いがひと目でわかるようになっています。

サンプルコード2：数値で太さを指定する

次の例では、属性セレクタと組み合わせて、数値（100）や bold を使ってリスト項目のフォントの太さを制御しています。

<!DOCTYPE html>
<html>
<head>
<style>
[class|=lis] {
   font-style: italic;
   font-weight: bold;
}
li[class|="lis-ul"] {
   background-color: cadetblue;
   font-family: Helvetica;
   font-weight: 100;
   color: gainsboro;
   width: 20%;
}
</style>
</head>
<body>
<h2>Tutorials</h2>
<ol>
<li><p>C#</li>
<li class="lis-ul-2">DBMS</li>
<li class="lis-3">OS</li>
<li>Java</li>
<ul>
<li class="lis-ul-one">Core Java</li>
<li class="lis">Advance Java</li>
</ul>
</ol>
</body>
</html>

出力結果

このコードを実行すると、「lis」で始まるクラス名を持つ要素には斜体かつ太字が適用され、「lis-ul」で始まるクラス名を持つリスト項目には極細（100）のフォントウェイトが適用されます。背景色や文字色との組み合わせにより、視覚的なコントラストも確認できます。

まとめ

font-weight プロパティを使えば、キーワード（normal / bold / bolder / lighter）でも数値（100〜900）でも柔軟にフォントの太さを制御できます。ただし、実際に表示される太さは使用しているフォントファミリーが対応しているウェイトに依存するため、Webフォントを使用する場合は利用可能なウェイトを確認しておくとよいでしょう。

  1. CSSのfont-variantプロパティとは？使い方と実例をわかりやすく解説

    CSSのfont-variantプロパティは、テキストの字形（グリフ）のバリエーションを指定するためのショートハンド（一括指定）プロパティです。このプロパティを使うことで、以下の個別プロパティの値をまとめて設定できます。font-variant-caps（大文字・小文字の字形）font-variant-numeric（数字の字形）font-variant-alternates（代替字形）font-variant-ligatures（合字）font-variant-east-asian（東アジア言語向けの字形）構文font-variantプロパティの基本的な書き方は次のとおりです。Selecto

  2. CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説

    CSSのfont-sizeプロパティは、テキストのフォントサイズ（文字の大きさ）を設定するために使用されるプロパティです。値はパーセンテージ（%）や、px（ピクセル）、cm、pt（ポイント）、emなどの単位、さらには絶対的なキーワードによって指定できます。特に相対的な値を使用することで、ユーザーがブラウザの設定を変更しても文字サイズが追従し、アクセシビリティを最大限に高めることができます。なお、フォントサイズのデフォルト値は16px（または12pt）です。構文CSSのfont-sizeプロパティの基本構文は以下の通りです。セレクタ { font-size: /*値*/ }font-si