プログラミング独学応援 第12回「CSS 色を変えるプロパティー紹介」

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」は、背景色を変える時に使うよ。

色の指定方法についても紹介しました。

3通りの方法を紹介してけど、
基本的には「#〇〇〇〇〇〇」の書き方が一般的に使われているので
この方法に慣れておくといいと思います。

それでは、今回はこれでおしまいです。
ありがとうございました!


本格的に学びたい人へ

もっと本格的に学んでみたいという方は、
スクール等の活用もおすすめです。

独学よりも、身につく速度が速く、本職のプログラマーの方から
教えてもらえるのは、魅力的です。

基礎を独学で6割ぐらい学んでからの方が
効率的に学べるのでおすすめですが、

無料説明会や無料体験を行っているところも多いので
興味のある方は、参加してみるのもありだと思います。

© 2021 ーれおの部屋ー