CSSで文字の太さを調整する方法｜font-weightの基本ときれいに見せるコツ

CSS

Webページのデザインで意外と重要なのが、文字の太さ。

「見出しが本文と同じ太さで、メリハリがない…」

「重要なポイントを目立たせたいけど、どうすればいいの？」

「フォントの太さを変えたら、なんだか読みにくくなった」

そんな経験はありませんか？

見出しやボタン、重要なキーワードを適切な太さにすると、ページがぐっと見やすくなり、プロフェッショナルな印象を与えることができます。

CSSではfont-weightプロパティを使って簡単に文字の太さを調整できますが、ただ太くするだけではなく、読みやすさとデザイン性を両立させるコツがあります。

この記事では

  • CSSで文字の太さを変える基本のやり方
  • 数字で細かく指定する方法
  • フォントに合わせた最適な太さの選び方
  • 実際のWebサイトできれいに見せるコツ

を、実用的なコード例とともに初心者の方にもわかりやすく解説します。

スポンサーリンク

font-weight の基本を理解しよう

font-weight とは

font-weightは、**文字の太さ（重み）**を指定するCSSプロパティです。

文字を太くすることで、視覚的な階層を作り、読者の注意を適切に誘導できます。

指定方法は2種類

1. キーワードで指定

  • normal、bold など、わかりやすい単語

2. 数値で指定

  • 100〜900 の数字で、より細かく調整

それぞれの特徴と使い方を詳しく見ていきましょう。

1. キーワードで指定する基本的な使い方

よく使うキーワード

説明： 最もシンプルで覚えやすい指定方法です。

基本のCSS：

/* 普通の太さ */
p {
  font-weight: normal;
}

/* 太字 */
h1 {
  font-weight: bold;
}

/* 細字（対応フォントのみ） */
.thin-text {
  font-weight: lighter;
}

/* より太字（対応フォントのみ） */
.heavy-text {
  font-weight: bolder;
}

HTML：

<p>これは普通の太さの文字です。</p>
<h1>これは太字の見出しです。</h1>
<p class="thin-text">これは細い文字です。</p>
<p class="heavy-text">これは重い文字です。</p>

キーワードの対応関係

キーワード対応する数値用途
normal400本文・通常のテキスト
bold700見出し・強調したいテキスト
lighter現在より細く相対的に細くしたい場合
bolder現在より太く相対的に太くしたい場合

実用例：

/* 基本的なサイト構造 */
body {
  font-weight: normal; /* 400と同じ */
}

h1, h2, h3 {
  font-weight: bold; /* 700と同じ */
}

strong, b {
  font-weight: bold;
}

これだけでも多くの場面で十分に対応できます。

2. 数字で細かく指定する方法

数値指定の基本

説明： font-weightは100〜900の数字（100刻み）でより細かく指定できます。

数値とその特徴：

.ultra-light { font-weight: 100; } /* 超細い */
.extra-light { font-weight: 200; } /* 極細 */
.light       { font-weight: 300; } /* 細い */
.normal      { font-weight: 400; } /* 普通 */
.medium      { font-weight: 500; } /* 中間 */
.semi-bold   { font-weight: 600; } /* 中太 */
.bold        { font-weight: 700; } /* 太字 */
.extra-bold  { font-weight: 800; } /* 極太 */
.ultra-bold  { font-weight: 900; } /* 超太い */

実際の見た目と使い分け

数値見た目よく使う場面
100-200非常に細い上品なデザイン、大きなテキスト
300細い本文（高級感を出したい時）
400普通本文の標準
500中間ナビゲーション、キャプション
600中太小見出し、重要な情報
700太字見出し、ボタンテキスト
800-900非常に太いインパクトのある見出し

実用的な組み合わせ例

/* モダンなWebサイトのスタイル */
.site-title {
  font-weight: 800; /* 強いインパクト */
  font-size: 32px;
}

.main-heading {
  font-weight: 700; /* しっかりとした太さ */
  font-size: 24px;
}

.sub-heading {
  font-weight: 600; /* 中程度の強調 */
  font-size: 18px;
}

.body-text {
  font-weight: 400; /* 読みやすい標準 */
  font-size: 16px;
}

.caption {
  font-weight: 300; /* 上品で軽やか */
  font-size: 14px;
  color: #666;
}

注意：フォントサポートの確認

重要なポイント： すべてのフォントが全ての太さに対応しているわけではありません。

対応状況の例：

/* Arial は 400 と 700 のみ対応 */
.arial-text {
  font-family: Arial, sans-serif;
  font-weight: 300; /* 400 として表示される */
}

/* Noto Sans は多くの太さに対応 */
.noto-text {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 300; /* 正しく表示される */
}

確認方法： ブラウザの開発者ツールで実際の表示を確認するか、フォントの仕様書を確認しましょう。

3. Webフォントで太さのバリエーションを増やす

Google Fonts の活用

説明： Google Fonts を使えば、様々な太さに対応したフォントを簡単に読み込めます。

基本的な読み込み方法：

/* 複数の太さを指定して読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700;900&display=swap');

body {
  font-family: 'Noto Sans', sans-serif;
}

HTML でのlink指定：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">

効率的なWebフォント指定

必要な太さだけを読み込む：

/* 使用する太さのみ指定（読み込み高速化） */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

.text-normal { font-weight: 400; }
.text-medium { font-weight: 600; }
.text-bold   { font-weight: 700; }

Variable Font の活用：

/* Variable Font なら連続的な太さ調整が可能 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.custom-weight {
  font-weight: 350; /* 300と400の中間 */
}

人気フォントの太さ対応状況

フォント対応する太さ特徴
Roboto100,300,400,500,700,900Googleデザイン、汎用性高
Open Sans300,400,600,700,800読みやすさ重視
Lato100,300,400,700,900エレガント
Inter100-900（可変）モダン、UI向け
Noto Sans JP100,300,400,500,700,900日本語対応

4. 文字の太さをきれいに見せるコツ

見出しの階層を作る

説明： 見出しの重要度に応じて、段階的に太さを変えることで、視覚的な階層を作れます。

階層設計の例：

/* 階層的な見出しシステム */
h1 {
  font-weight: 800; /* 最も重要 */
  font-size: 32px;
  margin-bottom: 24px;
}

h2 {
  font-weight: 700; /* 重要 */
  font-size: 24px;
  margin-bottom: 20px;
}

h3 {
  font-weight: 600; /* 中程度 */
  font-size: 20px;
  margin-bottom: 16px;
}

h4 {
  font-weight: 500; /* 軽い強調 */
  font-size: 18px;
  margin-bottom: 12px;
}

p {
  font-weight: 400; /* 標準 */
  font-size: 16px;
  line-height: 1.6;
}

本文の読みやすさを重視

細めのフォントで上品に：

/* 上品で読みやすい本文 */
.elegant-text {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #333;
}

注意点： 細いフォント（300以下）はスマホでは読みにくい場合があります。

レスポンシブ対応：

.responsive-text {
  font-weight: 300; /* デスクトップ */
  font-size: 16px;
}

@media (max-width: 768px) {
  .responsive-text {
    font-weight: 400; /* モバイルでは少し太く */
    font-size: 15px;
  }
}

コントラストで重要度を表現

強弱のメリハリ：

/* 記事のメタ情報 */
.article-meta {
  font-weight: 300;
  color: #666;
  font-size: 14px;
}

/* 記事タイトル */
.article-title {
  font-weight: 700;
  color: #333;
  font-size: 28px;
}

/* 記事本文 */
.article-body {
  font-weight: 400;
  color: #444;
  font-size: 16px;
  line-height: 1.6;
}

/* 強調テキスト */
.highlight {
  font-weight: 600;
  color: #2563eb;
}

5. 実用的な font-weight パターン集

ボタンデザイン

/* プライマリボタン */
.btn-primary {
  font-weight: 600;
  padding: 12px 24px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary:hover {
  font-weight: 700; /* ホバー時に少し太く */
  background: #2563eb;
}

/* セカンダリボタン */
.btn-secondary {
  font-weight: 500;
  padding: 12px 24px;
  background: transparent;
  color: #3b82f6;
  border: 2px solid #3b82f6;
  border-radius: 6px;
  cursor: pointer;
}

ナビゲーションメニュー

.navbar {
  font-weight: 500;
}

.nav-link {
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.2s;
}

.nav-link:hover {
  font-weight: 600;
  color: #1f2937;
}

.nav-link.active {
  font-weight: 700;
  color: #3b82f6;
}

カードコンポーネント

.card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-title {
  font-weight: 700;
  font-size: 20px;
  color: #1f2937;
  margin-bottom: 12px;
}

.card-subtitle {
  font-weight: 500;
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 16px;
}

.card-text {
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

.card-meta {
  font-weight: 300;
  font-size: 12px;
  color: #9ca3af;
  margin-top: 16px;
}

フォームデザイン

.form-label {
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  margin-bottom: 6px;
  display: block;
}

.form-input {
  font-weight: 400;
  font-size: 16px;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  width: 100%;
}

.form-help {
  font-weight: 300;
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.form-error {
  font-weight: 500;
  font-size: 12px;
  color: #dc2626;
  margin-top: 4px;
}

6. アニメーションと動的な太さ変更

ホバー効果での太さ変更

説明： マウスオーバー時に文字の太さを変更して、インタラクティブ感を演出できます。

CSS：

.hover-weight {
  font-weight: 400;
  transition: font-weight 0.2s ease;
  cursor: pointer;
}

.hover-weight:hover {
  font-weight: 700;
}

/* より滑らかな変化 */
.smooth-weight {
  font-weight: 400;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-weight:hover {
  font-weight: 600;
  letter-spacing: 0.02em;
}

クリック時の効果

.clickable-text {
  font-weight: 500;
  transition: all 0.1s ease;
  cursor: pointer;
  user-select: none;
}

.clickable-text:active {
  font-weight: 700;
  transform: scale(0.98);
}

JavaScriptとの組み合わせ

JavaScript：

// 文字の太さを動的に変更
function emphasizeText(element) {
  element.style.fontWeight = '700';
  element.style.transition = 'font-weight 0.3s ease';
}

// 複数要素の太さを順次変更
function animateTextWeights() {
  const elements = document.querySelectorAll('.animate-weight');
  elements.forEach((el, index) => {
    setTimeout(() => {
      el.style.fontWeight = '700';
    }, index * 100);
  });
}

CSS：

.animate-weight {
  font-weight: 300;
  transition: font-weight 0.3s ease;
}

7. トラブルシューティング

よくある問題と解決方法

問題1：指定した太さが反映されない

原因： フォントがその太さに対応していない 解決方法：

/* フォールバックを用意 */
.safe-weight {
  font-family: 'Custom Font', Arial, sans-serif;
  font-weight: 300; /* Custom Font で利用 */
}

/* Arial などは 400 で表示される */

問題2：スマホで細い文字が読みにくい

解決方法：

.mobile-friendly {
  font-weight: 300;
}

@media (max-width: 768px) {
  .mobile-friendly {
    font-weight: 400; /* モバイルでは標準に */
  }
}

問題3：太さの変化が不自然

解決方法：

/* 段階的な変化 */
.natural-progression h1 { font-weight: 800; }
.natural-progression h2 { font-weight: 700; }
.natural-progression h3 { font-weight: 600; }
.natural-progression p  { font-weight: 400; }

/* 差をつけすぎない */

ブラウザ対応状況

ブラウザfont-weight 数値指定Variable Font
Chrome✅ 完全対応✅ 対応
Firefox✅ 完全対応✅ 対応
Safari✅ 完全対応✅ 対応
Edge✅ 完全対応✅ 対応
IE11⚠️ 一部制限❌ 非対応

8. デザインシステムでの太さ管理

一貫性のある太さの設計

CSS Variables を使った管理：

:root {
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

.text-light { font-weight: var(--font-weight-light); }
.text-normal { font-weight: var(--font-weight-normal); }
.text-medium { font-weight: var(--font-weight-medium); }
.text-semibold { font-weight: var(--font-weight-semibold); }
.text-bold { font-weight: var(--font-weight-bold); }
.text-extrabold { font-weight: var(--font-weight-extrabold); }

ユーティリティクラスの作成

/* Tailwind CSS風のユーティリティ */
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

まとめ：効果的な文字の太さでサイトの印象UP

CSSのfont-weightを適切に使いこなすことで、Webサイトの読みやすさとデザイン性を大幅に向上させることができます。

基本の覚え方

よく使う太さ：

  • 400（normal）：本文の基本
  • 600：軽い強調、小見出し
  • 700（bold）：見出し、重要なポイント

指定方法：

/* キーワード指定 */
font-weight: normal; /* 400 */
font-weight: bold;   /* 700 */

/* 数値指定 */
font-weight: 400; /* より細かい調整 */
font-weight: 600; /* 中間の太さ */

デザインのポイント

  1. 階層を意識：見出しの重要度に応じて段階的に太さを変える
  2. 読みやすさ優先：本文は400を基本に、必要に応じて調整
  3. フォント対応確認：使用フォントがサポートする太さを確認
  4. レスポンシブ対応：モバイルでは少し太めにして可読性を確保

実践での活用法

基本構成：

h1 { font-weight: 700; font-size: 28px; }
h2 { font-weight: 600; font-size: 24px; }
h3 { font-weight: 600; font-size: 20px; }
p  { font-weight: 400; font-size: 16px; }

強調・アクセント：

.highlight { font-weight: 600; color: #3b82f6; }
.caption  { font-weight: 300; color: #6b7280; }

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

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