（最終更新日：2023年6月）
✔この記事は以下のような疑問を持つ方々に向けて作成されています
「HTMLで文字色をどう変更すればいいのか？」
「HTMLの文字色の変更方法を具体的に知りたい」
「HTMLで文字色を変更する具体的な例を見てみたい」
✔この記事で解説する主要なポイント
- HTMLで文字色を変更する基本的な方法
- 文字色の変更法の詳細とその応用
- 実際のHTMLで文字色を変更する例
この記事を通じて、HTMLで文字色を変更する基本的な手法から、色々なオプションを駆使して応用する方法まで、具体的な例を交えて深く探求していきます。
最後までお付き合いいただければ幸いです。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
HTMLを使った色彩表現
ここでは、「HTMLを使った色彩表現」について詳しく説明します。
以下のような内容を紹介します。
- fontcolorの活用
- カラー指定のテクニック
- 色コード参照サイトの利用
- fontタグによる色変更
- 字色変更の留意点
font colorの活用
HTMLの色指定には、さまざまな方法がありますが、最も基本的なものは、fontcolor属性を利用する方法です。
これは、文字の色を指定するための属性で、HTMLタグ内に記述します。
例えば、赤色の文字を表示したい場合、「テキスト」のように書くことができます。
<p><font color="red">赤色のテキスト</font></p>色指定の基礎
色の指定には名前や16進数コード、RGB値などが使えます。
例えば以下はどれも青色です。
<!--fontタグ -->
<p><font color="blue">テキスト</font></p>
<p><font color="#0000FF">テキスト</font></p>
<p><font color="rgb(0, 0, 255)">テキスト</font></p>
<!--styleを使う -->
<p style="color: blue;">テキスト</p>
<p style="color: #0000FF;">テキスト</p>
<p style="color: rgb(0, 0, 255);">テキスト</p>カラー指定のテクニック
カラー指定のテクニックには、色の名前で指定する方法とRGBで色を決められます。
それぞれの方法は、必要に応じて使い分けましょう。
| 色の名前 | RGB値 | 16進数コード |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| green | rgb(0, 128, 0) | #008000 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |
| pink | rgb(255, 192, 203) | #FFC0CB |
名前で色を指定する
色の名前で指定する方法は、直感的でわかりやすい方法です。
以下は文字色で黄色にする例。
<!-- 色の名前で指定する方法 (fontタグ) -->
<font color="yellow">テキスト</font>
<!-- 色の名前で指定する方法 (pタグ) -->
<p style="color: yellow;">テキスト</p>RGBで色を決める
RGB値で色を指定する方法は、色の微調整が可能であり、自由度が高いです。
以下は文字色が赤色の例。
<!-- fontタグでRGB値を使用して赤色文字色を指定 -->
<font color="rgb(255, 0, 0)">テキスト</font>
<!-- pタグでRGB値を使用して赤色文字色を指定 -->
<p style="color: rgb(255, 0, 0);">テキスト</p>色コード参照サイトの利用
色指定の際には、色コード参照サイトを利用することをおすすめします。
これらのサイトでは、色の一覧が表示され、それぞれの色のコードを確認可能です。
| サイト名 | URL | 説明 |
|---|---|---|
| Color Hunt | https://colorhunt.co/ | カラーパレットのデザインを探索し、カラーコードを取得できるサイト。 |
| Adobe Color | https://color.adobe.com/ | パーソナルカラーパレットを作成し、カラースキームの調整やカラーコードの取得ができるサイト。 |
| Coolors | https://coolors.co/ | カラーパレットの生成や調整、ランダムなカラーコンビネーションの作成ができるサイト。 |
これを利用すれば、理想の色を見つけやすくなるでしょう。
fontタグによる色変更
HTMLでは、fontタグを利用して文字色を変更することができます。
この方法は、HTMLの初期バージョンから存在しており、使い方がわかりやすいです。
基本ルール
fontタグの基本ルールは簡単です。
開始タグと終了タグの間にテキストを挿入し、開始タグ内にcolor属性で色を指定します。
<font color="green">テキスト</font>実例コード
ここでは、fontタグを使った具体的なコードを示します。
<!-- 色の名前で指定（赤色） -->
<font color="red">テキスト</font>
<!-- RGB値で指定（青色） -->
<font color="rgb(0, 0, 255)">テキスト</font>
<!-- 16進数コードで指定（緑色） -->
<font color="#00FF00">テキスト</font>
<!-- 色の名前で指定（黄色） -->
<font color="yellow">テキスト</font>
<!-- RGB値で指定（紫色） -->
<font color="rgb(128, 0, 128)">テキスト</font>index.htmlの例
以下に、fontタグを使って文字色を変更するHTMLのコード例を示します。
<html>
<body>
<font color="purple">このテキストは紫色になります。</font>
</body>
</html>字色変更の留意点
文字色を変更する際には、背景色とのバランスや視認性を考慮することが重要です。
明るすぎる色や暗すぎる色は視認性を損なう可能性があるからです。
気を付ける組み合わせの例はこちら。
| 背景色 | 文字色 |
|---|---|
| #FFFFFF (白) | #333333 (濃いグレー) |
| #F1F1F1 (明るいグレー) | #000000 (黒) |
| #FFC107 (アンバー) | #333333 (濃いグレー) |
| #007BFF (ロイヤルブルー) | #FFFFFF (白) |
| #40E0D0 (ターコイズ) | #333333 (濃いグレー) |
| #EDEDED (明るいグレー) | #666666 (グレー) |
| #FF4500 (オレンジレッド) | #FFFFFF (白) |
| #8A2BE2 (ブルーバイオレット) | #FFFFFF (白) |
| #FFFF00 (黄色) | #333333 (濃いグレー) |
| #008000 (緑) | #FFFFFF (白) |
文字色は適度な明度・彩度を保ちましょう。
CSSによる文字色制御
次に、「CSSによる文字色制御」について詳しく見ていきましょう。
以下のトピックをカバーします。
- colorプロパティの探求
- CSSプロパティを用いた文字色調整
- 全文書の文字色調整
colorプロパティの探求
CSSでは、文字色を制御するためのプロパティとして「color」があります。
このプロパティは、指定したHTML要素の文字色を変更します。
例えば、h1要素全ての文字色を青色にしたい場合はこちら。
h1 {color: blue;}CSSプロパティを用いた文字色調整
CSSを利用した文字色の調整は、HTML内で直接色を指定するよりも柔軟性と効率性があります。
HTMLの構造と見た目を分離することで、コードの再利用性と保守性を高められるからです。
CSS例
.text-blue {
color: blue;
}
.text-red {
color: red;
}HTML例
<h2 class="text-blue">見出し</h2>
<p class="text-red">テキスト</p>必要な手順
文字色を調整するには、まずCSSファイルを作成し、そのファイルでcolorプロパティを設定します。
次に、そのCSSファイルをHTMLファイルからリンクすることで、HTML要素のスタイリングを行います。
HTMLファイルとCSSファイルは通常、別々に作成され、HTMLファイルからCSSファイルへのリンクは要素内に設定されます。
次章の実例で使うためのファイルツリーはこちら。
- project
- index.html
- styles.cssコード実例
次に、具体的なHTMLとCSSのコードを示します。
- index.html
- style.css
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> </head>
<body>
<h1>このテキストの色はCSSで設定されます。</h1>
</body>
</html>style.css
h1 {
color: red;
}全文書の文字色調整
全てのテキスト要素の色を一括で設定したい場合、CSSではbody要素に対してcolorプロパティを適用します。
これにより、HTML文書全体のデフォルトの文字色を設定できます。
- index.html
- style.css
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>このテキストの色はCSSで設定されます。</p>
</body>
</html>style.css
body {
color: green;
}まとめ：適切な文字色指定
当記事では以下を解説しました。
- 文字色の変更法の基礎：fontタグとCSSのcolorプロパティを使用する
- 色の指定方法：名前で指定する方法とRGB値で指定する方法、16進数コードの3つがある
- 文字色の応用技術：CSSのクラスを活用して特定の要素にのみ文字色を適用する方法
当記事を通じて、HTMLで文字色を変更するための基本的な方法や応用技術をお伝えしてきました。
これらの知識を活用して、自分のウェブサイトやコンテンツに適切な文字色を設定しましょう。