CSSで文字装飾をマスター｜font・color・text系プロパティ解説

Webデザインで「文字の見た目」を整えることは、読みやすさや印象を左右する非常に重要なポイントです。
この記事では、CSSで文字装飾を行うための基本プロパティ — font・color・text系プロパティ — を丁寧に解説します。

CSS初心者の方でも、この記事を読めば文字装飾を自在に操るスキルが身につきます。

1. 文字装飾の基本構造を理解しよう

CSSで文字を装飾する場合は、HTMLのテキスト要素（例：<p>、<h1>、<span>など）に対してスタイルを指定します。

HTML

<p class="text">こんにちは、世界！</p>

CSS

.text {
  color: #333;
  font-size: 18px;
  font-weight: bold;
}

このように、文字の色・大きさ・太さなどを指定していくことで、見た目を自由にコントロールできます。

👉 関連記事：

• HTMLの基本構文まとめ
• CSSの基本プロパティ解説

2. colorプロパティで文字色を指定

最も基本的な文字装飾が「文字色」です。
colorプロパティを使うことで、文字の色を指定できます。

p {
  color: red;
}

🔹 よく使う指定方法

👉 関連記事：

• CSSの基本プロパティ解説

3. font系プロパティで文字のスタイルを整える

文字の種類・大きさ・太さ・スタイルをまとめて管理できるのがfont系プロパティです。

3-1. font-family（フォントの種類）

p {
  font-family: "游ゴシック", "Yu Gothic", sans-serif;
}

フォント名を複数指定しておくことで、環境に応じて自動で代替されます。

👉 関連記事：

• HTMLで日本語フォントを指定する方法

3-2. font-size（文字サイズ）

p {
  font-size: 16px;
}

単位はpx以外にも、em・rem・%などがあります。

👉 関連記事：

• CSSでサイズ指定を理解する｜px・em・remの違い

3-3. font-weight（太さ）

p {
  font-weight: bold;
}

数値で指定も可能です。
例：font-weight: 700;（boldと同等）

3-4. font-style（斜体）

p {
  font-style: italic;
}

3-5. fontプロパティの一括指定

複数のfont系プロパティをまとめて指定できます。

p {
  font: italic bold 16px/1.5 "Yu Gothic", sans-serif;
}

👉 関連記事：

• CSSボックスモデルを完璧に理解

4. text系プロパティで文字の見た目をさらに調整

4-1. text-align（文字の配置）

p {
  text-align: center;
}

4-2. text-decoration（下線や取り消し線）

a {
  text-decoration: underline;
}

4-3. text-transform（大文字・小文字変換）

p {
  text-transform: uppercase;
}

4-4. letter-spacing / word-spacing（文字間隔・単語間隔）

p {
  letter-spacing: 0.1em;
  word-spacing: 0.3em;
}

4-5. line-height（行間）

p {
  line-height: 1.6;
}

単位なしで指定すると「文字サイズ × 数値分の高さ」になります。

5. 実践：文字装飾を組み合わせてみよう

HTML

<p class="catch">
  デザインは、文字から変わる。
</p>

CSS

.catch {
  color: #2c3e50;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

このようにfont系・text系プロパティを組み合わせることで、
「シンプルだけど印象的」なテキストデザインを作ることができます。

6. まとめ

これらを覚えれば、Webサイトの印象を大きく左右する「文字装飾」の基本は完璧です。

👉 関連記事で学びを深めよう

• HTMLのspanタグの使い方｜部分的に文字を装飾する方法
• CSSレイアウトの基本｜Flexboxを完全マスター
• フォーム要素の正しい使い方｜input・label編

7. まとめコード

.text-style {
  color: #333;
  font-family: "Yu Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-transform: capitalize;
}

このコードをベースに調整すれば、どんなWebサイトでもバランスの良い文字装飾が可能です。

💡ワンポイント

文字装飾は「やりすぎない」のがコツ。
色・大きさ・太さ・間隔を整えるだけで、シンプルでも印象的なデザインが完成します。