ブログをリニューアル予定。過去記事は削除するかもです。

【CSSで文字色を指定する方法】colorプロパティの使い方を解説(初心者向け)

【CSSで文字色を指定する方法】colorプロパティの使い方を解説(初心者向け)

CSSで文字色を変えるにはどうしたらいいの?

初心者の僕にもわかるように、初歩的なところから教えて欲しい。

 

こんな疑問にお答えします。

CSSで文字色を指定するにはcolorというCSSのプロパティを使用します。

本記事では、colorプロパティの使い方を初心者向けに解説します。

 

スポンサードサーチ

CSSで文字色を指定する方法【colorプロパティ】

CSSで文字色を指定する方法【colorプロパティ】

colorプロパティの使い方は驚くほど簡単です。

CSSの基礎スキルなので、この機会にぜひマスターしましょう。

色の指定方法は大きく分けて3つありますが、これらをすべて解説しますね。

 

colorプロパティの使い方

まずは、colorプロパティの基本的な使い方を覚えましょう。

 

colorプロパティの使い方
.p {
 color: #000000;
}

 

上記の通り、color:のあとに色情報を記載するだけでOKです。

 

colorプロパティで色を指定する方法3つ

colorプロパティで色を指定する方法は主に3つです。

 

  1. カラーネーム
  2. 16進数(カラーコード)
  3. 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になります。

 

RGBを使う
.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プロパティで文字色を反映させましょう。

 

文章の一部分だけ文字色を変更する方法

HTML
<p>これだけは伝えたい。いちごは甘いほうがいい!どんな時もこれだけは不変の事実です。</p>

 

このようなHTMLで書かれた文章があった場合、CSSのセレクタを.pとしてcolor: red;にしてしまうと、<p>で囲まれた全ての部分が赤色になってしまいます。

こんなときに便利なのが<span>でして、必要な部分だけを<span>で囲みつつ、class名を決めてあげれば、その部分だけ自由に文字色を変えることができるようになります。

 

HTMLでspanタグを使う
<p>これだけは伝えたい。<span class="aka">いちごは甘いほうがいい!</span>どんな時もこれだけは不変の事実です。</p>
CSSでakaを指定する
.aka {
 color: red; /*#FF0000、または、rgb(255, 00, 00)でもOK*/
}

 

下記記事にてより詳しいやり方を解説しているので、合わせてご覧いただければ幸いです。

»【spanタグとは】意味と使い方をHTML初心者向けに解説

 

スポンサードサーチ

まとめ:colorプロパティで文字色を変えよう

まとめ

本記事は以上です。colorプロパティの使い方は驚くほど簡単です。

文字色を自由に調整できるようになると、WEBデザインの幅も広がるので、この機会に覚えておきましょう。

おわり。