記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

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

「文字色の変更方法」「指定できる色の値」「リンクの文字色の変更方法」の3点を中心に初心者のかた向けに解説。 基礎知識・使用方法をサンプルコード付きで詳しく解説しているため、初心者の方にも分かりやすい内容になっています。

カテゴリ: HTML/CSS

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

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

colorとは

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

colorプロパティ↓

デフォルトの文字色

colorで変えた文字色red

colorの使い方

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

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

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

HTMLサンプルコード

CSSサンプルコード

※解説
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サンプルコード

CSSサンプルコード

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

リンクの文字色を変える

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

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

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

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

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

HTMLサンプルコード

CSSサンプルコード

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

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

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

サンプルコード表示動画

HTMLサンプルコード

CSSサンプルコード

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

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

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

サンプルコード表示動画

HTMLサンプルコード

CSSサンプルコード

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

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

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

サンプルコード表示動画

HTMLサンプルコード

CSSサンプルコード

※解説
「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制作の参考にして頂いたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleアナリティクス使い倒し活用術  <AKAHON>

ダウンロード資料画像

「毎日、数値をみているけどどこをどうやって改善すれば良いのかわからない」

「Google analyticsを導入して、自社サイトのパフォーマンスを上げて欲しいといわれたけど、何をどうすればいいのかわからない」

「Web以外にも担当を兼任していて、アクセス解析に多くの時間をついやすことができない」

上記のような思いをお持ちのWeb担当者の方にはお役に立てる一冊です。

Googleアナリティクス初心者の方でも使いこなせるように、導入方法や用語、やっておきたい初期設定から具体的な活用方法まで丁寧に解説します。