Webデザインを始めると、まず覚えたいのがCSS 文字色の指定方法です。文字色を変えるだけでページ全体の印象が変わり、デザイン性や可読性が大きく向上します。この記事では、CSS 文字色の基本から、color プロパティの使い方、rgbやカラーコードを使った実践例まで、初心者にもわかりやすく解説します。
CSSで文字色を変更する基本を理解しよう
CSSで文字の色を変えるcolorプロパティの使い方を理解することで、文字の印象を自由にデザインできるようになります。
colorプロパティの役割とは
color プロパティは、CSSで文字の色を指定するための基本的なプロパティです。HTMLのテキスト要素に適用して、自由に色を設定できます。
p {
color: red;
}
この例では、段落・<p>・内の文字が赤色で表示されます。
文字色変更がデザインや可読性に与える効果
文字色は単なる装飾ではなく、情報の強調・視認性の確保・感情表現などにも関係します。たとえば、警告文を赤、成功メッセージを緑にすることで、直感的に情報を伝えられます。
HTMLとCSSの関係・インライン指定と外部CSSの違い
文字色の変更は、HTMLに直接書くインラインCSSでも可能ですが、保守性や再利用性の面から、外部CSSでの指定がおすすめです。
<p style="color: blue;">このテキストは青色です。</p>
/* 外部CSS */
.text-blue {
color: blue;
}
colorプロパティの基本構文と使い方
基本構文
selector {
color: 値;
}
文字全体を特定の色に変更する例
body {
color: #333333;
}
ページ全体の文字を落ち着いたグレーに設定する例です。このように、CSS 文字色をページ全体で統一すると読みやすくなります。
HTMLタグと組み合わせたサンプルコード
<h1>見出しの文字色を設定</h1>
<p>段落の文字色を指定</p>
h1 {
color: #2196F3; /* ブルー */
}
p {
color: #555555; /* グレー */
}
CSSで指定できる文字色の種類
CSSでは、色の指定方法にいくつかの形式があります。代表的なものはCSS colorプロパティの使い方｜テキスト文字色を変更する方法で紹介されています。
カラーネーム・red, blue, greenなど
もっとも簡単な方法がカラーネームです。
p {
color: red;
}
ただし、指定できる名前の種類は限られています。
カラーコード・16進数指定
より自由に色を設定したい場合は、カラーコードを使いましょう。
h2 {
color: #2196F3; /* 明るい青 */
}
6桁の16進数・#RRGGBBで、R（赤）・G（緑）・B（青）の値を組み合わせて色を表現します。
rgb() と rgba() の使い分け
rgb()関数を使えば、数値で色を細かく指定できます。
p {
color: rgb(255, 0, 0); /* 赤 */
}
また、透明度を追加したい場合はrgba()を使います。
p {
color: rgba(0, 0, 255, 0.6); /* 60%の透過ブルー */
}
CSS 文字色に透明度を持たせることで、背景とのバランスを柔軟に調整できます。
HSL・HSLAなどの他の指定方法
p {
color: hsl(120, 100%, 50%); /* 鮮やかな緑 */
}
HSL（色相・彩度・明度）を使うと、デザイン全体のトーンを統一しやすくなります。
文章の一部だけ色を変える方法
<span>タグを使って部分的に色を指定
<p>この<span style="color: red;">部分だけ</span>赤く表示します。</p>
クラスを定義して複数箇所で再利用
.highlight {
color: #FF5722;
}
<p>この<span class="highlight">単語</span>を強調表示します。</p>
インライン・その場で直接指定する方法は簡単ですが、再利用には不向きです。クラス指定なら、スタイルをまとめて管理でき複数箇所に適用可能です。
読みやすく見やすい文字色の選び方
CSSの文字色選びでは、背景色とのコントラストを意識することが重要です。CSSの文字色と背景色をやさしく解説でも詳しく紹介されています。
背景色とのコントラストを意識
背景と文字の明度差が小さいと読みにくくなるため、白背景には黒や濃いグレー、暗い背景には白文字を使うのが基本です。
Webアクセシビリティ・AA・AAA基準
WCAG（Web Content Accessibility Guidelines）では、文字と背景のコントラスト比を4.5:1以上（AA基準）に保つことが推奨されています。
色見本・カラーパレットツールの活用
配色に迷ったときは、以下のようなツールを活用しましょう。
- Adobe Color
- Coolors
これらのツールを使えば、統一感のある配色を簡単に作れます。
実践例・colorプロパティを使ったデザインサンプル
見出しやリンクカラーを変更する例
h1 {
color: #009688;
}
a {
color: #FF9800;
text-decoration: none;
}
a:hover {
color: #E65100;
}
ページテーマカラーに合わせた文字色設定
企業サイトやブログのテーマカラーを意識してCSS 文字色を設定すると、統一感が出ます。
まとめ｜colorプロパティを使って文字を自由にデザインしよう
CSS 文字色は、Webデザインの最も基本的なスタイル指定です。
color プロパティで文字の色を変更可能。
rgbやカラーコードを使えば自由な配色が可能。
背景とのコントラストを意識して可読性を高めましょう。
文字色を自在に操れば、デザインの印象を劇的に変えることができます。今日からあなたも、CSS 文字色を使いこなして見やすく美しいWebページを作りましょう。
