CSS テキスト

CSSには、テキストの書式を設定するためのプロパティが多数用意されています。

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

color プロパティは、テキストの色を設定するために使用されます。色は以下の形式で指定できます。

• カラー名（例: red）
• HEX値（例: #ff0000）
• RGB値（例: rgb(255, 0, 0)）

ページ全体のデフォルトのテキスト色は body セレクタで定義されます。

body {
  color: blue;
}

h1 {
  color: green;
}

       注意: 視覚障害を持つ人々にとって、テキスト色と背景色のコントラスト比が十分であることを常に確認してください（アクセシビリティへの配慮）。

2. テキストのアライメント (Text Alignment)

text-align プロパティは、テキストの水平方向の配置を設定します。

2.1 水平方向の配置

テキストは左揃え、右揃え、中央揃え、または両端揃えに設定できます。

h1 {
  text-align: center; /* 中央揃え */
}

h2 {
  text-align: left; /* 左揃え */
}

h3 {
  text-align: right; /* 右揃え */
}

text-align: justify; を指定すると、各行が同じ幅になり、左右の余白が整えられます（新聞や雑誌のようなレイアウト）。

2.2 テキストの方向 (Text Direction)

direction と unicode-bidi プロパティを使用すると、要素のテキストの方向を変更できます。

p {
  direction: rtl; /* 右から左へ (Right-to-Left) */
  unicode-bidi: bidi-override;
}

2.3 垂直方向の配置

vertical-align プロパティは、要素の垂直方向の配置を設定します。主に画像などのインライン要素に使用されます。

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

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

text-decoration プロパティは、テキストに装飾線を追加または削除するために使用されます。

3.1 装飾線の種類

text-decoration-line を使用して、以下の装飾を追加できます。

h1 {
  text-decoration-line: overline; /* 上線 */
}

h2 {
  text-decoration-line: line-through; /* 取消線 */
}

h3 {
  text-decoration-line: underline; /* 下線 */
}

p {
  text-decoration-line: overline underline; /* 上線と下線の両方 */
}

       注意: リンク（<a>タグ）以外に下線を引くと、ユーザーがリンクと勘違いする可能性があるため、注意が必要です。

3.2 装飾のカスタマイズ

色、スタイル、太さを個別に指定することも可能です。

p {
  text-decoration-line: underline;
  text-decoration-color: red; /* 線の色 */
  text-decoration-style: wavy; /* 波線などのスタイル */
  text-decoration-thickness: 5px; /* 線の太さ */
}

3.3 ショートハンド

text-decoration プロパティで一括指定が可能です。

p {
  text-decoration: underline red wavy 5px;
}

4. テキストの変換 (Text Transformation)

text-transform プロパティは、テキストの大文字・小文字を制御します。

p.uppercase {
  text-transform: uppercase; /* すべて大文字 */
}

p.lowercase {
  text-transform: lowercase; /* すべて小文字 */
}

p.capitalize {
  text-transform: capitalize; /* 各単語の先頭を大文字 */
}

5. テキストの間隔 (Text Spacing)

読みやすさを向上させるために、文字や行の間隔を調整します。

5.1 インデント (Text Indentation)

text-indent プロパティは、テキストの最初の行のインデント（字下げ）を指定します。

p {
  text-indent: 50px;
}

5.2 文字間隔 (Letter Spacing)

letter-spacing プロパティは、文字と文字の間の間隔を指定します。

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px; /* 負の値で間隔を詰める */
}

5.3 行の高さ (Line Height)

line-height プロパティは、行と行の間のスペースを指定します。

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

5.4 単語間隔 (Word Spacing)

word-spacing プロパティは、単語と単語の間の間隔を指定します。

p {
  word-spacing: 10px;
}

5.5 改行の制御 (White Space)

white-space プロパティは、要素内のホワイトスペース（空白や改行）の扱いを指定します。nowrap を使用すると、自動改行を無効化できます。

p {
  white-space: nowrap;
}

6. テキストシャドウ (Text Shadow)

text-shadow プロパティは、テキストに影を追加します。

6.1 基本的なシャドウ

水平方向の影、垂直方向の影、および色を指定します。

h1 {
  text-shadow: 2px 2px #ff0000;
}

6.2 ぼかし効果の追加

3つ目の値としてぼかし（blur）の距離を追加できます。

h1 {
  text-shadow: 2px 2px 5px red;
}

7. テキストプロパティ一覧