ホームページの作り方を独学していて、HTMLの基本はわかってきた。ホームページの装飾はHTMLではなくてCSSを使うらしい。でもCSSのことを調べてもたくさんありすぎて、何からはじめたらいいんだろう？
独学でがんばっている初心者が最初にとまどうことは、CSSはいろいろなことができるせいで、情報が多くて、何から手を付けたらいいのかがわからなくなることです。
最初は、CSSで簡単にできることからはじめましょう。HTMLを書いていたときに考えたことは何ですか？文字の色って変えられないのかな？と考えませんでしたか？
今回は、初心者でも失敗しないCSSを使う文字の色の変え方についてわかりやすく解説します。
文字に色をつけるcolorプロパティ
CSSとは何なのか？セレクター、プロパティ、値とは？CSSの書き方の基本については、前回記事「はじめてのCSS：初心者が最初に覚えたい書き方の基本」で詳しく解説しました。基本に戻りたいときや、わからなくなってしまったときは、ぜひ読んでみてください。
HTMLだけでは装飾の機能がないので、文字の色を変えることができません。以前のHTMLには色のデザインに関する属性が存在していましたが、現在は非推奨のタグです。
CSSの「colorプロパティ」を使うことで、文字の色を変えることができます。上記のCSSは、「h1の部分、文字の色を、水色に変える」という意味があります。
文字の色をCSSで変える方法は3つあります。
- 色の名前で色を指定する
- カラーコードで色を指定する
- RGB値で色を指定する
ひとつずつゆっくり見ていきましょう。
文字の色を変える方法1：色の名前で色を指定する
色の名前で色を指定するとはどういうことでしょうか？たとえば赤なら「red」と決められた色の名前を半角英字で指定する方法です。
色の名前を覚えておくと便利に活用できることや、どんな色なのかがイメージしやすいというメリットがあります。
ただし指定できる色の数には限りがあり、細かい色の調整が難しいというデメリットもあります。
代表的な色の例を表にまとめてみました。
| 色（日本語） | 色の名前（CSSで使える英字の値） |
|---|---|
| 黒 | black |
| 白 | white |
| 灰色 | gray |
| 青 | blue |
| 緑 | green |
| 黄色 | yellow |
| 赤 | red |
文字の色を変える方法2：カラーコードで色を指定する
CSSで文字の色を指定する2つめの方法は、カラーコードと呼ばれる6桁の英数字で色を指定する方法です。
カラーコードとは、記号の「#」からはじまり、数字の「0～9」とアルファベットの「a～f」の16文字を使った16進数で表現するものです。
6桁のうち、左から2文字は赤（Red）、真ん中の2文字は緑（Green）、右から2文字は青（Blue）の色の度合いを表しています。「0」に近くなるほど色が暗くなり、「f」に近くなるほど色が明るくなる性質があります。
なので、最も暗い「黒」は「#000000」、最も明るい「白」は「#ffffff」になります。
「色の名前で色を指定する方法」でまとめた表の色は、カラーコードで指定すると下記のようになります。
| 色（日本語） | 色の名前（CSSで使える英字の値） | カラーコード（16進数） |
|---|---|---|
| 黒 | black | #000000 |
| 白 | white | #ffffff |
| 灰色 | gray | #808080 |
| 青 | blue | #0000ff |
| 緑 | green | #00ff00 |
| 黄色 | yellow | #ffff00 |
| 赤 | red | #ff0000 |
文字の色を変える方法3：RGB値で色を指定する
CSSで文字の色を指定する3つめの方法は、RGBの数値を組み合わせて色を指定する方法です。
RGBとは、赤（Red）、緑（Green）、青（Blue）の数値を組み合わせ、それぞれ最も暗い「0」から最も明るい「255」までの数字で表現します。
なので、最も暗い「黒」は「rgb(0,0,0)」、最も明るい「白」は「rgb(255,255,255)」になります。
「色の名前で色を指定する方法」でまとめた表の色は、RGB値で指定すると下記のようになります。
| 色（日本語） | 色の名前（CSSで使える英字の値） | RGB値 |
|---|---|---|
| 黒 | black | 0,0,0 |
| 白 | white | 255,255,255 |
| 灰色 | gray | 128,128,128 |
| 青 | blue | 0,0,255 |
| 緑 | green | 0,255,0 |
| 黄色 | yellow | 255,255,0 |
| 赤 | red | 255,0,0 |
また、RGB値で指定する方法では、透明度（Alpha値）も指定することができます。
透明度を指定する場合は「rgba（赤の数値, 緑の数値, 青の数値, 透明度）」という書き方になります。
透明度は「0～1」の間の数字で指定し、「0」は透明、「1」は不透明を意味します。
なので、「rgba(0,0,0,0.5)」は「黒の半透明」という指定をした意味になります。
CSSで文字の色を変える練習
では、外部CSSファイルを作ってHTMLファイルに読み込ませて適用する方法で、さきほど解説した文字の色を変える3つの方法を、実際に書いて練習してみましょう。
まず、HTMLを書きます。ファイルの保存はデスクトップにします。
HTML記述例
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSで文字の色を変える</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSSで色の名前で文字の色を指定して変える</h1>
<h2>カラーコードで文字の色を指定する</h2>
<p>RGB値で文字の色を変えてみる</p>
</body>
</html>
HTMLを書いただけの状態だと、ブラウザでは下の画像のように表示されます。CSSが適用されていないデフォルトの文字の色は黒です。
CSSを別のファイルで書きます。CSSのファイル名は「style.css」で、HTMLと同じデスクトップに保存してください
CSS記述例
/*h1の文字の色を色の名前で指定して青に変える*/
h1{
color: blue;
}
/*h2の文字の色をカラーコードで指定して赤に変える*/
h2{
color: #ff0000;
}
/*pの文字の色をRGB値で指定して黒の半透明に変える*/
p{
color: rgba(0,0,0,0.5);
}
では、CSS適用後のHTMLファイルをブラウザで開いてみましょう。
この画像のように、h1に記載した文章の文字の色が元の色の黒から青に、h2に記載した文字の色が元の色の黒から赤に、pに記載した文字の色が元の黒からグレーっぽい色（黒の半透明を指定しました）に変えることができたら大成功です！
色の選び方で困ったときはどうする？
CSSで文字の色を変えられることはもう覚えたけれど、どんな色にしようか悩む、カラーコードやRGB値がわからない！と悩んだときはどうしたらいいでしょうか？
googleで「カラーピッカー」や「カラーコード」を検索してみましょう。使いたい色を見つけることができるはずです。
色見本のサイトで有名なサイトを参考にするのもおすすめです。
まとめ
今回は、初心者でも失敗しないようにゆっくりと、CSSを使って文字の色を変える3つの方法について解説しました。
実際にやってみると、頭で考えていたときよりも簡単に感じるかもしれません。その調子です！独学でもHTMLやCSSに慣れてきている証拠です。
CSSで文字の色を指定するときに使うカラーコードやRGB値は、いろいろな数値を入れて練習してみてください。WEBではたくさんの色を表現できることが実感できると思います。
自分のホームページを自分の好きな色でデザインできたら楽しいですよね。これから少しずつCSSを覚えて、かっこいいデザインのホームページをつくりましょう！
