Webサイトを制作するにあたり、文字の色を変えたい、なんて思うときがあります。
- でも文字色の変え方がわからない...
- どんな方法で文字色を変更するのかわからない
- どんな指定方法があるのかわからない
そんな悩みを解決するために、今回は文字色を変更するcolorプロパティについて解説していきます。colorプロパティの基本的な知識をインプットした後は、具体例も合わせて解説していきます。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
CSSで文字色を変更するcolorプロパティ
CSSで文字色を変更する、文字を太くする、フォントサイズを変更する、などスタイルを変更する場合には、どのタグをどのように適用するかを指定してあげる必要があります。
例えば、HTMLに、以下のようなpタグがあるとします。
<p>文字色を赤くします！</p>こちらのpタグは、以下のようなスタイルで文字色を変更することができます。
p {
color: red;
}上記はpタグを赤くするスタイルを適用しています。適用後は以下の画像のように表示されます。
プロパティとは
CSSの基本書式は、
セレクタ｛
プロパティ名: 値;
｝となります。
先程のpタグにあてたCSSに基本書式を当てはめると、以下のようになります。
- セレクタ：pタグ
- プロパティ：color
- 値：red
つまり、プロパティとは「スタイルの種類」を指します。このプロパティには、color以外にも様々な種類が用意されています。
HTMLでも色の指定をできるが、推奨していない
基本的にスタイルを変更するのはCSSを用いますが、HTMLに直接記述して指定することもできます。HTMLにスタイルの変更を直接記述すると、以下のような記述になります。
<p style=”color:red;”>ここに文章が入ります。</p>ただし、こちらで指定するよりもCSSで指定するやり方が一般的です。こういった方法もある、ということだけ頭の隅に置いておきましょう。
HTMLに直書きで指定してしまうと、変更があった場合にその全てにスタイルの変更をしなければならないので手間がかかります。CSSであればその一か所を変更するだけで適用されるので、CSSでスタイルを当てていったほうが効率的です。
colorプロパティで指定する色
colorプロパティでの色の指定には、例であげたような、red, blue, white, black, greenなど特定の色を指定する方法（カラーネームでの指定）の他に、RGB値で文字色を変更する方法もあります。
RGB値(16進数)で色を変更する方法
RGB値とは、#FFFFFFのような16進数で色を表現する値のことです。16進数とは、0~9とA~Fの文字を組み合わせた数値表現です。
/* RGB値（16進数）で色を指定する方法 */
p {
color: #ffffff; /* white */
}
p {
color: #000000; /* black */
}#FFFFFFがwhite、#000000がblack、といった具合です。
カラーネームで指定するよりもRGB値のほうが指定できる色が多くなります。同じようなwhiteでも、#FFFFF1, #FFFFF9,というように、微妙に変化させた色を指定することができます。
RGBカラーモデルで色を変更する方法
さらに、Red, Green, Blueなど3色を混ぜて色を表現する方法もあります（RGBカラーモデル）。
こちらは、0~255でRed, Blue, Greenの割合を指定します。なお、このRGB値のRGBとは、Red, Green, Blueの頭文字を指しています。
RGBカラーモデルの基本書式は、
セレクタ {
color: rgb(Redの割合, Greenの割合, Blueの割合);
}となります。
具体的には、以下のように指定します。
<p>文字をカラーモデルで指定します！</p>/* RGB（カラーモデル）で指定する方法 */
p {
color: rgb(20, 100, 122);
}
RGBAカラーモデルで色を変更する方法
さらに、そこから発展してRGBAカラーモデルで色を指定することもできます。
RGBAカラーモデルとは、Red, Green, Blueに、Alpha（アルファ）の値を加えたものです。
Alphaは、色の透明度を指す値で、0〜1の範囲で値を指定します。0が完全に透明で、数字が大きくなるにつれて不透明度が上がっていき、1で完全に不透明となります。
RGBカラーモデルは、(255, 255, 255)のようにカンマ区切り（,）で指定しました。RGBAカラーモデルでは、これにAlphaを加えて記述します。
<p>文字をRGBAカラーモデルで指定します！</p>p {
color: rgba(0, 0, 255, 0.5);
}
なおRGBA値は0~1で指定するため、RGB値（16進数）の#FFFFFFのような表記を使用することができません。
ここまで文字色を指定する方法まとめ
１：カラーネームでの指定
color: white; color: blue; など
特定の色しか指定できませんが、カラーコードを指定しなくても直感的に使える方法です。
２：RGB値の16進数での指定
color: #ffffff; color: #fff000; color: #000000; など
カラーネームでの指定よりも多くの色を、細かく指定することができます。
3：RGB値のカラーモデルでの指定（0,0,0）～（255,255,255）
color: rgb(0, 0, 0); color: rgb(14, 25, 198); など
4：RGBA値での指定（RGBにalpha（透明度）を加えたもの）
color: rgba(0, 0, 0, 0.5); color: rgba(0, 251, 222, 0.8); など
rgbを使う方法では、16進数での指定はできません。
文章の一部だけ色を変更する方法
今まで紹介した例では、文章全体の色を変更する方法でしたが、文字の一部分だけ色を変更したい場合もあると思います。
その場合は、pタグの中にspanタグを使って、そのspanタグに対してcolorプロパティを当てることで色を変更することができます。
例えば、HTMLに以下のような記述があるとします。
<p>仮の文章です。<span>ここ</span>だけ文章の色を変えたいです。</p>このspanタグに囲われた「ここ」だけ色を変更するには、CSSで以下のように記述します。
/* 一部だけ色を変えます */
span {
color: red;
}
pタグはブロック要素で、spanタグはインライン要素であるため、ブロック要素の中でインライン要素を使用することができます。
ブロック要素とインライン要素については、以下の記事を確認してみてください。
ホバーした時に色を変える方法
Webサイト制作でよく使われる手法として、マウスで特定の要素（例：文章、ボタンなど）に重ねると色が変わる、といったやり方があります。例えば、以下の動画のような状態です。
こちらのやり方は、:hoverという疑似要素を使用して実現することができます。以下に例を示します。
<p>ホバーで色を変えます。</p>このHTMLに、CSSで疑似要素:hoverを用いて、このように記述します。
p {
color: red;
}
/*擬似要素hoverを使う*/
p:hover {
color: rgba(20, 100, 120, 0.5);
}これで、マウスをpタグに重ねると色が切り替るようになります。
ちなみに、ここにtransitionというプロパティをあてると、ふわっと色を変化させることができます。
transitionプロパティとは
遷移の意味。2つの状態を変化させることができます。
このtransitionプロパティを、さきほどのpタグに適用させます。
p {
color: red;
transition: all 0.4s linear; /* transition プロパティ追記 */
}
p:hover {
color: rgba(20, 100, 120, 0.5);
}上記transitionでは、
- all : 変化を適用できるプロパティ全て
- 0.4s : 1sが1秒を指す。0.4sは0.4秒
- linear : 変化の方法
を指しています。
これでマウスを重ねると下の動画のように、ふわっと切り替えることができるようになります。
一口にcolorプロパティで文字色を変更するといっても、様々な方法があります。その他のプロパティと組み合わせて学習していきましょう！
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
