CSSで文字の色・大きさ・太さを変える方法｜color・font-size・font-weightを初心者向けに解説

HTMLの段落を作れたので、次はCSSで文字を整えたい。けれど、「文字色はどのプロパティ？」「20と書くだけでは大きくならないの？」「太字はboldと700のどちらを使う？」と迷っていませんか。この記事は、文字の指定を初めて試す方に向けた入門です。

文字の見た目を変える基本は、color・font-size・font-weightの3つです。プロパティは見た目を指定する項目、セレクターはその指定を適用する対象を選ぶ部分です。3つの項目を一つのセレクター内へまとめて書けます。

この記事では、短いコードで3つの指定を学び、一つの段落にまとめて適用します。後半では練習用ファイルを作り、文字サイズだけを変えて元へ戻すところまで試します。

必要なのはパソコン、テキストエディター、ブラウザーです。サイトの公開やWordPressの設定は不要なので、コードをコピーして一項目ずつ確かめてください。セレクター・プロパティ・値の位置から復習したい方は、CSSの基本的な書き方も先に確認してください。

CSSで文字を変える3つのプロパティ

CSSでは、変えたい見た目ごとにプロパティを選びます。文字に関する最初の3つは、次のように整理できます。

• color：文字の色を変える
• font-size：文字の大きさを変える
• font-weight：文字の太さを変える

colorは文字色、font-sizeは大きさ、font-weightは太さを変えるプロパティです。 たとえば、次のCSSはleadクラスを持つ段落へ3つの見た目を指定します。

.lead {
  color: #536048;
  font-size: 20px;
  font-weight: 700;
}

「プロパティ: 値;」という1行を宣言と呼びます。color: #536048;なら、プロパティはcolor、値は#536048です。複数の宣言は、同じ波括弧（{ }）の中へ1行ずつ書けます。

各宣言の末尾に;を付けると、次の宣言との区切りが明確になります。最後の宣言では省略できますが、初心者は毎行付ける書き方にそろえると、あとから追記するときのミスを防げます。

3つの指定を省略した場合は、同じ要素に適用されるほかのCSSや親要素から受け継ぐ指定などで見た目が決まります。必ず黒・16px・通常の太さに戻るわけではありません。

図は違いを見比べるため、本文の例から「文字」の2字を取り出して拡大したものです。3つを同時に指定する前に、変えたい箇所とプロパティを対応させましょう。

colorで文字の色を変える

colorは、文字の色を指定するプロパティです。CSSでは、文字など手前に表示される色を「前景色」と呼びます。次の例では、leadクラスを持つ段落の文字色を濃い緑へ変えます。

<p class="lead">CSSで文字の見た目を整えます。</p>

.lead {
  color: #536048;
}

このCSSを適用すると、「CSSで文字の見た目を整えます。」という文字が濃い緑で表示されます。

colorが変えるのは文字色です。背景色を変えるときはbackground-colorを使います。 名前が似ていても、変わる場所が異なります。

色名と16進数の書き方

初心者が最初に試しやすい値は、色名と16進数です。

.sample-red {
  color: red;
}

.sample-green {
  color: #536048;
}

redは色名、#536048は、#の後ろへ6桁の16進数を書いて色を表した例です。各桁には0〜9とa〜f（大文字も可）を使います。CSSではほかにもrgb()やhsl()を使えますが、最初からすべてを覚える必要はありません。使う色を決め、その値を正確にコピーできれば十分です。

対応する値と構文は、MDNのcolorプロパティで確認できます。

font-sizeで文字の大きさを変える

font-sizeは、文字の大きさを指定するプロパティです。次の例では、leadクラスの文字を20pxにします。

.lead {
  font-size: 20px;
}

0以外の数値で文字サイズを指定するときは、20pxや1.25remのように単位まで書きます。 font-size: 20;は無効なので、その宣言が無視されます。同じ波括弧の中の正しいcolorやfont-weightまで無効になるわけではありません。

pxとremの違い

初心者が目にしやすい単位はpxとremです。

pxは文字サイズを直接指定し、remはページ全体の基準サイズに合わせて変わります。

たとえば、ページ全体の基準となるhtml要素の文字サイズが16pxなら、1.25remは20px相当です。ただし、html要素の設定が変われば、同じ1.25remでも計算結果は変わります。

font-sizeで使える値と、相対単位の考え方は、MDNのfont-sizeプロパティで確認できます。

font-weightで文字の太さを変える

font-weightは、文字の太さ（ウェイト）を指定するプロパティです。キーワードと数値のどちらでも書けます。次の2つのCSS例は同じ意味で、normal-textクラスを通常の太さ、bold-textクラスを太字にします。

.normal-text {
  font-weight: normal;
}

.bold-text {
  font-weight: bold;
}

.normal-text {
  font-weight: 400;
}

.bold-text {
  font-weight: 700;
}

normalは400、boldは700に対応します。 初心者は「通常は400、強く見せる箇所は700」と覚えると、キーワードと数値を読み替えやすくなります。

フォントによる太さの違い

指定した太さがフォントに用意されていない場合、ブラウザーは利用できる太さから決められた規則で代わりを選びます。単純に数値が最も近い太さを選ぶ仕組みではありません。たとえば400と700だけを利用できるフォントなら、500の指定は400、600の指定は700で表示されます。

フォントによっては複数の指定が同じ太さで表示されます。一方、太さを連続的に変えられる「可変フォント」では細かな差が出ることもあります。利用可能な値と代替表示の考え方は、MDNのfont-weightプロパティで確認できます。

color・font-size・font-weightを組み合わせる

3つのプロパティは、一つのセレクターへまとめて指定できます。練習例では、HTMLの段落にleadというclass名を付け、CSSの.leadで選びます。classは要素に名前を付けるためのHTML属性です。

HTMLのclass="lead"とCSSの.leadは、名前を一致させます。 HTML側のclass名には.を書かず、CSS側のクラスセレクターにだけ.を付けます。classセレクターとの対応を詳しく復習したい方は、要素・class・idセレクターの違いを確認してください。

一度に3つ変えると、どの指定がどの変化を生んだか分かりにくい場合があります。次の練習では、3つをまとめた完成コードから始めます。表示を確認した後、一度に一つの値だけを変えると、どの指定が見た目に影響したのかを切り分けられます。

練習用ファイルを作って表示を確かめる

パソコンのテキストエディターとブラウザーで試せる例です。手元の練習用ファイルを使うので、Webサイトを公開する準備は必要ありません。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>文字スタイルの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="lead">CSSで文字の見た目を整えます。</p>
</body>
</html>

.lead {
  color: #536048;
  font-size: 20px;
  font-weight: 700;
}

CSSで文字が変わらないときの確認順

CSSが反映されないときは、複数箇所を同時に直さず、一項目ずつ確かめます。3つとも変わらない場合は、次の1から確認してください。文字色は変わるのに大きさだけ変わらない場合は2、太さだけが想定と違う場合は2とフォントによる太さの違いを優先します。

1. 適用先：HTMLのclass="lead"とCSSの.leadが一致しているか
2. 宣言（CSSの1行）：font-sizeなどのつづり、コロン、値、単位、セミコロン、波括弧が正しいか
3. 読み込み：編集したCSSファイルを保存し、そのファイルをHTMLが読み込んでいるか。練習では、同じフォルダーにあるstyle.cssとhref="style.css"の名前をそろえる
4. 競合（ほかのCSSとの重なり）：より優先される別のCSSが、同じプロパティを指定していないか

「適用先→宣言→読み込み→競合」の順に一つずつ確認すると、原因を切り分けやすくなります。 たとえば、文字色だけ変わり、サイズと太さが変わらないなら、セレクターとCSSファイルは読み込まれている可能性が高いため、font-sizeとfont-weightの宣言を中心に見直せます。

同じ要素へ同じプロパティが複数書かれていると、より優先度の高いCSSが適用されます。優先度が同じ場合は、あとに書かれたCSSが適用されます。この優先順位を判断する仕組みに「カスケード」や「詳細度」があります。詳しい仕組みはMDNのCSSの詳細度で確認できます。初心者の段階では、まず同じプロパティを別の場所で指定していないかを探してください。

一箇所直すたびに保存・再読み込みし、練習例の濃い緑・20px・太字になったかを確かめます。意図した表示になれば切り分け完了です。原因を探す途中で変えた値は、完成コードの値へ戻しておきましょう。

よくある質問

colorとbackground-colorの違いは何ですか？

colorは文字などの前景色、background-colorは要素の背景色を変えます。文字を濃い緑、背景を薄い色にする場合は、同じセレクター内へ両方を書けます。

.note {
  color: #536048;
  background-color: #F5F6F2;
}

font-sizeに単位を書かないとどうなりますか？

font-size: 20;のような非ゼロの数値は、有効な長さとして解釈されません。20pxや1.25remのように単位を付けてください。指定が無効な場合、その宣言は適用されず、ほかのCSSや親要素から受け継いだ指定などによる大きさで表示されます。

font-weightはboldと700のどちらを使えばよいですか？

どちらも太字を表し、boldは700に対応します。通常と太字を分かりやすく書くならnormalとbold、デザインシステムで数値をそろえるなら400と700のように、同じプロジェクト内で読みやすい表記へ統一してください。

500や600を指定しても太さが変わらないのはなぜですか？

使用中のフォントに指定した太さが用意されていない可能性があります。その場合、ブラウザーは規則に従って利用できる太さへ置き換えて表示します。CSSのつづりを確認したうえで、読み込んでいるフォントと利用可能なウェイトを確認してください。

3つのプロパティを同じセレクターへ書いてもよいですか？

はい。color・font-size・font-weightを同じ波括弧の中へ1行ずつ書けます。各宣言の末尾へセミコロンを付け、値を変えたら表示を確認してください。

まとめ

CSSで文字の見た目を整える基本は、color・font-size・font-weightです。

• colorは文字色を変え、背景色はbackground-colorで指定する
• font-sizeは文字サイズを変え、非ゼロの長さにはpxやremなどの単位を付ける
• font-weightは文字の太さを変え、normalは400、boldは700に対応する
• 3つは同じセレクターへまとめて書ける
• 反映されないときは、適用先→宣言→読み込み→競合の順に確認する

まずは練習用のindex.htmlとstyle.cssを保存し、段落の文字色・大きさ・太さを確認してください。完成コードが表示できたら、font-sizeの20pxだけを24pxへ変え、保存・再読み込みで結果を確かめましょう。最後に20pxへ戻すまで試すと、一項目だけを変える手順を身に付けられます。

目的別に次の記事を選ぶ

文字の指定を試せたら、次に調整したい見た目に合わせて学べます。

文字サイズをサイト全体の基準に合わせたい方は、px・em・remなどの基準と使い分けを確認しましょう。

あわせて読みたい

CSSの単位とは？px・%・em・remの違いと使い分けを初心者向けに解説 CSSのpx・%・em・remを初心者向けに比較。基準の違い、文字・幅・余白・枠線での使い分け、emの入れ子、反映されないときの確認順まで解説します。

文字のまわりも整えたい方は、背景色・枠線・角丸の指定へ進むと、文章のまとまりを見分けやすくできます。

あわせて読みたい

CSSで背景色・枠線・角丸を設定する方法｜background-color・border・border-radiusを初心者向けに解説 CSSのbackground-color・border・border-radiusを使い、背景色・枠線・角丸を設定する方法を初心者向けに解説。カードと正円の実例、表示されないときの確認順まで紹介します。