color
テキストの色を指定するときに使います。
色を指定する方法は3種類あるよ。
- 色名を記入
- rgb（〇,〇,〇）
- #〇〇〇〇〇〇
基本的には「＃〇〇〇〇〇〇」と表記するのが一般的です。
色にごとに振り分けられた、番号みたいなイメージだよ。
WEB色見本でどの色に、どんな番号が付いているのか
調べながら作業すれば、覚える必要はないよ。
必要な時に調べてみよう。
colorの3種類の書き方 具体例
上記のサンプルは、↓↓↓のHTMLでできているよ。
<h1>れおの冒険</h1>
<p>昔々あるところにレオというライオンがいました。</p>
<P>れおのトレードマークは、赤いアロハシャツです</P>
<p>管理人さんは、レオが大好きでした。</p>
<a href="https://www.google.com/?hl=ja">Googleで調べる</a>h1に対して、3通りの書き方で
CSSを記入するとこんな感じになります。
全て表示結果は、同じになるよ。
色名を記入
h1 {color: blue;}
rgb(〇,〇,〇)
h1 {color: rgb(0, 0, 255);}
#〇〇〇〇〇〇
h1 {color: #0000ff;}
<p>なども同じように記入することで
文字の色を変えることができるよ。
background-color
テキストの背景色を変える時に使うよ。
色の指定方法は「color」と同じ3種類があるよ。
さっき説明していた「color」の部分を
「background-color」とすればOKだよ。
色名を記入
h1 {background-color: blue;}
rgb(〇,〇,〇)
h1 {background-color: rgb(0, 0, 255);}
#〇〇〇〇〇〇
h1 {background-color: #0000ff;}
まとめ
今回は、CSSでよく使う「色を変えるプロパティー」を紹介したよ。
「color」は、テキストの色を変える時に使用。
「background-color」は、背景色を変える時に使うよ。
色の指定方法についても紹介しました。
３通りの方法を紹介してけど、
基本的には「＃〇〇〇〇〇〇」の書き方が一般的に使われているので
この方法に慣れておくといいと思います。
それでは、今回はこれでおしまいです。
ありがとうございました！
本格的に学びたい人へ
もっと本格的に学んでみたいという方は、
スクール等の活用もおすすめです。
独学よりも、身につく速度が速く、本職のプログラマーの方から
教えてもらえるのは、魅力的です。
基礎を独学で6割ぐらい学んでからの方が
効率的に学べるのでおすすめですが、
無料説明会や無料体験を行っているところも多いので
興味のある方は、参加してみるのもありだと思います。