CSSで文字の色を変えるcolorプロパティの使い方
こんにちは！ライターのナナミです。
WEBサイトを作っていて、文字の色を変えたいなー、なんて思う時ありますよね。
でも色の変え方がわからない…
どんな指定ができるのかわからない…
どんな指定ができるのかわからない…
そんな方必見、今回は文字の色を指定するcolorについて解説していきます。この記事は下記の流れで進めていきますね。
- 【基礎】文字の色を変更するcolorとは？
- 【基礎】colorの使い方
- 【応用】指定できる色の種類
- 【応用】文章の一部だけ色を変える
- 【応用】色選びに困った時のお役立ち情報
文字色の調整は読みやすさ、雰囲気作りに大きく影響してきます。文字色マスターになって、素敵なサイトを作れるようになっちゃいましょう！
文字色を変えるcolorプロパティとは？
文字の色を変更する、となると「font color」とかで指定するのかな？と思っている方もいるのではないでしょうか。
ところが、文字の色を指定するプロパティはcolorです。割とシンプルですね。
デフォルトは真っ黒な文字が表示されますが、colorで色を指定すると、何でも好きな色に変更できます。ちなみに文字の色だけでなく、borderの線の色も変わります。豆知識として覚えておいてください。
colorプロパティの使い方
colorの使い方は簡単。文字の色を指定したい要素に、下記のように指定をするだけです。
CSS
セレクタ{
color:色の指定;
}
色の指定の部分には、カラーネームやカラーコードなどが入ります。
試しに、文章を青い文字にしてみましょう。
HTML
<div class="font_test">
こんにちは。<br>
私の名前はナナミです。<br>
音楽を聴くのが好きです。<br>
特に邦ロックが大好きです。
</div>
CSS
.font_test {
font-size: 20px; /* 文字サイズ指定 */
color: #2196F3; /* 文字色指定 */
}
今回はカラーコードで指定してみました。
colorプロパティで指定できる色
colorに限らず、WEBで色を指定するときに使える記述はいくつか種類があります。よく使う4種類を、さくっと紹介していきますね。
| 種類 | 説明 | 記述例 | 見栄え |
|---|---|---|---|
| カラーネーム | 色の名前を明示的に記述し、指定します。 | color: blue; |  |
| カラーコード | 「#数字」という形式で各色に与えられたコードで指定します。 | color: #2196F3; |  |
| RGB | 赤、緑、青の色の混ざり具合で指定します。 | color: rgb(76, 175, 80); |  |
| RGBA | 赤、緑、青に加え、透明度の指定をすることができます。 | color: rgba(156, 39, 176, 0.3); |  |
色については、下記の記事でもう少し細かく解説しています。よかったら併せて読んでみてくださいね。
CSSで背景色指定！ background-colorの使い方
更新日 : 2019年7月30日
文章の一部だけ色を変える
この記事のように、文章の一部だけ文字の色を変えたい…という時って結構ありますよね。こうやって強調したい時とか！
残念ながら、その一部だけをCSSで判定して色を変えたりすることはできません。こういう時は、<span>タグと併用していきましょう。<span>タグはインライン要素という要素の種類のHTMLタグです。
インライン要素って何だっけ…
という方は、こちらの記事で解説をしているのでぜひご覧ください。
CSSのdisplayプロパティとは？使い方や特徴を解説
更新日 : 2018年11月26日
インライン要素であれば、文章中に入っていても…
このように、改行そのままに色付けをすることができます。
一部だけ色付けしたい時は、<span>タグにclassをつけて、そのclassに色をつけるように指定してあげましょう。
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の使い方
更新日 : 2019年7月30日
まとめ
いかがでしたか？
文字の色をちょっと変えてあげるだけで、文章の読みやすさがグッと上がりますね。基礎的なCSSですので、しっかり覚えて活用しちゃってください！
