CSS font-weightの使い方 文字の太さの変更・指定方法

本記事は広告が含まれる場合があります CSS

【CSS font-weightの使い方】文字の太さの変更方法

今回は、CSSプロパティの1つで文字の太さを変更できるプロパティ「font-weightプロパティ」の使い方を解説していきます。

font-weightプロパティは、テキストの一部だけ文字を太くして目立たせたい場合や、もとから太字で表示されている部分を通常の太さに戻したい場合などに利用することができます。

font-weightを使って文字の太さを変更している例

 

 

font-weightは文字の太さを変更できるCSSプロパティ

font-weightは文字の太さを変更することができるプロパティです。

font-weightを使って文字の太さを変更している例

テキストの一部だけ太字や細字にしたいといった場合や、もとから太字で表示されている部分を通常の太さに戻したい場合などに利用されます。

 

font-weightプロパティの使い方

font-weightプロパティで使用できる値を紹介していきます。

フォントの太さの指定方法には「900」のように数値を使う方法や「bold」のようにキーワードを使う方法があります。

 

太さを数値で変更する

font-weightは、「400」や「700」、「900」といったように9段階の数値で変更することができます。

なお、指定できるのは100〜900までの値で、以下がそれぞれの値で指定した場合に表示されるフォントの太さになります。

font-weightを数値で指定している例

なお、フォントの太さは全部で9段階の種類が選べますが、使用するフォントによっては全ての太さに対応するデータが準備されていなかったりする為、font-weightが効かない場合もありますので、注意が必要です。

font-weightの指定が効いていない例

その為、もしfont-weightプロパティの指定が効かない場合は、使用しているフォントが対応している太さを確認するようにしましょう。
 

 

太さをキーワードで変更する

次に太さをキーワードで変更する方法についてです。

太さを変更できるキーワードには以下の4つがあります。

■太さを変更できるキーワード値

  • normal(初期値):標準の太さ・・・400に相当
  • bold:文字を太くする・・・700に相当
  • bolder:相対的に1段階、文字を太くする
  • lighter:相対的に1段階、文字を細くする

normal(初期値):標準の太さ・・・400

1つ目の値は、normalです。

こちらはfont-weightの初期値で、何も指定していない場合にはこの値が適用されています。

font-weight: normalを使用している例

ただし、見出しタグで囲った箇所はデフォルトで太字になるように設定されているので、これを通常の太さに変更してあげたい際などは「normal」を指定してあげる必要があります。

ちなみにnormalは数値でfont-weightを指定した場合の「400」と同じ太さになります。

bold:文字を太くする・・・700

2つ目の値は、boldです。

こちらを指定すると文字を太字にすることができます。

font-weight: boldを使用している例

なおこちらの値は数値で指定した場合の「700」と同じ太さになります。

bolder:相対的に1段階、文字を太くする

3つ目の値は、bolderです。

こちらを指定すると文字を相対的に1段階、太くすることができます。

font-weight: bolderを使用している例

上の例ではテキスト全体に「font-weight: bold;」を指定し、子要素であるspanタグで囲った箇所には「font-weight: bolder;」を指定している為、親要素のフォントサイズよりも1段階太いサイズに設定されています。

ただし、bolderで指定できる太さは「400」「700」「900」のいずれかの太さのみで考慮されるようになっている点に注意が必要です(700の一段階太いサイズは900)。

相対的な太さを使用した場合に考慮される値

引用:相対的な太さの意味

lighter:相対的に1段階、文字を細くする

4つ目の値は、lighterです。

こちらを指定すると相対的に1段階、文字を細くすることができます。

font-weight: lighterを使用している例

こちらもbolderの時と同じように、「100」「400」「700」のいずれかの太さのみで考慮されます(400の一段階細いサイズは100)。

相対的な太さを使用した場合に考慮される値

引用:相対的な太さの意味

 

 

HTMLタグを使って文字を太字にすることも可能

ちなみに補足ですが、フォントサイズを太くしたい場合はstrongタグやbタグといったHTMLタグを使用することもできます。

strongタグ 文中の強調したい箇所に使用される。(重要箇所の強調目的)
bタグ 文中で太字にしたい箇所に使用される。(装飾目的)

■(参考)strongタグを使って文字を太字にしている例

strongタグを使用して文字を太字にしている例

ただし、基本的にHTMLは装飾目的ではなく文書構造を表す為に使用するものなので、装飾目的でフォントの太さを変更したい場合は、CSSで変更してあげる方が一般的です。

 

 

まとめ・フォントの太さの指定にはfont-weight

まとめです。今回はfont-weightプロパティの使い方や使用できる値を紹介しました。

font-weightプロパティは、テキストの一部だけ文字を太くして目立たせたい場合や、もとから太字で表示されている部分を通常の太さに戻したい場合などに利用することができますので、ぜひ覚えておきましょう。

font-weightを使って文字の太さを変更している例

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-CSS