CSS テキスト属性

CSSのテキスト属性は、文字の色、整列方法、装飾効果、そして大文字・小文字のフォーマットを決定します。

これらの属性を適切に活用することで、開発者はウェブページの可読性と視覚的な階層構造（ビジュアルヒエラルキー）を大幅に向上させることが可能です。本章では、最も頻繁に使用される4つのテキスト属性、color、text-align、text-decoration、そして text-transform について詳しく解説します。

1. カラー属性：color

color プロパティは、HTML要素のテキストコンテンツの色を設定するために使用されます。これは最も直感的な視覚属性であり、ページのブランディングや可読性に直接影響を与えます。

構文： キーワード（例：red）、16進数（例：#ff0000）、RGB/RGBA（例：rgb(255, 0, 0)）、または HSL/HSLA を使用できます。

ベストプラクティス： アクセシビリティ（Accessibility）を確保するために、文字色と背景色の間に十分なコントラスト比があることを確認してください。

/* 16進数を使用 */
p { color: #333333; }

/* RGBAを使用して透明度付きの色を設定 */
h1 { color: rgba(0, 0, 0, 0.8); }

2. 配置属性：text-align

text-align プロパティは、ブロックレベル要素内部のインラインコンテンツ（テキスト、画像など）の水平方向の整列方法を決定します。

• left：左揃え（デフォルト値）。
• right：右揃え。
• center：中央揃え。
• justify：両端揃え。単語間のスペースを調整して、各行の長さを一定にします。

.container {
    text-align: center; /* 段落内のテキストを中央揃えにする */
}

3. 装飾属性：text-decoration

text-decoration は、テキストに装飾線を設定するためのショートハンドプロパティです。主にリンクの下線を制御したり、テキストの状態（削除済みなど）を示すために使用されます。

属性値：

• none：装飾を削除。
• underline：下線を追加。
• overline：上線を追加。
• line-through：打ち消し線を追加。

ショートハンド形式： 色、スタイル、太さを同時に定義できます（例：text-decoration: underline red wavy;）。

a {
    text-decoration: none; /* デフォルトの下線を削除 */
}

.price-old {
    text-decoration: line-through; /* 割引前の価格に打ち消し線を表示 */
}

4. テキスト変換：text-transform

text-transform プロパティは、要素内のアルファベットの大文字・小文字を制御します。HTMLのソースコードを変更することなく、表示効果のみを変えることができます。

• uppercase：すべての文字を大文字に変換。
• lowercase：すべての文字を小文字に変換。
• capitalize：各単語の先頭文字を大文字に変換。
• none：変換を行わない。

.title-upper {
    text-transform: uppercase; /* タイトルをすべて大文字にする */
}

5. 核心的なポイントのまとめと比較

5.1 よくある質問と注意点

Q: text-align はインライン要素にしか効きませんか？
いいえ、これはブロックレベル要素に対して指定するプロパティです。その内部にあるインラインコンテンツ（テキストなど）に影響を与えることで整列を実現します。ブロックレベル要素自体を中央に配置する場合は、text-align ではなく margin: 0 auto; を使用します。

Q: リンクの下線が text-decoration: none でも消えないのはなぜですか？
もし下線が消えない場合は、border-bottom プロパティで下線をシミュレートしていないか、あるいは他の場所で text-decoration-line が上書きされていないか確認してください。

Q: text-transform は SEO に影響しますか？
影響しません。検索エンジンは元のHTMLコンテンツをクロールします。text-transform はあくまで視覚的なプレゼンテーションを変更するものであり、ドキュメントの意味自体は変更しません。

Q: 長い段落を両端揃えにするには？text-align: justify; を使用します。ただし、短い行で単語間のスペースが広がりすぎることがあるため、hyphens プロパティと併用してタイポグラフィを最適化することをお勧めします。