【副業を始めたい人必見!】副業開始マニュアル

【font-weightプロパティ】CSSで文字の太さを変更する方法

【font-weightプロパティ】CSSで文字の太さを変更する方法 CSS

どうも!ニシドラ(@nishidorablog)です。

ニシドラ
ニシドラ

この記事では、font-weightプロパティについて解説します。

font-weightプロパティとは、文字フォントの太さを指定するためのプロパティです。

font-weightプロパティとはどんなプロパティなのかと指定する値、注意点について解説していきます。

当ブログ(ニシドラブログ)では、他にもCSSの使い方について解説をしています。

スポンサーリンク

font-weightプロパティとは

font-weightプロパティ」とは、フォントの太さを指定するプロパティです。
「weight」は英語で重さや重量という意味があり、読み方は「ウエイト」です。

指定する方法として一般的に、「normal」「bold」「lighter」「bolder」の4つの値でできます。

1~1000の数値で指定することもできますが、キーワードで指定することの方が多いので省略します。

指定する値と使い方

normal

normal」は英語で標準という意味です。

font-weigthプロパティを指定していない場合、文字フォントの初期値がこのnormalになっています。

以下のようなコード(左:html 右:css)を例にあげます。
「文字の太さを変える2」にnormalを指定するため、「font1」というクラス名を付けています。

<p>文字の太さを変える1</p>
<p class=”font1″>文字の太さを変える2</p>

 

 

.font1 { font-weight: normal; }

このコードをテキストエディタに入力し、ブラウザ上で表示させると右画像のようになります。

文字の太さが変わっていないことから、normalが初期値であることがわかります。

 

 

font-weight1

bold

bold」は英語で太字という意味で、文字を太くするにはfont-weightプロパティにboldを指定します。

「文字の太さを変える2」という文章を太字に変えるためboldを指定します。
個別で指定するため「font2」というクラス名を付けます。

<p>文字の太さを変える1</p>
<p class=”font2″>文字の太さを変える2</p>

 

 

.font2 { font-weight: bold; }

このコードをテキストエディタに入力し、ブラウザ上で表示させると右画像のようになります。

boldを指定することで文字が太くなりました。

 

 

font-weight2

lighterとbolder

lighter」と「bolder」はそれぞれ、一段階細く、一段階太くという意味を持っています。

この「一段階」とはデフォルトの値、つまりnormalから一段階細く・太くします。

適用できない文字フォントもあります。

使うときの注意点

長い文章に太文字は使わない

長い文章に太文字を使っていしまうと、メリハリがなくなり読みにくくなってしまいます。

font-weight3

上右画像のように文字を太くする場合は、文中で強調したい箇所に使いましょう。

適用できないフォントがある

フォントの種類によってはlighterやbolderが適用されない場合があります。

理由は「フォントがlighterやbolderに対応していない」からです。

ニシドラ
ニシドラ

どうしても変えたい場合は、フォントを別のものに変えて適用させましょう。

まとめ

これまで「font-weigthプロパティ」について解説してきました。

HTMLを勉強している方なら知っていると思いますが、「bタグ」や「strongタグ」を使うことで文字を太くすることも可能です。

しかし、文字を太くしたい箇所にタグを記述していくのは時間もかかるしめんどくさいですよね。

そんなときは、font-weigthプロパティでまとめて変えた方が楽なのでぜひ使ってみてください。

次回は、line-heightプロパティについて、【line-heightプロパティ】CSSで行間の幅を変える方法で解説します。

コメント

タイトルとURLをコピーしました