チャッピー

文章を書いたりする時に見出しのように文字の太さを太くしたり雰囲気を変えたいんだけども…

こばゆた

文字の太さを変えるにはfont-weightプロパティを使います。今回はそのプロパティを見ていこう！

1.font-weightの使い方

<p>Hello</p>

通常pタグを使って文章を書くとこうなります。

これを太字にしたい時(目立たせたい時など)はfont-weightプロパティを使い、値にはキーワードや数値を設定します。

セレクター{
 font-weight: 値;
}

pタグに対して、font-weightを選択し、値を”bold“とすれば見出しの様にフォントが太くなります。

p{
 font-weight: bold;
}
/*p要素のfont-weightをboldにする*/

また逆に太字を普通の太さにしたい時は、値を”normal“にします。

<h1>タイトルです！</h1>

通常h1タグは太字になりますが…。

h1{
 font-weight: normal;
}
/*h1要素のfont-weightをnormalにする*/

font-weightプロパティを使って値を”normal”とすると。

普通の文字の太さになりました！

こばゆた

基本的には”bold”と”normal”の２つを使うことが多いです！

また値に100~900までの数値を入れても太さを変えることができます。

p{
 font-weight: 数値;
}

こばゆた

微調整して使いたい方はどうぞ

2.font-style

ついでではなんですがfont-styleプロパティというものにもここで触れておきます。

font-styleプロパティを使うと、引用文やおしゃれな見出しなどで文字をイタリック体のような斜体にすることができます。

セレクター{
 font-style:値;
}

値は”italic“や”oblique“を使います。

こばゆた

例として値を”italic”にしてみましょう。

p{
 font-style: italic;
}
/*p要素のfont-weightをitalicにする*/

p{
 font-style:oblique;
}
/*p要素のfont-weightをobliqueにする*/

あんまり違いがわからないかもしれません💦

こばゆた

とりあえずは”italic”の方を押さえておきましょう。

<i>HELLO</i>

3.まとめ

セレクター{
  font-weight: 値;
}

セレクター{
  font-style: 値;
}

こばゆた

今回のプロパティはよく出てくるから頑張って使えるようにしておきましょう！

チャッピー

なんかできそうな気がしてきたよ

きなこ

あれ？チャッピーの口調まで変わってない？