CSSでfont-weightを使って文字の太さを指定する方法【初心者向け】
CSSの【font-weight】のプロパティを使って文字の太さを指定する方法を初心者向けに解説した記事です。normalとbold、数値で指定する、bolderとlighterの3種類を紹介します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSS初心者向けに、font-weightを使って文字の太さを指定する方法を解説する記事です。
CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。
font-weightとは
CSSのfont-weightプロパティを使用することによって、文字の太さを指定することができます。文字を目立たせたい場合なのに使いましょう。
事前準備
事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。なお、CSSのファイルは「sample.css」にすることにします。
ぜひ自分のPCでもやってみましょう。
HTMLファイル：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”sample1″>あいうABCabc123</p>
<p class=”sample2″>あいうABCabc123</p>
</body>
</html>
font-weightを使う
では具体的に使ってみましょう。
normalとbold
まずは基本となるnormalとboldを使います。下記のように書くことができます。
p.sample1 {font-weight:normal; }
p.sample2 {font-weight:bold; }
normalは通常の太さで、初期値はこれに設定されています。boldに値を設定すると太字になります。
ブラウザではこのように表示されます。
数値で指定する
続いて、文字列を3行にしてそれぞれの数値で文字の太さを指定してみます。
HTMLファイルはこのように3行に変更します。
<p class=”sample1″>あいうABCabc123</p>
<p class=”sample2″>あいうABCabc123</p>
<p class=”sample3″>あいうABCabc123</p>
CSSは下記のように数値で指定します。
p.sample1 {font-weight:200; }
p.sample2 {font-weight:400; }
p.sample3 {font-weight:800; }
数値で指定した場合の種類は100/200/300/400/500/600/700/800/900の9段階ありますが、実際にはブラウザで2種類のみで設定されていることが多く、画面上でも一番下の800のみが太字で表示されています。(値700以上でboldと同様の表示になります)
bolderとlighter
親要素に指定された形式よりbolderは太く、lighterは細く表示されます。
具体的には下記のように記述しましょう。bodyでまず全体を太字に設定している点にご注意ください。
body {font-weight:bold; }
p.sample1 {font-weight:inherit; }
p.sample2 {font-weight:bolder; }
p.sample3 {font-weight:lighter; }
ブラウザではこのように表示されます。
1行目はinherit(親要素を継承)したので太字です。
2行目はbolderで親要素よりも太くなるように指定されていますが、先ほどと同様フォントにそれ以上の太さが用意されていないため、画面上では1行目と同じになっています。
3行目は親要素のboldよりもlighterで細くなるように指定され、通常の太さに変化しています。
今回は3種類を紹介しましたが、用途に応じて使い分けてください。
CSSの基礎をさらに学びたい場合は、CSSでfont-familyを使ってフォントを指定する方法も合わせてご覧ください。
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
