CSSで文字、リンクの色を変える方法（初心者向け）

こんにちは！
最近、WEB制作をはじめたけど「CSSで文字の色を変えてみたい・・！」「指定できる色の種類は・・？」「リンクの文字色って変えれるの・・？」
文字の色を変更をしてみたいと考えている、初心者WEB製作者の方も多いのではないでしょうか？

今回は、初心者の方向けに「文字色の変更方法」「指定できる色の値」「リンクの文字色の変更方法」を中心に解説していきます。

colorとは

「color」とは色を変えることのできるCSSプロパティであり、文字色も「color」プロパティで変更する事ができます。
文字色に何も指定しなければデフォルトの黒色の文字色が表示されます。

colorプロパティ↓

デフォルトの文字色

colorで変えた文字色red

colorの使い方

colorプロパティは、セレクタ{color: 色の値;}で使用する事ができます。

サンプルコード表示結果↓

文字の色をcolorプロパティーで変更します。

HTMLサンプルコード

<p>文字の色をcolorプロパティーで変更します。</p>

1	<p>文字の色をcolorプロパティーで変更します。</p>

CSSサンプルコード

p {
   color: red;
}

p {

color: red;

}

※解説
pにcolor:redを指定し、文字色の変更ができています、簡単にできますね。
下記より指定できる値について解説していきます。

colorで指定できる色

WEBで色を指定するときに使える記述、主な4種類を解説していきます。

1.カラーネーム
最初から決められている色の名前で、red,blueなど一般的に誰でも連想できる色名です。

red blue orange

2.カラーコード
カラーコードは16進数で色を表し、「00,33,66,99,CC,FF」のみを使って色を指定します。カラーネームよりも細かく種類多く色を指定できます。

#FF0000 #0000FF #FF6600

カラーコードは覚える必要はありません、下記を参考にコピペしてみて下さい。
http://www.netyasun.com/home/color.html

3.RGBカラーモデル
RGBとは、「R：Red=赤」「G：Green=緑」「B：Blue=青」の3原色を混ぜて作られ様々な色を表現。
rag（）の（）内に3色の混ぜる色の割合を記入。

rgb(243, 16, 16); rgb(69, 124, 255); rgb(221, 88, 11);

RGBカラーモデルは覚える必要はありません、下記を参考にコピペしてみて下さい。
https://note.cman.jp/color/base_color.cgi

4.RGBAカラーモデル
RGBAとは「R：Red=赤」「G：Green=緑」「B：Blue=青」に加えて透明度を指定しします。

rgba(241, 7, 7, 0.59) rgba(30, 122, 255, 0.67) rgba(199, 102, 37, 0.67)

RGBAカラーモデルも覚える必要はありません、下記を参考にコピペしてみて下さい。
https://note.cman.jp/color/base_color.cgi

文章の一部だけ色を変更

文章の一部だけ色を変更する事ができます。
＜span＞タグを使用します。

サンプルコード表示結果↓

文字の色をcolorプロパティーで変更します。文字の一部の色を変更します。 spanタグを使います

HTMLサンプルコード

<p>文字の色をcolorプロパティーで変更します。<br>
   <span class="example">文字の一部の色を変更します。</span><br>
   spanタグを使います
</p>

文字の色をcolorプロパティーで変更します。

文字の一部の色を変更します。

spanタグを使います

CSSサンプルコード

.example {
   color: red;
}

.example {

color: red;

}

※解説
＜sapn＞タグにclassを付与し、色を指定する事で部分部分の色を変更する事ができます。
今回の例では＜span＞タグに exampleという名前のクラスを付与し、color:redを指定し「文字の一部の色を変更します。」を赤色に変更しています。

リンクの文字色を変える

aタグのリンクの色を変える

aタグはデフォルトでは、文字色が青紫色になっています。
このデフォルトの文字色を変更するにはaタグに直接「color」を指定する事で変更する事ができます。サンプルコードで解説します。
今回はデフォルトの青紫色のリンクを緑色に変えます。

デフォルトでのaタグでのリンク↓

リンク

上記がデフォルトでのリンクです、下記が緑色に変更したリンクです。

デサンプルコード表示結果↓

リンク

HTMLサンプルコード

<a href="#">リンク</a>

1	<a href="#">リンク</a>

CSSサンプルコード

a{
 color: green;
 }

color: green;

}

※解説
aタグに直接colorを指定する事で文字色を変更する事ができます。

クリック後のリンクを変える

クリック後のリンク色を変える事ができます。
色を変えることで、すでにクリック（訪問）したリンクなのか、まだクリック（訪問）していないリンクなのかを、閲覧者にとって、わかりやすくする事ができます。
方法は「:visited擬似クラス」を使用します。
今回の例ではクリック前（訪問前）はデフォルトの青紫色、クリック後（訪問後）は、黄色に変更します。
サンプルコードで解説していきます。

サンプルコード表示動画

HTMLサンプルコード

<a href="#">リンク</a>

1	<a href="#">リンク</a>

CSSサンプルコード

a:visited {
 color: yellow;
}

a:visited {

color: yellow;

}

※解説
aタグに「:visited擬似クラス」を指定する事で、一度でもクリック（訪問）したらリンクの文字色を黄色に変更する事ができます。

マウスが乗った時のリンクの色を変える

マウスがリンクに乗った（マウスオーバー）した時の、色を変更することができます。変更する事で、つい押してしまいたいリンクを作成する事ができます。
方法は「a:hover擬似クラス」を使用します。
マウスがリンクに乗ったら緑色に変更します。
サンプルコードで解説していきます。

サンプルコード表示動画

HTMLサンプルコード

<a href="#">リンク</a>

1	<a href="#">リンク</a>

CSSサンプルコード

a:hover {
 color: green;
 }

a:hover {

color: green;

}

※解説
aタグに「a:hover擬似クラス」を指定する事で、マウスがリンクに乗った（マウスオーバー）したらリンクの文字色を緑色に変更する事ができます。
マウスが乗っている時だけの変更になります。

リンククリック時の文字色を変える。

リンクをクリックした時の文字色を変更する事ができます。
変更する事で、「クリックされた！」と閲覧者にとってわかりやすくする事ができます。
方法は「a:active擬似クラス」を使用します。
今回の例では、クリックされたらピンクに変更します。
サンプルコードで解説していきます。

サンプルコード表示動画

HTMLサンプルコード

<a href="#">リンク</a>

1	<a href="#">リンク</a>

CSSサンプルコード

a:active { 
    color: pink;
 }

a:active {

color: pink;

}

※解説
「a:active擬似クラス」を指定する事でクリック時、文字色をpinkに変更する事ができています。

まとめ

今回は、初心者の方向けに「文字色の変更方法」「指定できる色の値」「リンクの文字色の変更方法」を中心に解説してきました。
最後にポイントをまとめます。

1.colorプロパティは
セレクタ{
color: 色の値;
}
で指定する。

2.WEBで色を指定するときに使える記述、4種類紹介
　①カラーネーム（色名で指定）
　②カラーコード（16進数で色を指定）
　③RGBカラーモデル（「RGB」の3原色を混ぜて指定）
　④RGBAカラーモデル（「RGB」の3原色に透明度をプラスして指定）

3.文章の一部を変更するには、＜span＞タグを使用し、クラスを指定する

4.リンクの文字色を変更するには、aタグに直接CSSで「color」を指定する。

5.クリック後のリンクを変えるには「:visited擬似クラス」を指定する

6.マウスが乗った時のリンクの色を変えるには「a:hover擬似クラス」
　を指定する

7.リンククリック時の文字色を変えるには「a:active擬似クラス」を指定する

いかがだったでしょうか？
今回の記事をWEB制作の参考にして頂いたら幸いです。