背景色の変更【background-color】：CSS入門
CSS入門（4）
背景色を変更したいときは、CSSの「background-color」を使います。
背景の色を変更すると、ずいぶんと印象も違ってきますから、ジャンジャンバリバリ変えて行きましょう。
「あなたの色に染められたいの・・・なんつて」ってことで、お話は、次の順番で進みます。
背景色を使ってみましょう
1：背景色について考えてみる
（01）
はじめに、前回の記事「CSSファイルの外部読み込み」で使った、次のコードを紐解（ひもと）いてみましょう。
body { background-color: #ffff00; }
これは、何をしていたのかと言うと、次のように言い換えることができます。
適用先 | <body>タグの |
|---|---|
何を？ | 背景色（background-color）を、 |
どうする？ | 黄色（#ffff00）にする。 |
（02）
ゆえに、ブラウザで表示すると、全体の背景が黄色になったわけです。
どうして「全体の背景」なのか分かるかしら？・・・そうです、<body>タグに適用しているからです。
よほど英語の苦手な人でなければ、「background-color」と聞けば、「あぁ、背景の色のことだね」と分かるでしょうから、これといって難しくないと思うのですが・・・・・・いかがなものでしょう？
（03）
ちょっと問題なのは、その後の「#ffff00」ではないかしら？
「#ffff00」が黄色だなんて言われても、何のことだか訳が分からない人もいらっしゃると思います。
そのようなわけで、この色の値についてお話していきたいと思います。
2：標準的な「色の値」の表記法
（04）
まず、「#」は単なる記号です。ここでは、「これから色情報を書きますよ」という開始の意味になります。その後の6つの英数字は、色情報を16進数で表しています。
2つずつ前から、光の三原色「R（Red）」、「G（Green）」、「B（Blue）」を表しています。
「R＝ff、G＝ff、B＝00のときは、黄色になりまっせ」と決まっているわけです。「誰が決めたのか？」って、それは、国会で決まった〜のだぁ。
いかがですか？得体の知れないものも、少し情報が加わると、何となくイメージしやすくなるのではないでしょうか。
（05）
ところで、16進数はご存知かしら？おそらく、ご存知ない人の方が多いかもしれませんね。
みなさんは、数字を数えるとき、いくつで桁を繰り上げていますか？・・・・・・「そりゃ、10でしょ」と思った方、正解です。これは、10進数と呼ばれています。
16進数は？・・・・・・そうです。16で桁を繰り上げます。「0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f」です。
いえいえ、興味のある人は別ですが、16進数を詳しく覚える必要はありません。イメージだけ、つかんでください。
（06）
次の画像は、GIMPという画像編集ソフトの色を設定する画面です。イメージしやすくなると思うので、眺めてみてください。
つまり、「光の三原色」のそれぞれの数値を上下させることで、色を設定しています。数値が高いほど、明るくなります。
何となく、「#ffff00」という値の表記法が、何を意味するものか分かったでしょうか？何となくで、OKなんだけれど・・・分かり難いですか？
それでは、絵の具を混ぜるときをイメージしてみてはいかがでしょうか。それぞれの色の分量を測って、混ぜ合わせるイメージです。
3：background-colorの使い方
（07）
さて、ここからが本番。「じゃあ、色を設定するのに、わざわざ、その数値を上下させて色を探さないといけないのか？」というと、そうではありません。
すでに世の中には、色見本、あるいはカラーチャートと呼ばれる「色の一覧表」が存在します。
このブログにも用意してあるので、良かったらご覧ください。「色見本（HTMLカラーチャート）」です。主だった色は、揃っています。
（08）
それでは、試しに<h1>タグの背景色を、好きな色に変更してみましょう。
CSSファイル「matome.css」を開いて、<h1>タグに色を付けるためのCSSコードを準備しておきます。「？」のところに、好きな色の値を入れるわけです。
（09）
「色見本（HTMLカラーチャート）」のページを表示させて、好きな色を探しましょう。色が決まったら、#ではじまる色の値をコピーしてください。
（10）
前述（09）でコピーした色の値を、貼り付けましょう。
（11）
ブラウザで表示させてみてください。<h1>タグの背景色が、指定した色で変更されているはずです。
背景色によっては、「文字が読み難いよ」と感じている人もいらっしゃるかもしれませんが、記事「文字色の変更【color】：CSS入門」にて、変更します。
省略表記
色の値は、省略して表記する場合があります。
例えば、「#ffff00」のように、「ff」、「ff」、「00」、3つともそれぞれが同じ英数字の場合は、省略して書くことが出来ます。
「#ffff00」は、「#ff0」と省略表記できます。分かるかしら？「#112233」ならば、「#123」です。
「んげぇぇ！何で半分しかないんや〜！」と驚かないためにも、覚えておきましょう。
色名表記
色の値を、色名で表記してある場合もあります。
body { background-color: yellow; }
ただ、すべての色に色名が付いているわけもなく、たまーに、こういう書き方をする人もいらっしゃるようですが、最近は、あまり見かけません。
「何じゃこりゃ〜！」と驚かない程度に、覚えておきましょう。
他にも10進数や割合で値を指定する方法もありますが、たいていは16進数で書きます。覚えなくても問題ありません。
次回予告
次回は、文字の色を変更する【color】について書きます。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/11 更新日：2008/04/11
« 「CSSファイルの外部読み込み」｜「文字色の変更【color】」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
１６進数
色の値
そういう事なんです。
特に知らなくても困りませんが、
ちょっとでも知っておくとイメージしやすいかと思って、
書いてみました。(・∀・)/したー
省略表記もできるのです。
その通りです。#ffffffならば、#fffです。
おならプー。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/262-533342eb
背景色の#ffffffなどが１６進数だとは知っていましたが、
１６進数とはなんぞや、と言う事が実はわかっていなかったので
とても参考になりました。
そういう事なんですね。
ところで！省略できるのしらなかったです！
では、#ffffffならば#fff？
そういえば、以前、この様に記述されたｃｓｓを見て、ちょっと混乱した事が
ありますが、あれは省略だったのですね。
ががーん