CSSで文字の太さを自由に変えよう！初心者向けフォントウェイト完全ガイド
生徒
「CSSで文字の太さを変える方法ってありますか？」
先生
「はい、CSSではfont-weightというプロパティを使って文字の太さを簡単に変えることができます。」
生徒
「文字の太さってどんなときに使い分けるんですか？」
先生
「例えば、見出しは太くして目立たせたり、本文は普通の太さで読みやすくしたりしますよ。それでは、詳しく見ていきましょう！」
1. CSSで文字の太さを変える基本の方法
CSSでは、文字の太さをfont-weightプロパティで指定します。これは英語で「フォントウェイト」と読み、文字がどれくらい太いか（重みがあるか）を意味します。
font-weightには、主に次のような値を指定できます：
- normal：通常の太さ（標準）
- bold：太字
- lighter：親要素より細く
- bolder：親要素より太く
- 数値（100〜900）：細かい太さの調整（数字が大きいほど太い）
2. よく使う文字の太さの指定例
まずは基本的な使い方から見ていきましょう。下のサンプルでは、<p>タグに対して、それぞれ違う太さを指定しています。
<style>
p.normal {
font-weight: normal;
}
p.bold {
font-weight: bold;
}
p.light {
font-weight: 300;
}
p.heavy {
font-weight: 900;
}
</style>
<p class="normal">これは通常の太さのテキストです。</p>
<p class="bold">これは太字のテキストです。</p>
<p class="light">これは細めのテキストです。</p>
<p class="heavy">これはとても太いテキストです。</p>
3. なぜ文字の太さを変えるの？
Webサイトでは、見た目のメリハリをつけたり、読みやすさを高めたりするために、文字の太さをうまく使い分けることが重要です。
たとえば：
- 見出し：太くして目立たせる（
boldや700など） - 本文：読みやすさを考えて標準（
normalや400） - 注目してほしい部分：部分的に太くして強調
逆に、すべての文字が同じ太さだと、読みづらく、情報が伝わりにくくなります。
4. 数値指定で細かく調整する方法
font-weightは、数値でも指定できます。よく使われる数値の意味は以下の通りです：
- 100：非常に細い
- 300：細め
- 400：通常（normal）
- 700：太字（bold）
- 900：極太
数字を使うと、デザインの微調整がしやすくなります。ただし、フォントの種類によっては、すべての数値に対応していない場合もあるので注意しましょう。
5. 親要素と子要素での影響と使い方
bolderやlighterという指定方法もあります。これは、親の文字の太さを基準にして、それより太くまたは細くします。
たとえば、親の文字が太字だった場合、子のbolderはより太くなり、lighterは少し細くなります。これは相対的な指定方法です。
6. CSSでよくある間違いと注意点
初心者の方がよくやってしまう間違いのひとつに、「すべてのフォントで太さが変わるわけではない」という点があります。
たとえば、あるフォントは400と700だけに対応していて、それ以外の数値にしても見た目が変わらないことがあります。
このため、見た目を確認しながら指定することが大切です。
7. 文字の太さを変更してデザインにメリハリを
Webデザインでは、文字の太さをうまく使うことで、視覚的に「どこが重要か」を伝えることができます。たとえば：
- タイトルは太字にして存在感を出す
- リンク文字を少し太くしてクリックされやすくする
- 目立たせたい単語を
<strong>タグと併用して強調
読者にとって、情報が「見やすい」「わかりやすい」ことはとても大切です。文字の太さは、そのための強力なデザインツールになります。
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
CSSで文字の太さを変えるにはどのプロパティを使えばいいですか？
CSSで文字の太さを変更するにはfont-weightというプロパティを使用します。font-weightは文字の重みや太さを調整できる重要なプロパティで、太字や細字などさまざまな表現が可能です。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
