初心者の僕にもわかるように、初歩的なところから教えて欲しい。
こんな疑問にお答えします。
CSSで文字色を指定するにはcolorというCSSのプロパティを使用します。
本記事では、colorプロパティの使い方を初心者向けに解説します。
スポンサードサーチ
本記事のもくじ
CSSで文字色を指定する方法【colorプロパティ】
colorプロパティの使い方は驚くほど簡単です。
CSSの基礎スキルなので、この機会にぜひマスターしましょう。
色の指定方法は大きく分けて3つありますが、これらをすべて解説しますね。
colorプロパティの使い方
まずは、colorプロパティの基本的な使い方を覚えましょう。
.p {
color: #000000;
}
上記の通り、color:のあとに色情報を記載するだけでOKです。
colorプロパティで色を指定する方法3つ
colorプロパティで色を指定する方法は主に3つです。
- カラーネーム
- 16進数（カラーコード）
- RGB・RGBA
1. カラーネームで文字色を指定する
カラーネームとは、赤なら「Red」、青なら「Blue」といった具合に、初期値で付けられている色の名前です。
colorで文字色を指定するには、このカラーネームを使うことができます。
.p {color: red;} /*文字を赤に*/
.p {color: blue;} /*文字を青に*/
.p {color: yellow;} /*文字を黄色に*/
こんな感じで、カラーネームをそのまま書くだけです。
ちなみに、HTML5＆CSS3でカラーネームが付けられた色は147つでして、この中の色であれば、この指定方法が適用可能です。
» 参考記事：【Webセーフカラーとは】使い方の解説と216色のカラーコード見本
2. 16進数（カラーコード）で文字色を指定する
たぶん、もっとも一般的な方法なんじゃないかと思われるのが、この16進数によるカラーコードによる指定です。
僕も9割9分の確率で、このカラーコードによる指定方法を採用しています。
.p {color: #FFFFFF;} /*文字を白に*/
.p {color: #F000000;} /*文字を黒に*/
.p {color: #FF0000;} /*文字を赤に*/
上記の通り、16進数で作られた6桁のカラーコードで文字色を指定します。
16進数による色指定についての解説は長くなるので省略しますが、気になる人はググれば情報が出てくるのでご参照ください。
3. RGB・RGBAで文字色を指定する
RGBとは、Red、Green、Blueの3つの色要素の濃さを指定することで、特定の色を再現する方法です。
Alpha（アルファ）を加えると、透明度まで指定できるRGBAになります。
.p {color: rgb(255, 165, 00);} /*文字をオレンジに*/
.p {color: rgb(255, 00, 00);} /*文字を赤に*/
.p {color: rgba(00, 00, 00, 0.5);} /*文字を黒で、半透明に*/
文章の一部だけ文字色を変えたい
以上が、colorプロパティを使用して、CSSで文字色を指定する方法です。
ですが、場合によっては文章の一部だけ、文字色を変えたいという場合もあると思います。
文章の一部だけ文字色を変える
これだけは伝えたい。いちごは甘いほうがいい！どんな時もこれだけは不変の事実です。
こんな感じで、文章の一部だけ文字色を変えたい場合には、HTMLの<span>を使いつつ、colorプロパティで文字色を反映させましょう。
文章の一部分だけ文字色を変更する方法
<p>これだけは伝えたい。いちごは甘いほうがいい！どんな時もこれだけは不変の事実です。</p>
このようなHTMLで書かれた文章があった場合、CSSのセレクタを.pとしてcolor: red;にしてしまうと、<p>で囲まれた全ての部分が赤色になってしまいます。
こんなときに便利なのが<span>でして、必要な部分だけを<span>で囲みつつ、class名を決めてあげれば、その部分だけ自由に文字色を変えることができるようになります。
<p>これだけは伝えたい。<span class="aka">いちごは甘いほうがいい！</span>どんな時もこれだけは不変の事実です。</p>.aka {
color: red; /*#FF0000、または、rgb(255, 00, 00)でもOK*/
}
下記記事にてより詳しいやり方を解説しているので、合わせてご覧いただければ幸いです。
»【spanタグとは】意味と使い方をHTML初心者向けに解説
スポンサードサーチ
まとめ：colorプロパティで文字色を変えよう
本記事は以上です。colorプロパティの使い方は驚くほど簡単です。
文字色を自由に調整できるようになると、WEBデザインの幅も広がるので、この機会に覚えておきましょう。
おわり。
