/*サーチコンソール*/ /*google adcense*/

文字・背景の色を変える方法【CSS】

2020年1月22日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

今回はCSSを使って文字・背景の色を変更する方法について解説していきます。

この記事は初心者向けに説明していますが、CSSの基本的な書式について知らない方にはよくわからない言葉がでてくることがあります。もしCSSの基本的な書式についてよく知らないという方は「CSSの基本書式【初心者向け】」の記事を先に読むと、この記事をより理解できます。

CSSで文字・背景の色を変える方法
この記事の要点まとめ
文字色の変更
文字色を変更するには「color」プロパティを使用。
color使用例
CodePenで使用例を紹介。
色の指定方法
16進数、RGB、色名指定のいずれかで指定。
背景色の変更
背景色を変更するには「background-color」を使用。
background-color使用例
CodePenで使用例を紹介。
色の指定方法
色の指定方法はcolorと同じ。
カラーコードの指定はGoogleで!
カラーコードは覚えようとせず、Googelで検索する。

文字色の変更

まずは文字色を変更する方法から見ていくよ!

ヒナ
ヒナ

文字色を変更するには「color」プロパティを使用します。適応させたいカラーコードを値に指定することができます。

フォントの太さを指定する場合はfont-weight、フォントのサイズを指定する場合にはfont-sizeを指定します。これらのように「font-color」と指定しないように注意しましょう。ちなみに僕はたまに間違えます。笑

color使用例

※CodePenの使い方がわからない方はこちら

See the Pen color by Kosei@SplaTech (@pompom_stk) on CodePen.

色の指定方法

値に使うカラーコードの指定は、3種類あります。1つめは16進数を使う指定方法です。16進数とは1〜9までの数字とa〜fまでのアルファベットを使い数値を表現する方法です。2つ目はRGBという指定方法で、RGBとはそれぞれR=赤(red)G=緑(green)B=青(blue)を指します。それぞれ0〜255までの数値で指定し、どの色をどれだけ混ぜるかで色を指定します。「全て0なら黒」、「全て255なら白」、「Rが255で他が0なら赤」などです。

最後に上のCodePenで指定した「red」のような色名指定する方法です。red以外にも、blueやgreenなど色名指定できるものは複数ありますが、全て説明していくとものすごい量になってしまうので割愛します。

ハリボー
ハリボー

16進数?RGB?色名指定?、、は?

どれも難しく感じるかもしれませんが、これについては深く考える必要も覚える必要もありません。おすすめの方法は、Googleを使用することです。Googleで「16進数 色」と検索すると、色を指定するパレットのようなものが表示されます。その中から好きな色を見つけ、16進数かRGBをコピーしてコード内に貼り付けましょう。

また、「#1a1a1a」ってどんな色?と思うことがあれば、その色をGoogleで貼り付けるだけで調べることができます。とても簡単です。

カラーコードの指定方法
クリックで拡大

背景色の変更

次は背景色の変え方について見ていくよ。

ヒナ
ヒナ

背景色を変更するには「background-color」プロパティを使用します。color同様、値に適応させたいカラーコードを指定します。

background-color使用例

See the Pen background-color by Kosei@SplaTech (@pompom_stk) on CodePen.

色の指定方法

background-colorプロパティも、colorと同じように値に色を指定する必要があります。指定方法はcolorで説明したものと全く同じです。

もし親子で別の色を指定した場合は、子要素の色が優先されます。下の例では全体(親要素:dvi)に赤色が指定されていますが、2つめのp要素(子要素:p)には青色が指定されています。そのため、1つめの背景色が指定されていないp要素は赤色の背景が適応され、2つめの背景色が指定されたp要素は青色の背景が適応されます。

See the Pen background-color2 by Kosei@SplaTech (@pompom_stk) on CodePen.

カラーコードはGoogleで!

今回はcolorとbackground-colorについて解説していきました。値にカラーコードを指定すればいいだけなので、とても簡単です。間違えてもカラーコードを暗記しようという考えはもたないようにしてください。カラーコードはいろいろなサイトで詳しく紹介してありますが、使いやすく検索もできるという点からGoogleを使用することをおすすめします。

今回紹介したcolorとbackground-colorはとてもよく使います。どちらも簡単なので、自分で実際にコードを書いてみて確実にマスターしてください。