CSSで文字の色を変えるcolorプロパティの使い方

こんにちは!ライターのナナミです。

WEBサイトを作っていて、文字の色を変えたいなー、なんて思う時ありますよね。

でも色の変え方がわからない…
どんな指定ができるのかわからない…

そんな方必見、今回は文字の色を指定するcolorについて解説していきます。この記事は下記の流れで進めていきますね。

  • 【基礎】文字の色を変更するcolorとは?
  • 【基礎】colorの使い方
  • 【応用】指定できる色の種類
  • 【応用】文章の一部だけ色を変える
  • 【応用】色選びに困った時のお役立ち情報

文字色の調整は読みやすさ、雰囲気作りに大きく影響してきます。文字色マスターになって、素敵なサイトを作れるようになっちゃいましょう!

文字色を変えるcolorプロパティとは?

文字の色を変更する、となると「font color」とかで指定するのかな?と思っている方もいるのではないでしょうか。

ところが、文字の色を指定するプロパティはcolorです。割とシンプルですね。

font_color1

デフォルトは真っ黒な文字が表示されますが、colorで色を指定すると、何でも好きな色に変更できます。ちなみに文字の色だけでなく、borderの線の色も変わります。豆知識として覚えておいてください。


【なかなかエラーが解決できない…そんな悩みを解決します!】

登録無料で始められるプログラミングスクール「侍テラコヤ」

・回答率100%のQ&A掲示板でエラーを解決!
現役エンジニアとのオンライン相談で悩みを解決!
・50種類以上の教材で複数言語を習得!

侍テラコヤについて詳しく見る

colorプロパティの使い方

colorの使い方は簡単。文字の色を指定したい要素に、下記のように指定をするだけです。

CSS

セレクタ{
    color:色の指定;
}

色の指定の部分には、カラーネームやカラーコードなどが入ります。

試しに、文章を青い文字にしてみましょう。

font_color2

HTML

<div class="font_test">
    こんにちは。<br>
    私の名前はナナミです。<br>
    音楽を聴くのが好きです。<br>
    特に邦ロックが大好きです。
</div>

CSS

.font_test {
    font-size: 20px;    /* 文字サイズ指定 */
    color: #2196F3;     /* 文字色指定 */
}

今回はカラーコードで指定してみました。

colorプロパティで指定できる色

colorに限らず、WEBで色を指定するときに使える記述はいくつか種類があります。よく使う4種類を、さくっと紹介していきますね。

種類説明記述例見栄え
カラーネーム色の名前を明示的に記述し、指定します。color: blue;font_color3
カラーコード「#数字」という形式で各色に与えられたコードで指定します。color: #2196F3;font_color4
RGB赤、緑、青の色の混ざり具合で指定します。color: rgb(76, 175, 80);font_color5
RGBA赤、緑、青に加え、透明度の指定をすることができます。color: rgba(156, 39, 176, 0.3);font_color6

色については、下記の記事でもう少し細かく解説しています。よかったら併せて読んでみてくださいね。

CSSで背景色指定! background-colorの使い方
更新日:2023年3月21日

【何から学べばいいかわからない…そんな悩みを解決します!】

完全無料ですぐわかる「プログラミング学習プラン診断」

・適性にあわせて学習プランを診断
・完全無料で気軽に診断できる
・学習の悩みもまるっと解決

さっそく診断してみる

文章の一部だけ色を変える

この記事のように、文章の一部だけ文字の色を変えたい…という時って結構ありますよね。こうやって強調したい時とか!

残念ながら、その一部だけをCSSで判定して色を変えたりすることはできません。こういう時は、<span>タグと併用していきましょう。<span>タグはインライン要素という要素の種類のHTMLタグです。

インライン要素って何だっけ…

という方は、こちらの記事で解説をしているのでぜひご覧ください。

CSSのdisplayプロパティとは?使い方や特徴を解説
更新日:2023年3月21日

インライン要素であれば、文章中に入っていても…

font_color7

このように、改行そのままに色付けをすることができます。

一部だけ色付けしたい時は、<span>タグにclassをつけて、そのclassに色をつけるように指定してあげましょう。

font_color8

HTML

こんにちは。<br>
私の名前はナナミです。<br>
<span class="font_test">音楽</span>を聴くのが好きです。<br>
特に<span class="font_test">邦ロック</span>が大好きです。

CSS

.font_test {
    font-size: 20px;    /* 文字サイズ指定 */
    color: #F44336;     /* 文字色指定 */
}

文字色選びに困ったら

色付けの方法はわかったけど何色がいいのか悩む…
カラーコードが知りたい…

そんな方は、色見本のサイトなどを参照してみましょう。

単純に色を紹介しているだけでなく、イメージカラーなどでまとめているサイトなどもあります。ぜひお気に入りのサイトを見つけて、活用しちゃってください。ちなみに下記の記事で色見本サイトを紹介しています。よかったら併せて読んでみてください。

CSSで背景色指定! background-colorの使い方
更新日:2023年3月21日

まとめ

いかがでしたか?

文字の色をちょっと変えてあげるだけで、文章の読みやすさがグッと上がりますね。基礎的なCSSですので、しっかり覚えて活用しちゃってください!

プログラミング学習中、
誰かへ相談したいことはありませんか?

SAMURAI TERAKOYA

プログラミングはエラーの連続。作業を進めるなかで誰かに教えてほしい場面は多いですよね。

そんな悩みを解決できるのが、侍テラコヤです。登録無料で始められて、現役エンジニアとオンラインで相談できるほか、回答率100%のQA掲示版でプログラミングに関する悩みを解決します!

気になる方はぜひ詳細をご覧ください。

→侍テラコヤの詳細をみる

Writer

侍エンジニア編集部

株式会社SAMURAI

侍エンジニアは「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI TERAKOYA

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
Close