CSS テキストスタイル

CSSテキストスタイル入門 - 色、配置、装飾など基本を徹底解説

Webページのテキストは、CSSを使って見やすく、デザイン性の高いものへと変身させることができます。この記事では、CSSのテキストスタイルの基本を、実例を交えながら分かりやすく解説します。

1. テキストの色 (Text Color)

テキストの色は、color プロパティを使って変更できます。

CSSでは、色を指定する方法として、主に以下の3つがあります。

  • 16進数表記: #ff0000 のように、シャープ記号の後に6桁の16進数で色を指定します。

  • RGB表記: rgb(255, 0, 0) のように、赤、緑、青の光の強さを0から255の数値で指定します。

  • 色名: red のように、定義済みの色名で指定します。

例:

body { color: #333; } /* 暗い灰色 */
h1 { color: #f00; } /* 赤 */
h2 { color: rgb(0, 128, 0); } /* 緑 */

注意: W3C標準では、color プロパティを指定する場合は、background-color プロパティも同時に指定することが推奨されています。

2. テキストの水平方向の配置 (Text Alignment)

テキストの水平方向の配置は、text-align プロパティを使って変更できます。

  • left: 左寄せ

  • right: 右寄せ

  • center: 中央揃え

  • justify: 両端揃え (ただし、最終行は左寄せ)

例:

h1 { text-align: center; } /* 中央揃え */
p.date { text-align: right; } /* 右寄せ */
p.main { text-align: justify; } /* 両端揃え */

justify を指定すると、ブラウザは単語間隔を調整して、両端揃えを実現します。雑誌や新聞の見出しなどでよく使われる表現です。

3. テキストの装飾 (Text Decoration)

テキストの装飾は、text-decoration プロパティを使って変更できます。

  • none: 装飾なし

  • underline: 下線

  • overline: 上線

  • line-through: 取り消し線

例:

a { text-decoration: none; } /* リンクのデフォルトの下線を削除 */
del { text-decoration: line-through; } /* 削除されたテキストに打ち消し線を追加 */

注意: リンク以外のテキストに下線を引くと、ユーザーがリンクと誤解する可能性があります。リンク以外のテキストに下線を引くのは避けましょう。

4. テキストの大文字と小文字 (Text Transform)

テキストの大文字と小文字は、text-transform プロパティを使って変更できます。

  • none: 変換なし

  • uppercase: すべて大文字

  • lowercase: すべて小文字

  • capitalize: 単語の最初の文字を大文字

例:

.uppercase { text-transform: uppercase; } /* すべて大文字 */
.lowercase { text-transform: lowercase; } /* すべて小文字 */
.capitalize { text-transform: capitalize; } /* 単語の最初の文字を大文字 */

5. テキストのインデント (Text Indent)

テキストのインデント (字下げ) は、text-indent プロパティを使って指定します。

例: 段落の最初の行に50pxのインデントを設定する

p { text-indent: 50px; }

6. テキストのレイアウト (Text Layout)

行間、文字間、単語間を調整することで、テキストレイアウトを見やすく、美しくすることができます。

例：

<!DOCTYPE html>
<html>
<head>
  <title>テキストレイアウトの例</title>
  <style>
    .normal-text {
      /* デフォルトスタイル */
    }

    .adjusted-text {
      line-height: 1.8;   /* 行間を調整 */
      letter-spacing: 1px; /* 文字間を調整 */
      word-spacing: 5px;   /* 単語間を調整 */
    }
  </style>
</head>
<body>

<h1>デフォルトのテキストレイアウト</h1>
<p class="normal-text">
  これは通常のテキストです。デフォルトでは、行間、文字間、単語間が少し狭く、読みにくく感じるかもしれません。
</p>

<h1>調整後のテキストレイアウト</h1>
<p class="adjusted-text">
  これは調整後のテキストです。行間、文字間、単語間を広げることで、より読みやすく、美しくなりました。
</p>

</body>
</html>

表示結果:

ブラウザでこのコードを開くと、2つのテキストの違いがわかります。

  • デフォルトのテキストレイアウト: 行間、文字間、単語間が少し狭いです。

  • 調整後のテキストレイアウト: 行間、文字間、単語間が広くなり、テキストが読みやすくなっただけでなく、見た目も美しくなりました。

解説:

  • line-height: 1.8; は、行高をフォントサイズの1.8倍に設定し、行間を広げています。

  • letter-spacing: 1px; は、文字間に1pxの間隔を追加しています。

  • word-spacing: 5px; は、単語間に5pxの間隔を追加しています。

これらの3つのプロパティの値を調整することで、テキストのレイアウトを柔軟に制御し、デザインのニーズや読み手の習慣に合わせた表示を実現できます。

7. 行高 (Line Height)

line-height プロパティは、行の高さを指定します。

  • 単位なしの数値で指定すると、フォントサイズに対する倍率として解釈されます。

  • 1.5 と指定すると、フォントサイズの1.5倍の行間になります。

例:

p { line-height: 1.5; }

行間を広めにとることで、テキストが読みやすくなります。 一般的に、1.5 から 2 程度の行間が適切とされています。

8. 文字間と単語間 (Letter and Word Spacing)

  • letter-spacing プロパティは、文字間隔を調整します。

  • word-spacing プロパティは、単語間隔を調整します。

例:

h1 { letter-spacing: 2px; } /* 文字間を2px広げる */
p { word-spacing: 10px; } /* 単語間を10px広げる */

9. CSSテキストプロパティ一覧

プロパティ 説明
color テキストの色を指定
direction テキストの方向を指定
letter-spacing 文字間隔を指定
line-height 行の高さを指定
text-align テキストの水平方向の配置を指定
text-decoration テキストの装飾を指定
text-indent インデント (字下げ) を指定
text-shadow テキストに影をつける
text-transform 大文字と小文字を変換
unicode-bidi 双方向テキストの表示方向を指定
vertical-align 垂直方向の配置を指定
white-space 空白文字の扱い方を指定
word-spacing 単語間隔を指定

CSS テキストに関するQ&A

Q1: 特定の単語だけ色を変えたい場合はどうすれば良いですか？

A1: <span> タグで特定の単語を囲み、span に対してスタイルを適用します。

Q2: 行の高さを調整しても、テキストが重なってしまいます。

A2: line-height の値が小さすぎる可能性があります。値を大きくするか、フォントサイズを小さくしてみてください。

Q3: 英語の文章で、単語の区切りを自動的に調整するにはどうすれば良いですか？

A3: word-break: break-all; を指定することで、単語の途中で改行させることができます。ただし、日本語の文章では不自然な改行になる可能性があるので注意が必要です。