目次
- 【完全保存版】文字の色を変える方法｜HTML・CSSでの基本から応用まで初心者向けに解説
- HTMLだけで文字の色を変える方法（非推奨）
- なぜおすすめされないのか
- CSSで文字の色を変える基本方法
- カラー名を使った指定方法
- よく使われる色名の例
- 16進数（HEX）で文字の色を指定する方法
- 特徴
- よく使われる例
- RGBで文字の色を指定する方法
- RGBAで透明度も指定できる
- spanタグを使って一部の文字だけ色を変える
- spanを使うメリット
- リンク文字の色を変更する方法
- 状態別に色を変える
- 親要素から文字色をまとめて指定する
- 文字色を指定する際の注意点
- 読みにくい配色は避ける
- アドセンス審査を意識するポイント
- よくある質問
- 文字色はSEOに影響しますか
- インラインスタイルで指定しても問題ありませんか
- まとめ
【完全保存版】文字の色を変える方法｜HTML・CSSでの基本から応用まで初心者向けに解説
Webサイトやブログを作成するうえで、「文字の色」はデザインの印象や読みやすさを大きく左右する重要な要素です。
本記事では、HTMLとCSSを使って文字の色を変える方法を、基礎から実践的な応用までわかりやすく解説します。
初心者の方でも理解しやすいよう、具体例を交えながら丁寧に説明していきます。
HTMLだけで文字の色を変える方法（非推奨）
HTMLには、文字色を指定できるタグが存在します。
<font color="red">赤い文字</font>なぜおすすめされないのか
この方法はHTML4以前では使われていましたが、現在は非推奨です。理由は以下の通りです。
- デザインと構造が混在してしまう
- 保守性が低い
- HTML5では使用が推奨されていない
現在のWeb制作では、文字色はCSSで指定するのが基本です。
CSSで文字の色を変える基本方法
CSSでは color プロパティを使用して文字色を指定します。
<p class="text-red">赤い文字です</p>.text-red {
color: red;
}この方法が、最も基本的で正しい指定方法です。
カラー名を使った指定方法
CSSには、あらかじめ定義された色名があります。
p {
color: blue;
}よく使われる色名の例
- black
- white
- red
- blue
- green
- gray
ただし、使える色の種類が限られるため、細かいデザイン調整には不向きです。
16進数（HEX）で文字の色を指定する方法
Web制作で最もよく使われるのが、16進数カラーコードです。
p {
color: #333333;
}特徴
- デザイン通りの色を正確に指定できる
- PhotoshopやCanvaなどのデザインツールと連携しやすい
- SEOやアドセンスにも影響なし（可読性向上につながる）
よく使われる例
-
000000（黒）
-
ffffff（白）
-
333333（やや薄い黒）
-
666666（グレー）
RGBで文字の色を指定する方法
RGB形式では、赤・緑・青の数値で色を指定します。
p {
color: rgb(255, 0, 0);
}RGBAで透明度も指定できる
p {
color: rgba(0, 0, 0, 0.6);
}透明度を指定できるため、背景とのなじみを調整したい場合に便利です。
spanタグを使って一部の文字だけ色を変える
文章の一部だけ色を変えたい場合は、span タグを使用します。
<p>
この文章の<span class="highlight">ここだけ</span>色を変えます。
</p>.highlight {
color: #e60033;
}spanを使うメリット
- 文章構造を崩さずに装飾できる
- SEO的にも問題なし
- アクセント表現に最適
リンク文字の色を変更する方法
リンク（aタグ）は、通常とは異なる色が自動的に設定されます。
a {
color: #0066cc;
}状態別に色を変える
a:link {
color: #0066cc;
}
a:visited {
color: #663399;
}
a:hover {
color: #cc0000;
}
a:active {
color: #000000;
}ユーザー体験を向上させるためにも、ホバー時の色変更はおすすめです。
親要素から文字色をまとめて指定する
文字色は継承されるため、親要素に指定することも可能です。
.article {
color: #333333;
}<div class="article">
<p>この中の文字はすべて同じ色になります。</p>
</div>ページ全体の文字色を統一したい場合に便利です。
文字色を指定する際の注意点
読みにくい配色は避ける
- 背景色と文字色のコントラストが弱い
- 彩度が高すぎる色の多用
これらは、ユーザーの離脱やアクセシビリティ低下につながります。
アドセンス審査を意識するポイント
- 黒または濃いグレーの本文文字
- 白背景との十分なコントラスト
- 過度な装飾を避ける
読みやすい配色は、アドセンス審査においても重要な評価ポイントです。
よくある質問
文字色はSEOに影響しますか
直接的なSEO効果はありませんが、読みやすさの向上は滞在時間や離脱率に影響するため、間接的にSEO評価につながります。
インラインスタイルで指定しても問題ありませんか
<p style="color:red;">赤い文字</p>技術的には可能ですが、CSS管理の観点からおすすめされません。
まとめ
文字の色を変える方法は以下の通りです。
- CSSの
colorプロパティを使うのが基本 - HEXやRGB指定で柔軟なデザインが可能
- spanを使えば一部だけ色変更できる
- 読みやすさを最優先に考える
文字色の指定を正しく使いこなすことで、見やすく、信頼感のあるWebサイトを作ることができます。
ぜひ、ご自身のサイト制作に役立ててください。