[css]文字を太字にしてみよう

今回はフォントの文字を太字にする方法をご紹介したいと思います。

皆様もホームページを作成する際に、強調してみてほしいところってありますよね。そんな時、その文字を太字にして強調してみてもらうことってあると思います。そこで今回はフォントの文字をcssを使って太字にしてみようと思います。

文字を太字にするhtmlを準備しよう

文字を太字にするhtmlを準備していこうと思います。
文字を太字にするといっても太字の度合いを設定することができます。
今回は通常サイズの文字の太さと、太い文字の２種類のものを用意してみようと思います。

<p class="font-weight-normal">文字の太さが通常サイズです。</p>
<p class="font-weight-bold">文字が太いです</p>

上記のように２種類を用意してcssでどう変化するのかみていきましょう。

cssで文字を太字にしてみよう

上記のhtmlを使って２種類の文字の太さをcssで設定してみましょう。

文字の太さを変更するにはcssで「 font-weight 」を使う必要があります。文字の太さを変更したものは次のようなものになります。

<style>
 .font-weight-normal{
   font-weight:normal;
 }
 .font-weight-bold{
   font-weight:bold;
 }
</style>
<p class="font-weight-normal">文字の太さが通常サイズです。</p>
<p class="font-weight-bold">文字が太いです</p>

文字の太さを変えたサンプル実装例

文字の太さが通常サイズです。

文字が太いです

上記のように 「 font-weight:bold」を設定すると太字なっていることが通常の文字サイズと比較すると太くなっていることがわかります。
このように設定することで文字を太文字にすることができます。

まとめ

今回は文字の太さをcssでどうやって変更するのかといったことをご紹介させていただきました。文字の太さを変更することで、本当に見てほしい場所を強調することができるのが情報に強弱をつけることができますね。ぜひ大事な部分は太字にしてあなたの本当に伝えたいことを強調して見てください。